Question

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

还有其他线程 - ＆＃34; Chart.js - 绘制水平线＆＃34;详细介绍了如何使用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，因此我使用符号：'none'来绘制直线。

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

1 个答案: