前两天要画一个echarts图,用两条曲线来分别展示修改前和修改后的高度和体积的对应关系,形成对比。
H作为x轴,V作为y轴。H和V都是可变的。
封装数据:series中的data项[[H,V],[H,v]···],按参考文章1中的一样,将数据封装成如下格式:
第一列为H,第二列为V
具体的封装办法。。。自己搞吧。。。
由于我这里要画两条曲线以作对比,x轴的H值可能是完全不一样的,比如我的第二条x轴的数据是以10开头的:
然后series里是这样的:
坑来了:第一个的x点是20,第二个的是10,图画的时候是以第一个data的数据先画,后画第二个data中的,也就是说,按第一个data的H值画好了x轴点,若是第二个data中存在第一个data中没有的H值,那么这个值会补到第一组x点的最后面,曲线是乱画的。所以要设置xAxis中的data数组:
将两条曲线的x轴的数据拿出来进行 拼接、去重、排序操作
至此,已经完成了绝大部分,最后处理第一条曲线在a点有值,但第二条曲线在a点没值的情况,不让其中断,使用connectNulls:true来连接空数据,option如下:
var option = {
title: {
text: '对比'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: this.lengedData
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: 50,
feature: {
saveAsImage: {}
}
},
xAxis: {
name: 'H',
type: 'category',
boundaryGap: false,
data: this.drawXAxisData
},
yAxis: {
name: 'V',
type: 'value'
},
series: [
{
name: this.fileVer,
type: 'line',
data: this.realBeforeData,
// 这是让h刻度缺失的点,数据正常连接不断开
connectNulls: true
},
{
name: this.currVer,
type: 'line',
data: this.realAfterData,
connectNulls: true
}
]
}
最后,有一个小知识点: 如果echarts图画在tab页,图的宽度就会只有100px,解决方法: 重新给echarts图设置宽度。
如下:
ref写在画图的div的外层,
<div ref="echart">
<div id="drawchart" style="width: 100%;height: 400px;"/>
</div>
结束。