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

Question

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

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

提前致谢。

Answer 1

选项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'来绘制线条。