This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Echarts common knowledge points

Echarts is a common charting tool, and there are many examples of mature charting template components already in place. However, the echarts document is too large, and some configuration attributes are hard to find. Today, I will record some common knowledge points and some configuration items that are often searched in my own development process.

1, gradient background color setting. Is it mostly a horizontal gradient or is it just a radial gradient? It’s a gradient from the center out. Gradients are mainly used LinearGradient and RadialGradient

Linear gradient

color: function (params) { var colorList = [ {c1: ' #CBA0FF',c2: '#598EFE'}, {c1: ' #FCAE17',c2: '#FCDA5B'}, {c1: '#30DDD8',c2: '#84F0F0'}, {c1: '#3288FC',c2: '# 36 b4fd'},] return new echarts. Graphic. That LinearGradient (1, 0, 0, 0, [{/ / color gradient function in the first four parameters respectively in four locations on the left, down, right, offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 }]) }Copy the code

Radial gradient (center outward gradient)

Color: new echarts. Graphic. RadialGradient (0.5, 0.5, 0.5, [{offset: 0, color: 'RGB (24,43,99. 3)}, {offset: 0.5, color: 'RGB (24,43,99. 8)}, {offset: 1. Color: baColor}]),Copy the code

2. The number of legend is too large, so paging operation is needed. Add the following two attributes to legend to enable the pagination function of Legend, so that legend does not cover up the content of the chart.

Type: 'scroll', // Orient: 'vertical',Copy the code

3. X-axis calibration label interval control. If the chart itself has too much data, the interval will be automatically opened, but sometimes it cannot meet the requirements of our own project, so we need to configure it by ourselves, and we need to use interval. My Settings are for time to do display scale labels

AxisLabel: {show: true, interval:23,// Spacing Settings between scales},Copy the code

4. Tilt Angle of the x axis text label. If the text on the x axis is too long, it will overlap, so you need to tilt the text to display it completely

AxisLabel: {rotate: 20,// rotate: 20,Copy the code

The figures are shown on the chart. Add a numerical display to a bar chart or line chart. Add label to series

TextStyle: {// color: '# FFF ', fontSize: 16}Copy the code

6. Content format configuration in the prompt box of the chart. As long as there are only two forms of string template and callback function.

String template (below is the content of the official website parsing)

The instance

Formatter: +' <br/>{b} : {c} '+'({d}%)'Copy the code

Of the callback function

formatter: function (params) { return ( '<span style="color: #fff;" < span style = "max-width: 100%; clear: both; min-height: 1em; },Copy the code