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].