In the renderings provided by the UI, there are always some cases where normal development encounters few graphical representations. This article summarizes a few of the two areas encountered in actual development.

Pie chart presentation problem

When RADIUS is set to a value, problems are presented differently in ECharts V4 and V5 versions.

{
    type: 'pie',
    radius: ['55%'],
    center: ['50%', '50%'],
    data: [
        {
            name: "1",
            value: "3720"
        },
        {
            name: "2",
            value: "2920"
        },
        {
            name: "3",
            value: "2200"
        },
        {
            name: "4",
            value: "1420"
        }
    ]
}
Copy the code

Above is the configuration of series in pie chart Settings, radius is to set the radius of the pie chart.

The first item of the array is the inner radius and the second is the outer radius, and sometimes we implement things like the inner and outer edges of the ring that are not displayed in data. In this case, we can see that the v4 and V5 versions have different presentation problems. In V4, tooltip is not displayed. This is what we want, because the special line just shows the effect, but there will be tooltip in V5.

This question allows us to explore what causes it.

This is what it looks like under VERSION V4, which is equivalent to radius with only the outer radius set. The inner radius does not exist, and the width of the ring is not there.

Radius is set to the outer radius and the inner radius is considered to be 0. In this case, the width of the ring is the outer radius and the effect is shown as a circle.

Now it should be clear why one version of tooltip shows up and the other doesn’t.

3 d histogram

V3 version implementation

Since the UI provided a 3D histogram rendering, I looked into echarts to see if there was a way to do it.

In Baidu search, find a demo that can be implemented.

With the introduction of the echarts-Bar3D plugin, the other configurations are no different from the normal bar chart, and the effect is ok.

series: [ { type: 'bar3d', zlevel: 1, data: [400, 400, 400, 400, 400, 400, 400], itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#17404d' }, { offset: 1, color: '# 051 a2e}]), opacity: 0.8}}}, {type:' bar3d, zlevel: 2, barGap: '100%' data: [300, 120, 175, 20, 230, 350, 400], itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#ffcd98' }, { offset: 1, color: Opacity: 0}}}]Copy the code

You can see that it is the same as our normal bar chart configuration, except that the Y-axis delimiter has a different effect.

It is obvious that this 3D effect will give the divider a 3D effect, but this issue can be discussed with the UI, which is still acceptable, but finally used, it turns out that this version of Echarts is also completely different, this was implemented in V3.7, and is now in V5. The 3D looks completely different now, and it is not possible to introduce a version of V3 in the project. So it’s time to go in another direction.

Gl is configured with 3D display

In the GL configuration of Echarts, it can be found that there are some differences between bar3D and the original bar chart configuration. First, there is an extra Z-axis in the coordinate axis, and the configuration is also changed into xAxis3D, yAxis3D, etc., but basically the configuration is still the same as the original. It should be noted that the data of data is an array representing the position of a data under the x, Y and Z coordinate axes.

But the implementation effect is still far from what we want, the full 3D effect is not what we want at all, what we need is just a pseudo-3D display.

Pseudo 3D display bar chart

Some references can be found in the sample library of the Echarts charting platform.

This is as simple as adding two more pictorialBar configurations to the Series. This is a pictograph configuration, which is a histogram for setting up various representational graphic elements (such as images, SVG PathData, etc.). Here we only need simple graphic types, and this demo uses RECT.

But the effect was a little bit different from what we wanted, so we found another chart setting.

Custom chart

Echarts also has a custom chart function. Custom Series allows users to customize the rendering logic.

We can use this method to write a pseudo-3D bar chart.

const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function(ctx, shape) { const xAxisPoint = shape.xAxisPoint const c0 = [shape.x + 8, shape.y] const c1 = [shape.x - 8, shape.y] const c2 = [xAxisPoint[0] - 8, xAxisPoint[1]] const c3 = [xAxisPoint[0] + 8, xAxisPoint[1]] ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath() } }) const CubeRight = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function(ctx, shape) { const xAxisPoint = shape.xAxisPoint const c1 = [shape.x + 8, shape.y] const c2 = [xAxisPoint[0] + 8, xAxisPoint[1]] const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 3] const c4 = [shape.x + 13, shape.y - 3] ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() } }) const CubeTop = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function(ctx, shape) { const c1 = [shape.x - 8, shape.y] const c2 = [shape.x + 8, shape.y] const c3 = [shape.x + 13, shape.y - 3] const c4 = [shape.x - 3, shape.y - 3] ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() } }) echarts.graphic.registerShape('CubeLeft', CubeLeft) echarts.graphic.registerShape('CubeRight', CubeRight) echarts.graphic.registerShape('CubeTop', CubeTop) option = { series: [{ type: 'custom', renderItem: (params, API) => {// For each dataItem in data, the renderItem function is called. Const location = api.coord([api.value(0), api.value(1)]) return {type: 'group', children: [{type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#02ffff' }, { offset: 1, color: '#069095' } ]) } }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#199d9d' }, { offset: 1, color: '#0b6c70' } ]) } }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#397b92' }, { offset: 1, color: '#55b6ce' } ]) } }] } }, data: [2012, 1230, 3790, 2349, 1654] }] }Copy the code

This implementation is obviously a lot more complicated, so we define all the locations ourselves.

As you can see, we are using type: ‘group’, and there are several options for this type.

Group: A group is the only container that can have child nodes. Groups can be used to position a group of graphic elements as a whole.

Path: SVG PathData can be used as the path. It can be used to draw ICONS, or other shapes, because it can be easily scaled to fit a given size.

Image: graphics.

Text: indicates a text block.

Rect: rectangle.

Circle, circle.

Ring: A ring.

Sector: sector.

It’s an arc.

Polygon: polygon.

-Leonard: Polyline.

Line: A straight line.

BezierCurve: quadratic or cubic bezierCurve.

We can look at the custom implementation with one of the simplest custom diagrams:

{type: 'rect', shape: {x: x, y: y, width: width, height: height}, style: api.style()}Copy the code

As you can see, the structure is relatively simple. The three configurations of type, shape, and style can implement a custom chart.

// A group of graphic elements {type: 'group', // If diffChildrenByName is set to true, the child. Name is used for diff, // for better overanimation, but reduced performance. The default value is false. // diffChildrenByName: true, children: [{ type: 'circle', shape: { cx: cx, cy: cy, r: r }, style: api.style() }, { type: 'line', shape: { x1: x1, y1: y1, x2: x2, y2: y2 }, style: api.style() }] }Copy the code

You can then use multiple simple custom diagrams to form a set of elements.

Now that we know what the structure is, we’re going to look at what we do with a graphic.

Graphic: Graphic help methods.

Five specific methods under the official Graphic.

ExtendShape: Create a new Shape class.

RegisterShape: Registers a developer-defined shape class.

GetShapeClass: Gets a registered class.

ClipPointsByRect: Input a set of points and a rectangle and return the points intercepted by the rectangle.

ClipRectByRect: Enter two rectangles and return the result of the first rectangle cut by the second rectangle.

We use extendShape and registerShape here, one to create the shape we want, and one to import the shape we create.

You can see that this is pretty much the UI we want, and then you can just change the style.

The end of this article, I hope there is help to read this article partners.

Zhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product R&D Department Recruitment senior front-end ！！！！！ Welcome everyone to chat, you can send your resume to [email protected], join us, we can progress together, dinner together, travel together, let us from the world village partners into dahua village partners.