使用EChart.JS绘制水平目标线 [英] Draw horizontal target line using EChart.JS

问题描述

我想使用EChart.JS（ https://ecomfe.github.io/echarts-doc/public/en/index.html ）。

I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).

还有其他线程- Chart.js-画水平线，详细介绍了如何使用Chart.JS。

There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?

预先感谢。

推荐答案

自从Echarts v3发布并传递给Apache Foundation以来，该文档已通过不同的URL分发，某些选项已消失，某些未全部显示文档资源，等等。下面提供的链接已更新（截至2020年2月24日），但可能会再次断开。我还没有完全尝试v3，但是下面提供的代码仍然可以使用。 [/编辑]

Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]

选项 markLine 专为此目的而设计，请参见此处的文档：
https： //echarts.apache.org/en/option.html#series-line.markLine

The option markLine is designed for that, see documentation here: https://echarts.apache.org/en/option.html#series-line.markLine

请注意，它有不同的用途和选项提供，具体取决于您要绘制的内容：

Note that there are different uses for it, and different options to provide, depending on what you want to draw:

• 画布上的任意线（任何大小，任何方向，任何样式）
  
• 行匹配数据特征（最小值，最大值，平均值）


• 水平/垂直线

在所有情况下都必须使用属性 markLine.data ，并在此处描述详细信息：
https://echarts.apache.org/en/option.ht ml＃series-line.markLine.data

You have to use the attribute markLine.data in all cases, and description of specifics is described here: https://echarts.apache.org/en/option.html#series-line.markLine.data

这是我的工作方式，在时间序列上有一条曲线。请注意，在markLine.data [0]中，我无法获得 yAxis 足以绘制一条水平线：还必须指定 xAxis （起点和终点） ）。

Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).

   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/

Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/

请注意，ECharts非常喜欢在其末尾显示带有箭头符号的markLines，因此我使用了符号：无 在上面的代码中，只画了线。

Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.

这篇关于使用EChart.JS绘制水平目标线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！