好看的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);

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

以上内容仅供参考

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值