How to add images or shapes to a chart?

Question

I have a "normal" bar chart but I want to add a different background and a dotted line under the first bar

I'm trying to draw these decorations directly on the canvas, but I would need to know the position of the first bar to be able to draw a background behind it.

Is it possible to get the coordinate of the various elements of the chart (eg. the position of the first bar)?

Otherwise, would you have suggestions for a more "echarts" way of doing it?

score 0 · Accepted Answer · answered Feb 26 '21 at 00:52

To offer you the right option, you need to understand how deeply you want to customize the design. This is still a highly specialized tool for visualize data (I hope @jackshawn won't read it :)).

All of the above applies to version 4.9.0, the latest version 5.0.2, I have not studied, too many changes, so I can easily use in their projects but with a high probability this can be used in 5.0.2.

To get coordinates of series elements:

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

or with more convenient way:

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

Don't forget learn methods convertToPixel and convertFromPixel it can help you to convert coordinates between page and chart.

To draw a line with built-in component markLine:


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

See my past answer for example: https://stackoverflow.com/a/65114004/1597964, styling is also easy.

Draw base shapes by built-in component 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: [...]
}

See my past answers: draw circle and draw directed graph

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 past answer or official example.
Echarts use 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?

1 Answers1