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

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

series:[{
            "name": '',
            "type": 'pie',
            "radius": ['50%', '70%'],
            "avoidLabelOverlap": false,
            "startAngle": 315,
            "color": ['rgba(34,34,34,.9)', "#ff7a00", "transparent"],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "clockwise": false,
            "itemStyle": {
                "normal": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                },
                "emphasis": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                }
            },
            "z": 10,
            "label": {
                "normal": {
                    "show": false,
                    "position": 'center'
                },

            },
            "labelLine": {
                "normal": {
                    "show": false
                }
            },
            "data": [{
                "value": (100 - 50) * 270/ 360,

                "label": {
                    normal: {
                        formatter: percent + '%',
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '90',
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                },
                "name": ''
            }, {
                "value": 1,
                "name": ''
            }, {
                "value": 100 - (100 - 50) * 270/ 360,
                "name": ''
            }]
        }]

這個里面需要注意的是一個算法

(100 - 50) * 270/ 360

100 - (100 - 50) * 270/ 360

我們先算出這個公式里面的270 怎么得的

75/100*360 =270 

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

如果后台傳來的是50%

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

 分解開是這樣的

其他部分用漸變來解決

 說到漸變，

"color": [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0.4,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(12,255,0,1)' // 0% 處的顏色
                }, {
                    offset: 1,
                    color: 'rgba(12,255,0,.3)'// 100% 處的顏色
                }],
                globalCoord: false // 缺省為 false
            }, 'none'],

 

 

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

如果頁面放大就會更大，效果就不好了

所以在xAxis對象里設置，根據自己的需要設置值

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

startAngle：230

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