vue中使用echart图表——环形饼图

vue中使用echart图表——环形饼图

this.option = this.getOption(title,resource);

methods:{
    getOption(title,resource) {
        return {
            title: {
                text: title,
                textStyle: {
                    color: '#454545',
                    fontSize: 14,
                },
                subtext: resource + '%',
                subtextStyle: {
                    color: '#202020',
                    fontSize: 24,
                },
                itemGap: 15, // 主副标题距离
                left: 'center',
                top: 'center',
            },
            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: '90px', // 图形大小
            },
            series: [
                {
                    type: 'bar',
                    data: [
                        {
                            name: title,
                            value: resource,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#5175FF' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#40F5F9' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                        },
                    ],
                    coordinateSystem: 'polar',
                    roundCap: true,
                    barWidth: 10,
                    barGap: '-100%', // 两环重叠
                    z: 2,
                },
                {
                    // 灰色环
                    type: 'bar',
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                color: '#f8f6f6',
                                shadowColor: 'rgba(118,117,117,0.2)',
                                shadowBlur: 5,
                                shadowOffsetY: 2,
                            },
                        },
                    ],
                    coordinateSystem: 'polar',
                    roundCap: true,
                    barWidth: 10,
                    barGap: '-100%', // 两环重叠
                    z: 1,
                },
            ],
        };
    }
}

实现效果：