时间戳

首页 > 解决方案 > 如何将图像或形状添加到图表？

echarts - 如何将图像或形状添加到图表？

问题描述

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

放大图表

我正在尝试直接在画布上绘制这些装饰，但我需要知道第一个栏的位置才能在其后面绘制背景。

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

否则，您会对更“图表”的方式提出建议吗？

标签： echarts

解决方案

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

以上都适用于4.9.0版本，最新的5.0.2版本，我没研究过，改动太多，所以我可以很方便的用在他们的项目中，但是大概率可以用在5.0.2中。

  1. 要获取系列元素的坐标：
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，convertFromPixel它可以帮助您在页面和图表之间转换坐标。

  1. 用内置组件画一条线markLine：

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

请参阅我过去的答案，例如：https ://stackoverflow.com/a/65114004/1597964 ，造型也很容易。

  1. 通过内置组件绘制基础形状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: [...]
}

查看我过去的答案：画圈和画有向图

  1. Custom series. 它是内置组件，可以构建自己的图表类型。这不是很容易，但有时它是解决问题的唯一方法。您可以从我过去的答案或官方示例中看到一个使用示例。

  2. Echarts 使用zRender库来绘制形状，你可以自己尝试。另请查看 Echarts 扩展LiquidFill 代码。

推荐阅读