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

  • 相关阅读:
    vue 父子组件传参
    vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
    border-radius值的解析
    chrome开发工具指南(十四)
    chrome开发工具指南(十三)
    Python动态强类型解释型语言
    go基础 01
    代码发布 04
    代码发布03
    代码发布02
  • 原文地址:https://www.cnblogs.com/daizhipeng/p/5702775.html
Copyright © 2020-2023  润新知