玩转ECharts之实现“环形渐变”echarts #87ceeb配置项内容和展示

玩转ECharts之实现“环形渐变”

      option = {
    backgroundColor: "#000",
    "tooltip": {
        "show": true,
        "textStyle": {
            "color": "#fff",
            "fontSize": 15,
            "fontFamily": "微软雅黑"
        }
    },
    "series": [{
        "type": "pie",
        "data": [{
            "name": "2015",
            "value": 40,
            "itemStyle": {
                "color": {
                    "x": 0,
                    "y": 0.2113248654051872,
                    "x2": 1,
                    "y2": 0.7886751345948129,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgba(21, 118, 210, 0)"
                    }, {
                        // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                        offset: 0.5,
                        color: '#87ceeb',
                    }, {
                        "offset": 1,
                        "color": "rgba(21, 118, 210, 1)"
                    }]
                }
            },
            "_startArc": 0,
            "_endArc": 1.0471975511965976,
            "_color": "#1576d2",
            "_percent": 0.16666666666666666
        }, {
            "name": "2016",
            "value": 100,
            "itemStyle": {
                "color": {
                    "x": 0.9999999999999998,
                    "y": 0,
                    "x2": 1.6653345369377348e-16,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgba(209, 74, 130, 0)"
                    }, {
                        // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                        offset: 0.5,
                        color: '#87ceeb',
                    }, {
                        "offset": 1,
                        "color": "rgba(209, 74, 130, 1)"
                    }]
                }
            },
            "_startArc": 1.0471975511965976,
            "_endArc": 3.665191429188092,
            "_color": "#d14a82",
            "_percent": 0.4166666666666667
        }, {
            "name": "2017",
            "value": 10,
            "itemStyle": {
                "color": {
                    "x": 1,
                    "y": 0.8836634939894799,
                    "x2": 0,
                    "y2": 0.1163365060105202,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgba(38, 193, 242, 0)"
                    }, {
                        // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                        offset: 0.5,
                        color: '#87ceeb',
                    }, {
                        "offset": 1,
                        "color": "rgba(38, 193, 242, 1)"
                    }]
                }
            },
            "_startArc": 3.665191429188092,
            "_endArc": 3.9269908169872414,
            "_color": "#26c1f2",
            "_percent": 0.041666666666666664
        }, {
            "name": "2018",
            "value": 70,
            "itemStyle": {
                "color": {
                    "x": 0.43417375120630197,
                    "y": 1,
                    "x2": 0.565826248793698,
                    "y2": 0,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgba(161, 102, 255, 0)"
                    }, {
                        // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                        offset: 0.5,
                        color: '#87ceeb',
                    }, {
                        "offset": 1,
                        "color": "rgba(161, 102, 255, 1)"
                    }]
                }
            },
            "_startArc": 3.9269908169872414,
            "_endArc": 5.759586531581288,
            "_color": "#a166ff",
            "_percent": 0.2916666666666667
        }, {
            "name": "2019",
            "value": 20,
            "itemStyle": {
                "color": {
                    "x": 0,
                    "y": 0.6339745962155616,
                    "x2": 1,
                    "y2": 0.36602540378443843,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgba(18, 113, 204, 0)"
                    }, {
                        // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                        offset: 0.5,
                        color: '#87ceeb',
                    }, {
                        "offset": 1,
                        "color": "rgba(18, 113, 204, 1)"
                    }]
                }
            },
            "_startArc": 5.759586531581288,
            "_endArc": 6.283185307179585,
            "_color": "#1271cc",
            "_percent": 0.08333333333333333
        }],
        "animation": false,
        "radius": ["50%", "75%"],
        "center": ["50%", "50%"],
        "labelLine": {
            show: false
        },
        "itemStyle": {
            "linearGradient": true
        },
        "hoverAnimation": false
    }]
};