echarts 角度漸變環形圖心得

今天作了一個圖，把本身的遇到的問題和體會記錄一下，以防忘記

echarts地址

https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G

參考官網地址： http://echarts.baidu.com/examples/index.html

思路：

首先須要1/4個圓形

在數據對象裏面設置75和25 分別表示一個佔1份，另外一個佔4份

 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 // 0% 處的顏色
 }, { offset: 1, color: color_percent100 // 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' }] }]

還有一部分就是真實數據環形

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

這個裏面須要注意的是一個算法

(100 - 50) * 270/ 360

100 - (100 - 50) * 270/ 360

咱們先算出這個公式裏面的270 怎麼得的

75/100*360 =270 

也就是在270的這個圓上進行百分比的配置

若是後臺傳來的是50%

(100 - 50) * 270/ 360 這樣算出來的就是在3/4圓中的一半位置
還有一個地方須要注意，圖中有一個顏色很亮的部分，我把這個部分設置佔比爲1
分爲3個部分來顯示

 分解開是這樣的

其餘部分用漸變來解決

 說到漸變，

 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)'// 100% 處的顏色
13  }], 14                 globalCoord: false // 缺省爲 false
15             }, 'none'],

 

 

 我遇到一個問題，就是橫軸的座標，若是不進行設置，座標上的寬度是頁面大小和數據的值變化的，若是頁面放大，橫軸的座標就會跟着自適應變大

若是頁面放大就會更大，效果就很差了

因此在xAxis對象裏設置，根據本身的須要設置值

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

startAngle：230

起始角度，支持範圍[0, 360]。