如何向图表添加图像或形状？

Question

我有一个“普通”条形图，但我想在第一个条形下方添加不同的背景和一条虚线

我试图直接在 canvas 上绘制这些装饰，但我需要知道第一个条形图的位置才能在其后面绘制背景。

是否可以获取图表各个元素的坐标（例如第一个柱的位置）？

否则，您对更“echarts”的实现方式有什么建议吗？

Answer 1

为了向您提供正确的选择，您需要了解您想要定制设计的深度。这仍然是一个高度专业化的数据可视化工具（我希望 @jackshawn 不会阅读它:)）。

以上都是4.9.0版本，最新的5.0.2版本，我没研究过，改动太多，所以在他们的项目中可以轻松使用，但是大概率可以用在5.0.2.

获取系列元素的坐标：

myChart.getModel().getSeries()[0].getData()._itemLayouts

或者更方便的方式：

echarts.registerLayout(ecModel => {
  ecModel.eachSeries(seriesComponent => {
    var data = seriesComponent.getData();
    data.each(idx => {
      var layout = data.getItemLayout(idx);
      console.log(layout);
    })
  })
})

不要忘记学习方法convertToPixel and convertFromPixel它可以帮助您在页面和图表之间转换坐标。

用内置组件画线markLine:


option = {
  // [...]
  series: [{
    // [...]
    markLine: {
      show: true,
      data: [{
        name: 'average line',
        type: 'average'
      }],
      lineStyle: {
        color: 'red'
      },
    }
  }]
}

查看我过去的回答，例如：, styling is also easy。

通过内置组件绘制基础形状graphic

var option = {
  graphic: [{
      elements: [{
        id: 'small_circle',
        type: 'circle',
        z: 100,
        shape: {
          cx: 350,
          cy: 200,
          r: 20,
        },
        style: {
          fill: 'rgba(0, 140, 250, 0.5)',
          stroke: 'rgba(0, 50, 150, 0.5)',
          lineWidth: 2,
        }
      }]
    }]
   
  // series: [...]
}

查看我过去的回答： and

Custom series. It's built-in component that make possible build own types of charts. It's not very easy, but sometimes it is the only way to solve the problem. You can see an example of use from my or official example.
Echarts使用zRender library to draw shapes, you can try the same by yourself. Also take a look on Echarts extension LiquidFill code.

如何向图表添加图像或形状？

How to add images or shapes to a chart?

echarts