不懂事的小男孩

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 }
]
],

posted on 2016-07-25 11:09  不懂事的小男孩  阅读(8497)  评论(0编辑  收藏  举报