好看的echart图表(圆环图内环渐变)

记录贴

项目需要需要写一个圆环图圆环图中心需要线性渐变加透明将底图透出来（数据动态加载）

//代码如下
 var echartsSeven = echarts.init(document.getElementById('echartsFourContent'));
 // 计算总数
                    var total = myData.map(function (v) {
                        return v.value
                    }).reduce(function (o, n) {
                        return o + n
                    });

                    // 计算每一个data的其实角度和末了角度 θ1和θ2
                    myData.reduce(function (o, v) {
                        v.theta1 = o;
                        v.theta2 = o + v.value / total;
                        return v.theta2
                    }, 0);
                    // 添加渐变
                    myData.forEach(function (v, i) {
                        var ops = calc(v.theta1 * 2 * Math.PI, v.theta2 * 2 * Math.PI);
                        if (v.value) v.itemStyle = {
                            color: {
                                type: 'radial',
                                x: ops.center[0],
                                y: ops.center[1],
                                r: ops.radius,
                                colorStops: [{
                                    offset: 0,
                                    color: v.color0
                                }, {
                                    offset: 0.4,
                                    color: v.color0
                                }, {
                                    offset: 0.2,
                                    color: v.color1
                                }, {
                                    offset: 1,
                                    color: v.color1
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    })

                    // 计算渐变中心以及渐变半径
                    function calc(theta1, theta2) {
                        var r = 0.5; // 半径是0.5 其实表示0.5个直径
                        var inner = 0.6; // 里面镂空部分占60%  option中radius为[33%, 55%]  55 * 0.6 == 33

                        var cos = Math.cos;
                        var sin = Math.sin;
                        var PI = Math.PI;
                        var min = Math.min;
                        var max = Math.max;

                        var bottom = 0;
                        var left = 2 * r;
                        var right = 0;

                        // y0: θ1对应的外部点的y值
                        // y1: θ2对应的外部点的y值
                        // _y0: θ1对应的内部点的y值
                        // _y1: θ2对应的内部点的y值
                        // x0: θ1对应的外部点的x值
                        // x1: θ2对应的外部点的x值
                        // _x0: θ1对应的内部点的x值
                        // _x1: θ2对应的内部点的x值
                        var y0 = r * (1 - cos(theta1));
                        var y1 = r * (1 - cos(theta2));

                        var _y0 = r * (1 - inner * cos(theta1));
                        var _y1 = r * (1 - inner * cos(theta2));

                        // 如果这个弧经过θ == PI的点  则bottom = 2PI
                        // bottom用于之后的max计算中
                        if (theta1 < PI && theta2 > PI) {
                            bottom = 2 * r;
                        }
                        // 计算这几个点的最大最小值
                        var ymin = min(_y0, _y1, y0, y1);
                        var ymax = max(_y0, _y1, y0, y1, bottom);

                        var x0 = r * (1 + sin(theta1));
                        var x1 = r * (1 + sin(theta2));

                        var _x0 = r * (1 + inner * sin(theta1));
                        var _x1 = r * (1 + inner * sin(theta2));

                        // 如果这个弧经过θ == PI / 2的点  则right = 2PI
                        if (theta1 < PI / 2 && theta2 > PI / 2) {
                            right = 2 * r;
                        }
                        // 如果这个弧经过θ == PI / 2 * 3的点  则left = 0
                        if (theta1 < PI / 2 * 3 && theta2 > PI / 2 * 3) {
                            left = 0;
                        }
                        xmin = min(_x0, _x1, x0, x1, left);
                        xmax = max(_x0, _x1, x1, x0, right);

                        return {
                            // 计算圆心以及半径
                            center: [(r - xmin) / (xmax - xmin), (r - ymin) / (ymax - ymin)],
                            radius: r / min(xmax - xmin, ymax - ymin)
                        }
                    }


	let option = {
                        legend: {
                            orient: 'vertical',
                            top: '7.5%',
                            left: '2%',
                            symbolKeepAspect: true,
                            itemGap: 20,
                            itemHeight: 16,
                            itemWidth: 18,
                            textStyle: {

                                color: '#fff'
                            },
                            formatter: function (data) {
                                if (_this.mapJsonName != 'chongqing_bananqu') {
                                    return data.split("-")[0] + " " + data.split("-")[1] + "起"
                                } else {
                                    return data.split("-")[0] + " " + data.split("-")[1] + "台"
                                }



                            },
                            itemStyle: {
                                width: 20,
                                height: 18,
                            },
                            selectedMode: false,
                            data: myDataTwo,


                        },


                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['20%', '55%'],
                                center: ['55%', '45%'],
                                roseType: 'radius',
                                labelLine: {
                                    show: false,
                                },
                                label: {
                                    normal: {
                                        position: 'inner',
                                        show: false
                                    }
                                },
                                data: myData,
                                itemStyle: {
                                    show: false,
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },

                            },

                        ]
                    };


                    window.addEventListener("resize", function () {
                        echartsSeven.resize()
                    })
                    echartsSeven.setOption(option);

主要计算是它的圆心以及所在半径还有内圆环所占的比例(代码复制即可食用)

以上内容仅供参考