echarts 用marlkline畫線 同時配置中含有datazoom,怎么設置markline


由於項目需要設置邊界值即用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 }
]
],


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM