需求:
具体:
<div id="smokeEcharts" style="position:absolute;width: 97%;height:65vh;margin-top:2vh"></div>
数据(都是数组,相对应)
this.xAxis //x轴
this.lineValue1 //折线1
this.lineValue2 //折线2
this.lineValue3 //折线3
this.threshold //阈值
this.diffPercent1//分析仪相对误差
this.diffPercent2//工控机相对误差
折线处理(注意重要标注)
this.myChart = echarts.init(document.getElementById('smokeEcharts'));
// 指定图表的配置项和数据
//重要
let _this = this
this.myChart.setOption({
tooltip: {
trigger: 'item',//数据项图形触发
// trigger: 'axis',//坐标轴触发
// 浮窗位置-不能出页面
position: function (point, params, dom, rect, size) {
var x = 0;
var y = 0;
var pointX = point[0];
var pointY = point[1];
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
//浮窗内容-不用默认-单写
formatter(params) {
var pa = ''
for (var i in _this.xAxis) {
if(params.seriesName=='标气浓度'&¶ms.name.replace('\n',' ')==_this.xAxis[i]){
return pa = '时间:' + params.name + '<br>'+
'标物浓度:' + params.value + ' mg/m'+'<sup>'+'3'+'</sup>' + '<br>'+
'阈值:' + _this.threshold[i]
}else if(params.seriesName=='分析仪'&¶ms.name.replace('\n',' ')==_this.xAxis[i]){
return pa = '时间:' + params.name + '<br>'+
'浓度:' + params.value + ' mg/m'+'<sup>'+'3'+'</sup>' + '<br>'+
'相对误差:' + _this.diffPercent1[i]
}else{
return pa = '时间:' + params.name + '<br>'+
'浓度:' + params.value + ' mg/m'+'<sup>'+'3'+'</sup>' + '<br>'+
'相对误差:' + _this.diffPercent2[i]
}
}
}
},
//三条线
legend: {
// selectedMode:'multiple', //多选
data: ['分析仪', '工控机', '标气浓度'],
},
//调整位置
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
//缩放
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
minSpan: 5
}, {
type: 'slider',
xAxisIndex: 0,
minSpan: 5,
height: 20,
bottom: 10,
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '120%'
}],
//x轴
xAxis: {
name: "日期",
type: "category",
boundaryGap: true,
data: this.xAxis.map(function (str) {
return str.replace(' ', '\n')
}),
},
//y轴
yAxis: {
name: "浓度",
type: 'value'
},
//折线上的数据
series: [{
name: '分析仪',
type: 'line',
data: this.lineValue1
}, {
name: '工控机',
type: 'line',
data: this.lineValue2
}, {
name: '标气浓度',
type: 'line',
data: this.lineValue3
}],
});