一、效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/525db8bda46e454db6296555b31a1e2d.png#pic_center)
二、主要代码
this.taskxAxis = []
this.taskSeries = [[], []]
taskInit() {
function calMax(arr) {
var max = arr[0]
for (var i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
}
var maxint = Math.ceil(max / 10)
var maxval = maxint * 10
return maxval
}
var maxappreg = calMax(this.taskSeries[0])
var maxactive = calMax(this.taskSeries[1])
var interval_left = maxappreg / 5
var interval_right = maxactive / 5
this.taskEchartLine = echarts.init(this.$refs['taskLineChart'])
window.addEventListener('resize', () => {
this.taskEchartLine && this.taskEchartLine.resize()
})
this.taskOption = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
formatter: params => {
return `
<div style="border:0;color:#666;text-align: left;width:150px">
<p style="color:#000"> ${params[0].axisValue}</p>
<div class="flex justify-content-space-between">
<div>
<span> 任务数:
${(function () {
if (params[0].data >= 10000) {
return params[0].data / 10000 + '万'
} else if (params[0].data < 10000) {
return params[0].data
}
})()}
</span>
</div>
</div>
<div class="flex justify-content-space-between">
<div>
<span> 发送量:
${(function () {
if (params[1].data >= 10000) {
return params[1].data / 10000 + '万'
} else if (params[1].data < 10000) {
return params[1].data
}
})()}
</span>
</div>
</div>
</div> `
},
axisPointer: {
type: 'shadow',
},
},
color: ['rgb(65,169,203)', 'rgb(246,126,60)'],
legend: {
data: ['任务数', '发送量'],
left: 'right',
selectedMode: false,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.taskxAxis,
},
yAxis: [
{
type: 'value',
name: '任务数',
min: 0,
max: maxappreg,
splitNumber: 5,
interval: interval_left,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#444343',
formatter: function (value, index) {
var value
if (value >= 10000) {
value = value / 10000 + '万'
} else if (value < 10000) {
value = value
}
return value
},
},
},
{
type: 'value',
name: '发送量',
min: 0,
max: maxactive,
splitNumber: 5,
interval: interval_right,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#444343',
formatter: function (value, index) {
var value
if (value >= 10000) {
value = value / 10000 + '万'
} else if (value < 10000) {
value = value
}
return value
},
},
},
],
series: [
{
name: '任务数',
type: 'line',
data: this.taskSeries[0],
},
{
name: '发送量',
type: 'line',
yAxisIndex: 1,
data: this.taskSeries[1],
},
],
}
this.taskEchartLine.setOption(this.taskOption)
},
链接: https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7