热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用EChart.JS绘制水平目标线

如何解决《使用EChart.JS绘制水平目标线》经验,为你挑选了1个好方法。

我想使用EChart.JS(https://ecomfe.github.io/echarts-doc/public/en/index.html)在水平线,条形图和饼形图中绘制一条显示阈值极限的水平目标线。

还有其他线程-“ Chart.js-绘制水平线”,详细介绍了如何使用Chart.JS。有没有人对EChart有特别的经验?

提前致谢。



1> Bob..:

选项markLine为此目的而设计的,请参见此处的文档:https : //ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine

请注意,根据您要绘制的内容,它有不同的用途,并提供不同的选项:

画布上的任意线(任何大小,任何方向,任何样式)

符合数据特征的行(最小,最大,平均值)

水平/垂直线

在所有情况下,您都必须使用属性markLine.data,并且在此处描述了详细说明:https : //ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine.data

这是我的工作方式,在时间序列上有一条直线。请注意,我无法使yAxis足以绘制一条水平线:还必须指定xAxis(起点和终点)。

   series: [{
    type: 'line',
    xAxisIndex: 0,
    yAxisIndex: 0,
    data: [
      [1509762600, 7.11376],
      [1509832800, 7.54459],
      [1509849000, 7.64559]
    ],
    markLine: {
      data: [
        // 1st line we want to draw
        [
          // start point of the line
          // we have to defined line attributes only here (not in the end point)
          {
            xAxis: 1509762600,
            yAxis: 3,
            symbol: 'none',
            lineStyle: {
              normal: {
                color: "#00F"
              }
            },
            label: {
              normal: {
                show: true,
                position: 'end',
                formatter: 'my label'
              }
            }
          },
          // end point of the line
          {
            xAxis: 1509849000,
            yAxis: 3,
            symbol: 'none'
          }
        ]
      ]
    }
  }]

这是一个小提琴:http : //jsfiddle.net/locinus/qrwron42/

请注意,ECharts确实喜欢在其末尾显示带有箭头符号的markLines,因此我使用symbol:'none'来绘制线条。


推荐阅读
author-avatar
索马里7_244
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有