Play with ECharts to achieve “top decoration”

preface

The ECharts series will show you how we can use ECharts to implement some of the weird charts that are commonly used in enterprise large-screen projects. The following articles will show you some of the “careful machines” that implement these charts, starting with the basic charts.

Sharing plan

1. How to Achieve top Decoration
2. How to implement dynamic Label Colors
3. How to Implement custom ICONS
4. How to Achieve Ring Gradient
5. How to Achieve a 1/2 Circle Rose

takeaway

background

Top decoration: As the name suggests, add some decorative shapes at the end of the graph. This article includes “Rectangle decoration”, “circle decoration”, and “picture Decoration”.

As shown in the figure, bar chart is a commonly used chart. In order to increase the beauty of the column, “rectangular decoration” should be added at the top of the column. How to achieve this?

Basic implementation

In the simplest way, you can implement it using a stack.

The reference example: gallery.echartsjs.com/editor.html…

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', stack: 'myBar', data: [60, 90, 100, 50, 70, 33, 80], barMaxWidth: '22%', itemStyle: {normal: {opacity: 0.5, color: '#c23531'}}}, {type: 'bar', stack: 'myBar', data: [1, 1, 1, 1, 1, 1, 1], tooltip: { show: false }, barMaxWidth: '22%', itemStyle: { normal: { color: '#c23531' } } }] };Copy the code

But doing so tends to bring up a few problems:

1) The height of decoration is obtained from the incoming values after the transformation of ECharts’ own algorithm, which is not favorable to flexibly cope with the dynamic changes of data;

2) According to different implementation standards (to decorate the top or bottom as the reading standard), data processing and code implementation modification trouble;

3) A lot of extra processing is required to ensure that the decorator and the data bar themselves are treated as a whole during interactive responses, such as a separate Tooltip when the mouse is moved over the decorator;

4) It is easy to affect the display effect of coordinate axes. For example, in the above example, the maximum value of y axis should be 100, but it is displayed as 120.

To solve these problems, I recommend using a custom approach.

The reference example: gallery.echartsjs.com/editor.html…

function renderItem(params, api) { const topCenter = api.coord([api.value(0), Value (1)]) const height = api.size([0, api.value(1)])[1] const width = api.size([0, 1])[0] * 0.3; const ceilHeight = 10 return { type: 'group', children: [{ type: 'rect', shape: { x: topCenter[0] - width / 2, y: TopCenter [1], width: width, height: height}, style: API. Style ({opacity: 0.5})}, {type: 'rect', shape: {x: topCenter[0] - width / 2, y: topCenter[1], width: width, height: ceilHeight }, style: api.style() } ] } } option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [60, 90, 100, 50, 70, 33, 80], type: 'custom', renderItem: renderItem, }] }Copy the code

As you can see, the width, height and position of the rectangle can be dynamically obtained by calling the params and API parameters of the callback function. After that, the height of the decoration can be given directly as needed, without considering how to match the ECharts preset calculation method to ensure the effect.

Of course, in practice, a bar chart usually consists of multiple series. The following example shows how to calculate this case. At the same time, in order to maintain the animation effect of the ECharts bar chart, a hybrid of type. bar and type.custom is used.

The reference example: gallery.echartsjs.com/editor.html…

const customSeriesLength = 3 const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] const colors = ["#1576d2", "#d14a82", "#26c1f2", "#a166ff", "#9C2BB6"] const barWidth = 0.2 const barGap = 0.2 Const topCenter = api.coord([api.value(0)), const topCenter = api.coord([api.value(0)), Value (1)]) // const unitWidth = api.size([0, 1])[0] Value (1)])[1] // const width = unitWidth * barWidth; // Const unitGapWidth = barGap * barWidth * unitWidth const GapsWidth = (CustomSeriesLength-1) * unitGapWidth const  showWidth = GapsWidth + width * customSeriesLength const decorateIdx = parseInt(params.seriesName.split('_')[1]) // Const xPosi = topCenter[0] -showwidth / 2 + decorateIdx * (width + unitGapWidth) return {type: {x: xPosi, y: topCenter[1], width: width, height: height > ceilHeight? ceilHeight : height }, style: api.style() } } let series = [] for (let i = 0; i < customSeriesLength; i++) { const data = xAxisData.map(d => ~~(Math.random() * 100)) const color = colors[i] series.push({ name: 'basicRect_' + i, type: 'bar', barWidth: barWidth * 100 + '%', barGap: barGap * 100 + '%', data: data, itemStyle: {opacity: 0.5, color: color}}) Series. Push ({name: 'decorateRect_' + I, type: 'custom', renderItem: renderItem, data: data, zlevel: 2, itemStyle: { color: color } }) } option = { xAxis: { type: 'category', data: xAxisData }, yAxis: { type: 'value' }, series: seriesCopy the code

The extension implementation

Decoration of other shapes on the bar chart

Now that you know how to calculate the location information, it’s easy to do some other effects. Whether you want to head a ball or a melon, you can head whatever you want.

Rectangular decoration at the end of the pie chart

Using the same design logic, we can also add this decorative effect to the ring diagram.

Note that the decoration of the pie chart needs to be built using polar coordinates. In this case, api.coord and api.size return the related parameters of the bar chart in polar coordinates, so they cannot be used directly.

The reference example: gallery.echartsjs.com/editor.html…

Examples show

Here are some of the effects we use in the actual application, to give you a design idea.