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

Question

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

5

我希望使用EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html)在折线图、柱状图和饼图上绘制一个水平目标线，来显示阈值限制。有其他的讨论帖 - "Chart.js - draw horizontal line"，其中详细介绍了如何使用Chart.JS进行操作。是否有人在EChart方面有特定经验可分享？谢谢！

- Tina_Swift

{btsdaf} - Bob

谢谢，看起来这样就可以了。 - Tina_Swift

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bob · Accepted Answer

[编辑] 自Echarts v3发布并移交给Apache基金会以来，文档已经散落在不同的URL中，一些选项已经消失，一些选项没有显示在所有文档资源中等等。下面提供的链接已更新（截至2020年2月24日），但可能会再次破裂。我还没有完全尝试过v3，但下面提供的代码应该仍然有效。[/编辑]

markLine选项是为此设计的，请查看此处的文档: https://echarts.apache.org/en/option.html#series-line.markLine

请注意，根据您要绘制的内容，它有不同的用途和不同的选项:

画布上的任意线条（任何大小、任何方向、任何样式）
与数据特征（最小值、最大值、平均值）匹配的线条
水平/垂直线

在所有情况下，您都必须使用属性markLine.data，具体描述在这里： https://echarts.apache.org/en/option.html#series-line.markLine.data

以下是我绘制时间序列线曲线的方法。请注意，在markLine.data[0]中，我无法使yAxis足以绘制一条水平线: 必须指定xAxis（起始点和结束点）。

   xAxis:  {
       type: 'time',
   },
   yAxis: {
       type: 'value'
   },
   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'
          }
        ]
      ]
    }
  }]

我找到了一个示例: https://jsfiddle.net/381510688/hff93ska/

请注意，ECharts很喜欢在markLine的末端显示箭头符号，因此我在上面的代码中使用了symbol: 'none'，只画线而不画箭头。