双圆环echarts 柱状配置项内容和展示

双圆环

          this.option = {
                    //     title: {
                    //     text: '75',
                    //     textStyle: {
                    //       color: '#01c4a3',
                    //       fontSize: 60
                    //     },
                    //     subtext: '总分：100分',
                    //     subtextStyle: {
                    //       color: '#909090',
                    //     },
                    //     itemGap: -10, // 主副标题距离
                    //     left: 'center',
                    //     top: 'center'
                    //   },
                     grid: {
                        top: '0.5%',
                        left: '0.5%',
                        right: '0.5%',
                        bottom: '0.5%'
                    },
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(255, 255, 255, .9)',
                        textStyle: {
                            color: '#3c3c3c'
                        },
                        alwaysShowContent: false,//移入显示
                        extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);',
                        confine: true,
                        formatter(param) {
                            const xName = ['测试1','测试2']
                            const tipUnit = ['m²' , '单']
                            return `<span style="color: #333;padding-left: 33px;"> ${param.name}</span><br>
                                    <span style="display:inline-block;margin-left: 12px;margin-right:5px;border-radius:7px;width:7px;height:7px;background-color:rgba(0,122,255,0.7);"></span>
                                    <span style="color: #666;margin-left: 6px;margin-right:25px">${xName[0]}: ${tipUnit[0] || 'm²'}</span><br>\
                                    <span style="display:inline-block;margin-left: 12px;margin-right:5px;border-radius:7px;width:7px;height:7px;background-color:#F5A623;"></span>
                                    <span style="color: #666;margin-left: 6px; margin-right:25px">${xName[1]}: ${tipUnit[1] || '单'} </span>`
                        }
                    },

                    angleAxis: {
                        max: 100, // 最大值
                        clockwise: true, // 逆时针
                        // 隐藏刻度线
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    radiusAxis: {
                        type: 'category',
                        // 隐藏刻度线
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    polar: {
                        center: ['50%', '50%'],
                        radius: [67,28] //图形大小
                    },
                    series: [
                     {
                        type: 'bar',
                        seriesIndex: 0,
                        itemStyle: {
                            normal: {
                                color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#6C93F3'
                                }, {
                                    offset: 1,
                                    color: '#65C3FF'
                                }],
                                global: false
                            }
                            }, //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }

                        },
                        data: [80],
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 14,
                        barGap: '-100%', // 两环重叠
                        z: 4
                    },
                    { // 灰色环
                        type: 'bar',
                        seriesIndex: 1,
                        itemStyle: {
                            color: '#EEEEEE'

                        },
                        data: [100],
                        coordinateSystem: 'polar',
                        roundCap: false,
                        barWidth: 14,
                        barGap: '-100%', // 两环重叠
                        z: 3
                    },
                    {
                            type: 'pie',
                            top: 'middle',
                            left: '0',
                            radius: ['46', '32'],
                            startAngle: 120,
                            // legendHoverLink: true,
                            hoverAnimation: true,//禁用高亮
                            clockwise: false,//是否顺时针
                            // label: {
                            //     show: true
                            // },
                            labelLine: {
                                show: false //视觉引导线
                            },
                            data: [
                                {
                                    value: 80,
                                    itemStyle: {
                                        normal: {
                                            color: "rgba(0,0,0,0)"
                                        }
                                    }
                                },
                                {
                                    value: 50,
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0,
                                                    y2: 1,
                                                    colorStops: [
                                                    {
                                                        offset: 0, color: 'rgba(249, 100, 100, 1)'
                                                    },
                                                    {
                                                        offset: 1, color: 'rgba(255, 154, 145, 1)'
                                                    }
                                                    ],
                                                    global: false
                                                }
                                        }
                                    }

                                }


                            ],
                            z: 5
                    }
                    ]
                }