zoukankan      html  css  js  c++  java
  • 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 }
    ]
    ],

  • 相关阅读:
    .ellipsis 超过的部分显示省略号
    js 里面上一页和下一页
    CSS让你的IE浏览器崩溃(Crash your IE)作者:雪候鸟 来源: 风雪之隅
    元素居中显示
    jquery Carousel
    tabs 选择加载
    弹出窗
    下拉广告`
    opacity
    小波分析实验: 实验1 连续小波变换
  • 原文地址:https://www.cnblogs.com/daizhipeng/p/5702775.html
Copyright © 2011-2022 走看看