由於項目需要設置邊界值即用markline 畫標線,通過echarts文檔可以查看到(如下)
1.通過坐標點(xAxis和yAxis的設置)
通過網上搜索許多markline的配置都是通過下面來設置的,但是如果echarts中有datazoom的話如果滑動markline就顯示不出來
[ {name: '標線1起點', value: 100, xAxis: 1, yAxis: 20}, {name: '標線1終點', xAxis: '周三', yAxis: 20}, ],
再通過網上搜索,有給出答案是通過datazoom事件通過獲取坐標重畫
創建DataZoom拖動事件
myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole); //事件名, 相關聯的方法名
var ecConfig = require('echarts/config');
//拖動時執行次事件
function eConsole(param) {
var a = param.zoom.xAxisIndex[0];
var x = myChart.component.xAxis.option.xAxis[0].data;
.....
}----有時會出現線條
其實以上的有點不正確,可以配置如下:
var MAXNUMBER = 1000000000000000;---設置最大(通過xAxis:-1|MAXNUMBER可以讓線到達grid邊緣)
然后配置坐標xAxis: -1到xAxis: MAXNUMBER就可以了(如下)
data: [
[
{ name: '上限', value: max, xAxis: -1, yAxis: max },
{ xAxis: MAXNUMBER, yAxis: max }
],
[
{ name: '下限', value: min, xAxis: -1, yAxis: min },
{ xAxis: MAXNUMBER, yAxis: min }
]
],