getCanvas(timeList, countList) {
var that = this;
let option = {
grid: {
left: '0%',
right: '5%',
top: '10%',
bottom: '5%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'item',
backgroundColor: 'transparent',
formatter: (params) => {
// console.log(params);
let name = params.name
let value = params.value
let staticTitle = this.staticTitle
if (params) {
let str = `
<div id="tooltip" style="width:200px;z-index:1000;background:none;padding:0px;border:1px solid #eeeeee;"
class="tooltipCss">
<p class="point-name" style="background:#f3f3f3;color:#000000;padding:5px 10px;border-bottom:1px solid #eeeeee;font-size:16px;">${name}</p>
<div class="content" style="display: flex;align-items: center;;padding:5px 10px;background:#ffffff;">
<span style="background:#5386ED;border-radius:50%;width:8px;height:8px;"></span>
<span style="margin-left:5px;color:#000000;">${staticTitle}</span>
<span style="margin-left: auto;color:#5386ED;margin-right:5px;">${value}</span>
</div>
</div>
`
return str
} else {
return ''
}
},
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: { //横坐标字体的颜色
color: "#666666"
},
axisLine: { //横坐标线
show: true,
lineStyle: {
color: '#666666'
}
},
axisTick: {
show: false,
},
splitLine: { //网格线
show: false,
lineStyle: {
color: '#666666'
}
},
// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
data: timeList
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#666666'
}
},
axisLine: {
lineStyle: {
color: '#666666'
}
},
axisTick: {
show: false,
},
splitLine: { //线颜色设置
show: true,
lineStyle: {
color: '#eeeeee'
}
}
},
],
series: [{
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#5386ED',
lineStyle: {
color: "#5386ED",
width: 1.5
},
areaStyle: {
// color: '#e5f2fe',
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#ffffff '
}, {
offset: 1,
color: '#c7d8fa'
}]),
},
label: { show: true }
},
emphasis: { // 鼠标经过时小圆点的样式
color: '#5386ED',
borderColor: '#9FBCF8',
background: '#9fbcf8'
},
},
markPoint: {
itemStyle: {
normal: {
color: 'red'
}
}
},
// data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
data: countList
}]
};
that.modalCanvas.setOption(option, true);
that.modalCanvas.resize();
},
