echarts angle gradient ring chart experience

I made a picture today to record my problems and experiences in case I forgot

echarts address

http://gallery.echartsjs.com/editor.html?c=xSyLFD4ypG

Reference official website address: http://echarts.baidu.com/examples/index.html

Ideas:

First you need 1/4 circle

Setting 75 and 25 in the data object means that one occupies 1 share and the other occupies 4 copies.

 series: [{
            "name": '',
            "type": 'pie',
            "radius": ['50%', '70%'],
            "avoidLabelOverlap": false,
            "startAngle": 225,
            "color": [{
                type: 'linear',
                x: 0,
                y: 0 ,
                x2: 0.4,
                y2: 1 ,
                colorStops: [{
                    offset: 0,
                    color: color_percent0 // color at 0% 
                }, {
                    offset: 1,
                    color: color_percent100 // color at 100% 
                }],
                globalCoord: false // 缺省为 false
            }, 'none'],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "label": {
                "normal": {
                    "show": false,
                    "position": 'center'
                },
                "emphasis": {
                    "show": true,
                    "textStyle": {
                        "fontSize": '30',
                        "fontWeight": 'bold'
                    }
                }
            },
            "labelLine": {
                "normal": {
                    "show": false
                }
            },
            "data": [{
                "value": 75,
                "name": '1'
            }, {
                "value": 25,
                "name": '2'
            }]
        }]

Another part is the real data ring

 1 series:[{
 2             "name": '',
 3             "type": 'pie',
 4             "radius": ['50%', '70%'],
 5             "avoidLabelOverlap": false,
 6             "startAngle": 315,
 7             "color": ['rgba(34,34,34,.9)', "#ff7a00", "transparent"],
 8             "hoverAnimation": false,
 9             "legendHoverLink": false,
10             "clockwise": false,
11             "itemStyle": {
12                 "normal": {
13                     "borderColor": "transparent",
14                     "borderWidth": "20"
15                 },
16                 "emphasis": {
17                     "borderColor": "transparent",
18                     "borderWidth": "20"
19                 }
20             },
21             "z": 10,
22             "label":{
23                 "normal": {
24                     "show": false,
25                     "position": 'center'
26                 },
27 
28             },
29             "labelLine": {
30                 "normal": {
31                     "show": false
32                 }
33             },
34             "data": [{
35                 "value": (100 - 50) * 270/ 360,
36 
37                 "label":{
38                     normal: {
39                         formatter: percent + '%',
40                         position: 'center',
41                         show: true,
42                         textStyle: {
43                             fontSize: '90',
44                             fontWeight: 'normal',
45                             color: '#fff'
46                         }
47                     }
48                 },
49                 "name": ''
50             },{
51                 "value": 1,
52                 "name": ''
53             }, {
54                 "value": 100 - (100 - 50) * 270/ 360,
55                 "name": ''
56             }]
57         }]

It is important to note that there is an algorithm

(100 - 50) * 270/ 360

100 - (100 - 50) * 270/ 360

Let's first figure out how to get 270 in this formula

75/100*360 =270 

That is, the percentage configuration is performed on this circle of 270.

If the background is 50%

(100 - 50) * 270/ 360 This calculation means that 
there is another place in the half of the 3/4 circle that needs attention. There is a bright part in the picture. I set the proportion of this part to 1 
point to display in 3 parts

 Break it down like this

Other parts are solved with gradients

 Speaking of gradients,

 1 "color": [{
 2                 type: 'linear',
 3                 x: 0,
 4                 y: 0,
 5                 x2: 0.4,
 6                 y2: 1,
 7                 colorStops: [{
 8                     offset: 0,
 9                     color: 'rgba(12,255,0,1)' // 0% 处的颜色
10                 }, {
11                     offset: 1,
12                     color: 'rgba(12,255,0,.3)'//Color at 100% 
13                  }],
 14                  globalCoord: false  // default false 
15              }, 'none'],

 

 

 I encountered a problem, that is, the coordinates of the horizontal axis, if not set, the width on the coordinates is the page size and the value of the data changes, if the page is enlarged, the coordinates of the horizontal axis will follow the adaptive increase

If the page is enlarged, it will be larger, and the effect will not be good

So set it in the xAxis object and set the value according to your own needs

min: function(value) {
return value.min - 7;
},
max: function(value) {
return value.max + 7;
},

startAngle： 230

The starting angle, supports the range [0, 360].