echarts环形图--彩虹图--蚊香图

需要实现的效果图

分析如何实现

1、可以看到这个数据图标不是常规的echarts图，需要从echarts的更多资源去找类似的例子copy，找了一圈还真找到类似的如图：

2、例子找到了，大致也差不多，动手改。
3、两者之间的区别：
（1）圈的个数不同、颜色不同
（2）右侧文字字体的样式（字体、颜色等）

上代码

定义变量

//定义要用到的变量：
  series: [],
  maxRadius:  90,
  barWidth: 6,
  barGap: 2,
  // sumValue: 0,
  showValue: true,
  showPercent: true,
  option: {},
//图形数据
  PieDatas: [
            {
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
            },
            {
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
            },
            {
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
            },
            {
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率"
            },
            {
                "value": 95,
                "name": "XXXXXXXXXXXXXXXX完整率识别准确率"
            },
            {
                "value": 95,
                "name": "XXXXXXX完整率时钟准确率"
            },
            {
                "value": 95,
                "name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
            },{
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"
            },{
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"
            },{
                "value": 95,
                "name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"
            },
        ],
//图形颜色
	BarColor:  [
            {
                "color1": "#4E9DFF",
                "color2": ""
            },
            {
                "color1": "#36C4F7",
                "color2": ""
            },
            {
                "color1": "#65D4AB",
                "color2": ""
            },
            {
                "color1": "#9FFF8D",
                "color2": ""
            },
            {
                "color1": "#FFE154",
                "color2": ""
            },
            {
                "color1": "#FFB854",
                "color2": ""
            },{
                "color1": "#FF9254",
                "color2": ""
            },{
                "color1": "#FF8181",
                "color2": ""
            },{
                "color1": "#FF81BA",
                "color2": ""
            },{
                "color1": "#DC81FF",
                "color2": ""
            },
        ],

绘制图形

this.pieDatas.map((item, i) => {
            this.series.push({
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(this.maxRadius - i * (this.barGap + this.barWidth)) + '%', (this.maxRadius - (i + 1) * this.barWidth - i * this.barGap) + '%'],
                center: [ "30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: this.barColor[i].color1
                    }
                }, {
                    value: 100 - item.value,
                    name: '',
                    itemStyle: {
                        color: "transparent",
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            })
            this.series.push({
                name: 'blank',
                type: 'pie',
                silent: true,
                z: 0,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [(this.maxRadius - i * (this.barGap + this.barWidth)) + '%', (this.maxRadius - (i + 1) * this.barWidth - i * this.barGap) + '%'],
                center: [ "30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "#f7f7f7",//圆圈另一半的颜色
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            });

        })
		this.option = {
                    grid: {
                        left:  0,
                        right:  0,
                        top:  0,
                        bottom:  0,
                    },
                    backgroundColor: '#fff',
                    tooltip: {
                        show: true,
                        trigger: "item",
                    },
                    legend: {//右侧文字
                        show: true,
                        left: '50%',
                        top: 'middle',
                        icon: "circle",
                        itemWidth: 6,
                        itemHeight: 8,
                        itemGap:  5,
                        textStyle: {
                        	//右侧字体样式
                            rich: {
                                bothNameValue: {
                                    width: 300,  //给文字设置统一长度，保证右侧的百分比对齐
                                },
                                title: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#999999',
                                    width: 260,
                                },
                                value: {
                                    color: '#489DF7',
                                    fontSize: 18,
                                    fontFimely: 'DIN Alternate'
                                }
                            }
                        },
                        formatter: (name) => {
                                var datas = this.pieDatas;
                                let total = 0;
                                datas.map(item => {
                                    total += (item.value - 0)
                                })
                                let valueIndex = datas.map(item => item.name).indexOf(name);
                                let htmlValue = this.showPercent ? datas[valueIndex].value + "%" : ''
                                return "{title|" + name +  "} {value|" + htmlValue + "}"
                                // return name + "  " + (this.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');
                            } ,
                        
                    },
                    series: this.series,
                
            }


//最后把option放到echarts中就可以了
this.myChart.setOption(this.option);

最后

按照代码可以做出一样的图表出来，无脑复制会吧各位大佬。