【Echarts】echarts双圆环实现,外圆环做背景色

效果图

  let seriesData1 = [
                        { value: 12, name: '连续降雨14天' },
                        { value: 34, name: '夏连续降雨14天' },
                        { value: 23, name: '秋连续降雨14天' },
                        { value: 12, name: '1冬连续降雨14天' },
                        { value: 12, name: '2冬连续降雨14天' },
                        { value: 12, name: '3冬连续降雨14天' },
                        { value: 12, name: '4冬连续降雨14天' }
                    ];
                    this.gwhjDayChart = {
                        tooltip: {
                            trigger: 'item',
                            backgroundColor: '#fff',
                            textStyle: {
                                color: '#666',
                                fontSize: 14,
                                lineHeight: 16
                            },
                            confine: true,
                            formatter:
                                '{a} <br/><span style="font-size:12px" >{b} : {c} ({d}%)</span>'
                        },
                        series: [
                            {
                                name: name || '',
                                type: 'pie',
                                silent: true,
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                radius: ['0%', '80%'], // 半径
                                center: ['50%', '48%'], // 位置
                                color: new (echarts as any).graphic.RadialGradient(
                                    0.5,
                                    0.5,
                                    0.9,
                                    [
                                        { offset: 0, color: '#fff' },
                                        {
                                            offset: 1,
                                            color: 'rgba(18,137,223,0.5)'
                                        }
                                    ]
                                ),
                                data:
                                    seriesData1.length > 0
                                        ? [{ value: 0, name: '闭环' }]
                                        : []
                            },
                            {
                                name: name || '',
                                type: 'pie',
                                radius: ['30%', '50%'], // 半径
                                center: ['50%', '48%'], // 位置
                                label: {
                                    normal: {
                                        formatter: '{b}'
                                    }
                                },
                                color:
                                    AccidentEportraitAnalysisComponent.colors,
                                data: seriesData1,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

OrangeChenZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值