1.echart自带的graphic水印属性：
graphic: [
{
type: 'image', // 图形元素类型
left: 'center',
top: 'middle',
z:0,
bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
style: {
image: require('@/assets/logo-small.png'),
width: 250,
height: 120
}
}
],缺陷：echarts添加graphic后发现鼠标经过水印区域没有提示
2.通过echarts官网文档发现backgroundColor除了能添加背景颜色之外还能添加背景图片，显示与水印相同效果
let fullImage = new Image();
let img = new Image();
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = echarts.getWidth() * window.devicePixelRatio;
canvas.height = echarts.getHeight() * window.devicePixelRatio;
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
fullImage.src = canvas.toDataURL();
echarts.resize();
};
img.src = require("../../../assets/echarts-bg.jpg");
option = {
backgroundColor:{//在背景属性中添加
type: 'pattern',
image: this.fullImage,//HtmlElement,canvasElement
repeat: 'no-repeat',
}
} 
2.补充随窗口变化自适应居中效果，完整代码：
<template>
<div class="content">
<div class="echart" ref="echart_2">
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
echart_2:null,
areaStyle1: {//设置区域渐变样式
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0.5, 0.5, 0.5, 1, [
{
offset: 0.9,
color: 'rgb(255, 255, 255)'
},
{
offset: 0.1,
color: '#d5e4f6'
}
])
},
areaStyle2: {//设置区域渐变样式
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0.9,
color: 'rgba(0, 0, 0, 0)'
},
{
offset: 0.1,
color: 'rgba(0, 0, 0, 0)',
}
])
},
fullImage:null,
}
},
mounted(){
let xList = [7,10,13,16,17,20];
let data = [];
let xAxis = [];
for(let i=0;i<10;i++){
xAxis.push('2022-07-11');
data.push(Math.round(Math.random()*100));
}
const axisObj = {
title:'',
xAxis:xAxis,
yAxis:[{name:'吨'}],
series:[
{name:'废铜牌号台州（日）',type:'line',data:data}
],
legend:['废铜牌号台州（日）']
}
console.log(axisObj.xAxis.length);
this.fetchData(axisObj,document.querySelector('.echart'));
let _this = this;
window.addEventListener('resize',function(){
_this.$nextTick(()=>{
_this.echart_2 && _this.getGenrac(_this.echart_2);
})
})
},
methods:{
getGenrac(dom){
console.log('resize');
let fullImage = new Image();
let img = new Image();
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = dom.getWidth() * window.devicePixelRatio;
canvas.height = dom.getHeight() * window.devicePixelRatio;
console.log('11',canvas.width,canvas.height);
img.onload = () => {
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.drawImage(img,canvas.width/2-125,canvas.height/2-50, 250,100);
fullImage.src = canvas.toDataURL();
let option = dom.getOption();
//option.backgroundColor.image = this.fullImage;
option.backgroundColor = {//在背景属性中添加
type: 'pattern',
image: fullImage,
repeat: 'repeat',
};
console.log('option',option);
dom.setOption(option,true);
dom.resize();
};
img.src = require("@/assets/logo.png");
},
fetchData(axisObj,dom){
// console.log('dom',obj,dom);
// 基于准备好的dom，初始化echarts实例
echarts.init(dom).dispose()//先销毁前实例;
this.echart_2 = echarts.init(dom);
let listOne = [];
let listTwo= [];
// this.fullImage = new Image();
// let img = new Image();
// let canvas = document.createElement('canvas');
// let ctx = canvas.getContext('2d');
// canvas.width = this.echart_2.getWidth() * window.devicePixelRatio;
// canvas.height = this.echart_2.getHeight() * window.devicePixelRatio;
// console.log('11',canvas.width,canvas.height);
// console.log('22', canvas.width/2-40,canvas.height/2-30 , canvas.width/2+40, canvas.height/2+30);
// img.onload = () => {
// ctx.rect(0,0,canvas.width,canvas.height);
// ctx.fillStyle = "#fff";
// ctx.fill();
// ctx.drawImage(img,canvas.width/2-125,canvas.height/2-50, 250,100);
// this.fullImage.src = canvas.toDataURL();
// this.echart_2.resize();
// };
// img.src = require("@/assets/logo-small.png");
// 绘制图表
var option = {
graphic: [
// {
// type: 'image', // 图形元素类型
// left: 'center',
// top: 'middle',
// z:0,
// bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
// style: {
// image: require('@/assets/logo-small.png'),
// width: 250,
// height: 120
// }
// }
],
// backgroundColor:{//在背景属性中添加
// type: 'pattern',
// image: this.fullImage,
// repeat: 'no-repeat',
// },
title: {//标题
text: '',
left: 'center',//标题位置,left,center,right
//x:'right',//水平安放,left,center,right
//y:'top',//垂直安放,top,center,bottom
backgroundColor:'#fff',//背景颜色
borderColor:'',//标题边框颜色
padding:5,//标题内边距，单位px,默认各方向内边距为5，同css
textStyle: {
fontSize: 16,
fontWeight: 'bold',
color: '#333'
},
// subtextStyle: {
// fontSize: 12,
// color: '#6E7079'
// }
},
color: ['#CE0000', '#20499E','#BFBFBF','#84A2C9','#EED1D1'],
//设置series每一项对应的颜色
tooltip: {//鼠标放上去展示的数据提示
trigger: 'axis',//触发类型,默认数据触发,item/axis
showDelay:20,//显示延迟,可避免频繁切换，单位ms
hideDelay:100,//隐藏延迟，单位ms
backgroundColor:'rgba(243, 246, 252,0.9)',//提示背景颜色
opacity:0.9,
borderColor:"#dee2ed",//提示边框颜色
borderWidth:1,//边框线宽默认0
borderRadius:4,//边框圆角默认4
padding:5,//内边距默认5，同css
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur: 8,
shadowColor:'rgba(54, 78, 128, 0.1000)',
axisPointer: {
type: 'cross',//shadow/line/cross(包含line和shadow),默认为直线line
label: {
backgroundColor: 'rgba(243, 246, 252, 0.9000)'
},
lineStyle:{//直线指示器样式
color:'#999',
width:1,
type:'dashed',//线条样式solid,dashed,同border样式设置
},
shadowStyle:{//阴影指示器样式
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur: 8,
shadowColor:'rgba(54, 78, 128, 0.1000)',
//width:'auto',//阴影大小
//color:'rgba(#364E80,.1)',//阴影颜色
}
},
// appendToBody: true,
confine: true,
extraCssText: 'white-space: normal; word-break: break-all;',
textStyle:{
},
formatter: function (params) {
console.log('显示提示');
let html='<div style="color:#333;">'+params[0].name+"<br>";
for(let i=0;i<params.length;i++){
if(params[i].seriesName==''){
break;
}
html+='<span style="display:flex;justify-content: space-between;flex-wrap:wrap;color:#333;"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'
html+=params[i].seriesName+'<span style="display:inline-block;"></span></span><span style="font-weight:bold;margin-left:15px;">'+(params[i].value?(params[i].value):'-')+"</span></span></div>";
}
return html;
}
},
toolbox: {//工具栏
right:'20',
y:'20',
itemGap:14,
emphasis: { iconStyle: { color: '#20499E',borderColor:'#20499E',textPadding:6,}},
itemSize: 15,
feature: {
dataView: { show: false, readOnly: false },//数据视图
magicType: {
show: true,
type: ['line', 'bar'],
icon:{
line:'path://'+'M0.5,0 C0.776142375,-5.07265313e-17 1,0.223857625 1,0.5 L1,13 L14,13 L14,14 L0,14 L0,0.5 C-3.38176876e-17,0.223857625 0.223857625,-2.26829225e-16 0.5,0 Z M12.8321819,4.12629534 C13.0156409,4.28937001 13.0507139,4.55719703 12.9273939,4.75965614 L12.8737047,4.83218192 L8.87370466,9.33218192 C8.69363542,9.53475981 8.39104903,9.55337016 8.18822332,9.39107939 L8.11727409,9.3217466 L5.947,6.74 L2.85466697,9.85243629 C2.68164902,10.0265493 2.4122868,10.0466843 2.21699376,9.91230368 L2.14756371,9.85466697 C1.97345068,9.68164902 1.95331568,9.4122868 2.08769632,9.21699376 L2.14533303,9.14756371 L5.62331979,5.64756371 C5.80739161,5.46232684 6.09748441,5.45296718 6.29245177,5.61111317 L6.36071267,5.6782534 L8.51,8.235 L12.1262953,4.16781808 C12.3097543,3.9614267 12.6257905,3.94283633 12.8321819,4.12629534 Z',
bar:'path://'+'M0.5,0 C0.776142375,-5.07265313e-17 1,0.223857625 1,0.5 L1,13 L14,13 L14,14 L0,14 L0,0.5 C-3.38176876e-17,0.223857625 0.223857625,-2.26829225e-16 0.5,0 Z M3.6,6 C3.93137085,6 4.2,6.26862915 4.2,6.6 L4.2,11.4 C4.2,11.7313708 3.93137085,12 3.6,12 C3.26862915,12 3,11.7313708 3,11.4 L3,6.6 C3,6.26862915 3.26862915,6 3.6,6 Z M7.6,3 C7.93137085,3 8.2,3.26862915 8.2,3.6 L8.2,11.4 C8.2,11.7313708 7.93137085,12 7.6,12 C7.26862915,12 7,11.7313708 7,11.4 L7,3.6 C7,3.26862915 7.26862915,3 7.6,3 Z M11.6,1 C11.9313708,1 12.2,1.26862915 12.2,1.6 L12.2,11.4 C12.2,11.7313708 11.9313708,12 11.6,12 C11.2686292,12 11,11.7313708 11,11.4 L11,1.6 C11,1.26862915 11.2686292,1 11.6,1 Z',
},
iconStyle:{
borderWidth:0,
color:'#555',
borderColor:'#555'
},
option:{
},
},//图表样式
saveAsImage: {
show: true,
icon:'path://'+'M0.576923077,8 C0.853065452,8 1.07692308,8.22385763 1.07692308,8.5 L1.076,13 L12.923,13 L12.9230769,8.5 C12.9230769,8.22385763 13.1469345,8 13.4230769,8 L13.5,8 C13.7761424,8 14,8.22385763 14,8.5 L13.999,13 L14,13 L14,14 L0,14 L0,8.5 C-3.38176876e-17,8.22385763 0.223857625,8 0.5,8 L0.576923077,8 Z M7.03846154,0 C7.31460391,-5.07265313e-17 7.53846154,0.223857625 7.53846154,0.5 L7.538,9.668 L10.3639972,6.6707477 C10.559826,6.46292938 10.9000058,6.44187063 11.1238102,6.62371165 C11.3227474,6.78534812 11.3627704,7.05289296 11.2316716,7.2563093 L11.1744644,7.3292523 L7.4052336,11.3292523 C7.21454102,11.5316199 6.89199284,11.5541052 6.67199901,11.3967082 L6.5947664,11.3292523 L2.82553563,7.3292523 C2.62970683,7.12143399 2.65238549,6.80555268 2.87618983,6.62371165 C3.07512702,6.46207518 3.36601525,6.46075459 3.56573788,6.60841409 L3.63600284,6.6707477 L6.461,9.667 L6.46153846,0.5 C6.46153846,0.223857625 6.68539609,2.72771136e-16 6.96153846,0 L7.03846154,0 Z',
iconStyle:{
borderWidth:0,
color:'#555',
borderColor:'#555'
},
},//保存图片
myFull: {
show: true,
title: "全屏",
iconStyle:{
borderWidth:0,
color:'#555',
borderColor:'#555'
},
//阿里图标库直接使用symbol引入自动生成路径 ，看path路径
icon: "path://"+'M4.2156945,9.08859116 C4.41056264,8.95359511 4.67998704,8.97288026 4.85355339,9.14644661 C5.04881554,9.34170876 5.04881554,9.65829124 4.85355339,9.85355339 L4.85355339,9.85355339 L1.854,12.853 L3,14 L0,14 L0,11 L1.147,12.146 L4.14644661,9.14644661 Z M9.7843055,9.08859116 L9.85355339,9.14644661 L12.853,12.146 L14,11 L14,14 L11,14 L12.146,12.853 L9.14644661,9.85355339 C8.95118446,9.65829124 8.95118446,9.34170876 9.14644661,9.14644661 C9.32001296,8.97288026 9.58943736,8.95359511 9.7843055,9.08859116 Z M3,0 L1.854,1.147 L4.85355339,4.14644661 C5.04881554,4.34170876 5.04881554,4.65829124 4.85355339,4.85355339 C4.67998704,5.02711974 4.41056264,5.04640489 4.2156945,4.91140884 L4.14644661,4.85355339 L1.147,1.854 L0,3 L0,0 L3,0 Z M14,0 L14,3 L12.853,1.854 L9.85355339,4.85355339 L9.7843055,4.91140884 C9.58943736,5.04640489 9.32001296,5.02711974 9.14644661,4.85355339 C8.95118446,4.65829124 8.95118446,4.34170876 9.14644661,4.14644661 L9.14644661,4.14644661 L12.146,1.147 L11,0 L14,0 Z',//enlargeNoHoverImg
// 这里是全屏放大
onclick: (e) => {
this.fullSc(option.title.text,e.getOption());
},
},
restore: {
show: true,
icon:'path://'+'M13.7610457,3.89082753 C13.5162769,3.72555294 13.1852113,3.79388762 13.0220321,4.04179951 L12.5874105,4.70607621 C12.4179551,4.10536665 12.162203,3.53326231 11.8232923,2.99929826 C11.3572901,2.26033015 10.7610583,1.63578291 10.0518562,1.1431375 C9.36775866,0.667973064 8.6083476,0.334245531 7.79402046,0.153079156 C6.97969332,-0.0280872194 6.15281393,-0.0487465429 5.33534873,0.092690364 C4.48807193,0.238894807 3.6894351,0.553552195 2.95983564,1.02553828 C2.23023618,1.49752436 1.61360696,2.10141228 1.12720732,2.81813188 C0.658067018,3.51101381 0.328570487,4.28017631 0.149700942,5.10496007 C-0.0275995728,5.92974384 -0.0479969771,6.76724103 0.0916467909,7.59520314 C0.235997652,8.45335966 0.54666581,9.26225163 1.01266805,10.0012197 C1.47867028,10.7401878 2.0749021,11.3647351 2.78410416,11.8573805 C3.46820172,12.3325449 4.22761277,12.6662725 5.04193991,12.8474388 C5.50009699,12.9491463 5.96139214,13 6.42425631,13 C6.78356443,13 7.14287256,12.9698056 7.50218068,12.9078276 C8.34945747,12.7616232 9.1480943,12.4469658 9.87769376,11.9749797 C10.9634633,11.2709735 11.806033,10.2682018 12.3143991,9.07313936 C12.4305074,8.79821144 12.3049849,8.48196487 12.0351115,8.36277647 C11.7636691,8.24517724 11.451432,8.37231154 11.3337546,8.64565028 C10.9116853,9.64206535 10.2087593,10.4779734 9.30342838,11.0643803 C8.09998153,11.8446671 6.66745613,12.102114 5.27258748,11.7922242 C3.87771884,11.4807451 2.68368617,10.6384804 1.91486093,9.41958032 C1.14446666,8.20068024 0.890283621,6.74976006 1.19624469,5.33698017 C1.50377478,3.92420028 2.33536126,2.71483527 3.53880812,1.93613769 C4.74225497,1.15585093 6.17478037,0.89840398 7.56964901,1.20829383 C8.96451766,1.51977286 10.1585503,2.36203759 10.9273756,3.58093767 C11.1439019,3.92578946 11.3212024,4.28812221 11.4561391,4.66475757 L11.1125212,4.43432665 C10.8677524,4.26905206 10.5366868,4.33738675 10.3735076,4.58529863 C10.2103284,4.83321051 10.2777967,5.16852722 10.5225655,5.33380181 L12.1167011,6.40490828 C12.2045669,6.46370789 12.3081229,6.49549146 12.411679,6.49549146 C12.4461977,6.49549146 12.4822854,6.49231311 12.5168041,6.48436721 C12.6548788,6.45576199 12.7772632,6.3731247 12.8557148,6.2539363 L13.9132418,4.63933071 C14.0732829,4.38982965 14.0058146,4.05451294 13.7610457,3.89082753 Z',
iconStyle:{
borderWidth:0,
color:'#555',
borderColor:'#555'
},
},//重置
myAtlas: {
title: "添加到“我的图集”",
//阿里图标库直接使用symbol引入自动生成路径 ，看path路径
icon: "path://"+'M10.1996875,8.02484375 L8.45,6.71265625 C8.18484375,6.51390625 7.8153125,6.51390625 7.55015625,6.71265625 L6.00984375,7.86765625 L3.95625,6.22484375 C3.69875,6.01875 3.3425,6.003125 3.06859375,6.1875 L1,7.5784375 L1,1 L13,1 L13,7.5 C13,7.77609375 13.2239062,8 13.5,8 C13.7760937,8 14,7.77609375 14,7.5 L14,0.95796875 C14,0.4296875 13.5703125,0 13.0420312,0 L0.95796875,0 C0.4296875,0 0,0.4296875 0,0.95796875 L0,12.0420313 C0,12.5703125 0.4296875,13 0.95796875,13 L6.5,13 C6.77609375,13 7,12.7760938 7,12.5 C7,12.2239063 6.77609375,12 6.5,12 L1,12 L1,8.78375 L3.474375,7.12 L5.9903125,9.1325 L8,7.625 L9.5996875,8.8246875 C9.82140625,8.99140625 10.1345312,8.94546875 10.2996875,8.72484375 C10.4653125,8.50390625 10.420625,8.19046875 10.1996875,8.02484375 Z M6,3.5 C6,4.3271875 6.6728125,5 7.5,5 C8.3271875,5 9,4.3271875 9,3.5 C9,2.6728125 8.3271875,2 7.5,2 C6.6728125,2 6,2.6728125 6,3.5 Z M8,3.5 C8,3.775625 7.775625,4 7.5,4 C7.224375,4 7,3.775625 7,3.5 C7,3.224375 7.224375,3 7.5,3 C7.775625,3 8,3.224375 8,3.5 Z M13.5416667,10.7916667 L11.7083333,10.7916667 L11.7083333,8.95833333 C11.7083333,8.7052474 11.5030859,8.5 11.25,8.5 C10.9969141,8.5 10.7916667,8.7052474 10.7916667,8.95833333 L10.7916667,10.7916667 L8.95833333,10.7916667 C8.7052474,10.7916667 8.5,10.9969141 8.5,11.25 C8.5,11.5030859 8.7052474,11.7083333 8.95833333,11.7083333 L10.7916667,11.7083333 L10.7916667,13.5416667 C10.7916667,13.7947526 10.9969141,14 11.25,14 C11.5030859,14 11.7083333,13.7947526 11.7083333,13.5416667 L11.7083333,11.7083333 L13.5416667,11.7083333 C13.7947526,11.7083333 14,11.5030859 14,11.25 C14,10.9969141 13.7947526,10.7916667 13.5416667,10.7916667 Z',
iconStyle:{
borderWidth:0,
color:'#555',
borderColor:'#555'
},
// 这里是全屏放大
onclick: (e) => {
let offset = null;
if(axisObj.frequencyName === '日度' || axisObj.frequencyName === '周度' || axisObj.frequencyName === '旬度' || axisObj.frequencyName === '月度'){
offset = 2;
}
if(axisObj.frequencyName === '季度' || axisObj.frequencyName === '半年度' || axisObj.frequencyName === '年度'){
offset = 5;
}
this.addAtlas({
name:option.title.text,
dataConfig:JSON.stringify({
indexCodes:axisObj.indexCodes,
timeType:4,
offset:offset,
sort:'asc',
}),
chartConfig:JSON.stringify(e.getOption()),
importType:7,
chartDesc:option.title.text,
});
},
},
//dataZoom:{show:true},
},
},
legend: {//图表说明
orient:'horizontal',//布局方式,默认为水平布局，可选为:horizontal,vertical
type: "scroll",
//left:'center',//图例位置默认center,left,right,
x:'center',//水平安放,left,center,right,默认全图居中
y:'bottom',//垂直安放,top,center,bottom,默认全图顶端
backgroundColor:'#fff',//背景颜色
borderColor:'',//图例边框颜色
borderWidth:0,//图例边框线宽，默认为0无边框
padding:5,//默认内边距为5，同css设置上右下左边距
itemGap:10,//各个item之间的间隔，默认为10，横向布局时为水平间隔，纵向布局为纵向间隔
itemWidth:24,//图例图形宽度
itemHeight:10,//图例图形高度
textStyle:{//图例样式
fontSize:12,
color:'#7f7f7f',
lineHeight:20
},
icon:'rect',
data: [
{
name: '出口数量',
textStyle: { color: '#7F7F7F' },
},
{ name: '出口金额',
icon: 'path://M2.0,0.0 L47.999,0.0 C49.104,0.0 49.999,0.895 49.999,1.999 C49.999,3.104 49.104,4.0 47.999,4.0 L2.0,4.0 C0.895,4.0 0.0,3.104 0.0,1.999 C0.0,0.895 0.895,0.0 2.0,0.0 Z',
textStyle: { color: '#7F7F7F' }
}
],
padding: [0, 0],
},
grid: {//控制坐标轴网格缩进
left:'30',
right:'30',
top:'80',
bottom: '24',
containLabel: true
},
xAxis: {//x坐标轴
type: 'category',
data: this.xAxis,
boundaryGap:true,//是否遗留边界间隙，默认为true，false多用于折线图和面积图
axisTick: {
alignWithLabel: true,//刻度是否在文本居中
show:true,//是否显示坐标轴刻度,默认true
},
axisLine:{//轴线
show:true,
lineStyle:{
color:'#bfbfbf' //更改坐标轴颜色
}
},
axisLabel: {//坐标文本
textStyle:{
color:"#7f7f7f",
fontSize:12,
},
},
splitLine:{//网格线
show:false
},
axisPointer:{
label: {
show: true,
backgroundColor: '#364E80',
opacity:0.9,
lineHeight: 14,
height:11
},
}
},
yAxis: [{//配置双y轴刻度对应一致
name:'百万美元',
nameTextStyle:{
color:'#7f7f7f'
},
type:'value',
min:0,
interval: 300,//强制划分刻度
max:900,
//boundaryGap:true,//是否遗留边界间隙，默认为true，false多用于折线图和面积图
axisLine:{//轴线
show:true,
lineStyle:{
color:'#bfbfbf' //更改坐标轴颜色
}
},
axisLabel: {//坐标文本
interval: 0,
rotate: 0 ,//倾斜30度
show:true,//是否展示
textStyle:{
color:"#7f7f7f",
fontSize:12,
},
},
axisTick: {
alignWithLabel: true,//刻度是否在文本居中
show:true,//是否显示坐标轴刻度,默认true
},
axisPointer:{
label: {
show: true,
backgroundColor: '#364E80',
opacity:0.9,
lineHeight: 14,
height:11
},
}
},{
name:'万吨',
nameTextStyle:{
color:'#7f7f7f'
},
type:'value',
min:0,
interval: 300,//强制划分刻度
max:900,
axisLine:{//轴线
show:true,
lineStyle:{
color:'#bfbfbf' //更改坐标轴颜色
}
},
axisLabel: {//坐标文本
interval: 0,
rotate: 0 ,//倾斜30度
show:true,//是否展示
textStyle:{
color:"#7f7f7f",
fontSize:12,
},
},
axisTick: {
alignWithLabel: true,//刻度是否在文本居中
show:true,//是否显示坐标轴刻度,默认true
},
axisPointer:{
label: {
show: true,
backgroundColor: '#364E80',
opacity:0.9,
lineHeight: 14,
height:11
},
}
}],//x坐标轴
series: [
{
name: '',
type: '',//修改图表样式
smooth: true,//折线是否平滑,默认false,当type==line起作用
showSymbol: false,//是否显示节点,默认true,当type==line起作用
data: listOne,//数据
emphasis: {
focus: 'series'
},
areaStyle:null,
},
{
name: '',
type: '',//修改图表样式
smooth: true,//折现是否平滑,默认false,当type==line起作用
showSymbol: false,//是否显示节点,默认true,当type==line起作用
data: listTwo,//数据
emphasis: {
focus: 'series'
},
yAxisIndex:1,//采用yAxis第二个配置
areaStyle:null
}
],
};
option.title.text = axisObj.title;
option.xAxis.data = axisObj.xAxis;
option.legend.data = axisObj.legend;
option.legend.data.forEach((item,index)=>{
option.legend.data[index]={
name:axisObj.legend[index],
icon:axisObj.series[index].type=='line'?'path://M2.0,0.0 L47.999,0.0 C49.104,0.0 49.999,0.895 49.999,1.999 C49.999,3.104 49.104,4.0 47.999,4.0 L2.0,4.0 C0.895,4.0 0.0,3.104 0.0,1.999 C0.0,0.895 0.895,0.0 2.0,0.0 Z'
:''
}
})
//series
let list = [];
axisObj.series.forEach((item,index)=>{
let obj = {
name: item.name,
type: item.type,//修改图表样式
smooth: true,//折线是否平滑,默认false,当type==line起作用
showSymbol: false,//是否显示节点,默认true,当type==line起作用
data: item.data,//数据
emphasis: {
focus: 'none',
disabled:false,
},
yAxisIndex:item.yAxisIndex,
areaStyle:null,
lineWidth:1.5,
barMaxWidth:40,
}
list.push(obj);
})
//yAxis
let list2 = [];
axisObj.yAxis.forEach(item=>{
let obj = {
name:item.name,
nameTextStyle:{
color:'#7f7f7f'
},
type:'value',
boundaryGap:true,//是否遗留边界间隙，默认为true，false多用于折线图和面积图
axisTick: {
alignWithLabel: true,//刻度是否在文本居中
show:true,//是否显示坐标轴刻度,默认true
},
axisLine:{//轴线
show:true,
lineStyle:{
color:'#bfbfbf' //更改坐标轴颜色
}
},
axisLabel: {//坐标文本
show:true,
textStyle:{
color:"#7f7f7f",
fontSize:12,
},
},
axisPointer:{
label: {
show: true,
backgroundColor: '#364E80',
opacity:0.9,
lineHeight: 14,
height:11
},
},
splitLine:{
show:true,
lineStyle:{
color:'rgba(222,226,237,0.5)'
}
},
}
list2.push(obj);
})
option.series = list.length>0?list:option.series;
option.yAxis = list2.length>0?list2:option.yAxis;
this.echart_2.setOption(option,true);//清除历史数据重新渲染
this.echart_2.resize();
let _this = this;
this.getGenrac(_this.echart_2);
this.echart_2.on('globalout', function (params) {
_this.echart_2._dom.childNodes[1].classList.add('tooptip');
});
dom.addEventListener('mousemove',function(){
_this.echart_2._dom && _this.echart_2._dom.childNodes[1].classList.remove('tooptip');
});
}
}
}
</script>
<style lang="less" scoped>
.tooptip{
display: none;
}
.echart{
height: 250px;
width: 30%;
}
</style> 参考链接：echarts设置背景图片，且能够自适应宽高_echarts背景图片_依赖_赖的博客-CSDN博客
