vue +echart 双圆角双环形图

记录工作，有需要类似效果，可以自取

主要是利用极坐标轴和bar,以及roundCap.用type:'pie’环形图也是可以，但是我想要是类似进度条的效果，还有圆角效果，用‘pie’来有点麻烦，（也可能是我了解不够多）

达到效果如图：（渐变色，圆角环形图，双环形图）

 

代码：

<template>
    <div>
        <div style="width: 240px;height:280px;float:left;" ref="chart"></div>
    </div>
</template>

<script>
export default {
    name: 'ringChart',
    data() {
        return {
            max: 16,
        };
    },
    methods: {
        initCharts() {
            let myLine = this.$echarts.init(this.$refs.chart);
            myLine.setOption({
                angleAxis: {
                    clockwise: true, // 是否按顺时针，默认顺时针(true)。
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    min: 0,
                    max: this.max, //一圈的刻度值
                    startAngle: 270 //初始角度
                },
                radiusAxis: {
                    type: 'category',
                    data: ['3', '4'], // 极坐标径向轴中的类目，这也是两个环的关键！！！！
                    z: 10,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                },
                legend: {
                    icon: 'rect',//图例文字块的样式
                    show: true,
                    // data: ['A', 'B', 'C'],
                    bottom: '-6',
                    left: 'left',
                    textStyle: {
                        color: '#00FCF9',//图例文字的颜色
                    },
                },
                polar: {
                    center: ['50%', '40%'],//图形位置，类似margin或padding
                    radius: ['48%', '75%']//图形大小
                },
                series: [
                    {
                        type: 'bar',
                        data: [0, 12],
                        itemStyle: {//渐变色关键代码
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: '#29D1D2' },
                                { offset: 1, color: '#0795DF' },
                            ])
                        },
                        barWidth: 16,//这边特别注意：我是用来调两个圆环的间距的，和polar.radius 一起来调
                        coordinateSystem: 'polar',
                        name: '科员及以下：905人',
                        roundCap: true,
                        stack: 'a',
                        z: 2,
                    }, {
                        type: 'bar',
                        data: [0, this.max - 8],
                        itemStyle: { color: 'rgba(55, 74, 132, 0.39)' },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        stack: 'a',
                        z: 1
                    }, {
                        type: 'bar',
                        data: [2, 0],
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: '#F05749' },
                                { offset: 1, color: '#CA3628' },
                            ])
                        },
                        coordinateSystem: 'polar',
                        name: '科级：100人',
                        stack: 'a',
                        roundCap: true,
                        z: 4,
                    }, {
                        type: 'bar',
                        data: [2, 0],
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: '#4F33D3' },
                                { offset: 1, color: '#B48EF1' },
                            ])
                        },
                        coordinateSystem: 'polar',
                        name: '处级：31人',
                        stack: 'a',
                        roundCap: true,
                        z: 3
                    }, {
                        type: 'bar',
                        data: [2, 0],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: '#ED325F' },
                                { offset: 1, color: '#FF84BB' },
                            ])
                        },
                        name: '厅级：4人',
                        stack: 'a',
                        roundCap: true,
                        z: 2,
                    }, {
                        type: 'bar',
                        data: [10, 0],
                        itemStyle: {
                            color: '#1E2E61'
                        },
                        coordinateSystem: 'polar',
                        stack: 'a',
                        roundCap: true,
                        z: 1,
                    }],
            });
        }
    },
    mounted() {
        this.initCharts();
    },
};
</script>

注意：要是先引入echarts，

//main.js

import "../src/style/dark.css";
import * as echarts from "echarts";