Echarts 实现圆角环形图

1.在components文件夹下，创建环形图组件

<template>
<!--    基础的环形图-->
    <div class="mychart" ref="AnnularFoundation"></div>
</template>

<script>
    import * as echarts from "echarts";
    export default {
        name: "AnnularFoundation",
        props: {
            data: {},
        },
        watch: {
            data: {
                handler(value) {
                    this.updata(value);
                },
                deep: true, //深度监听
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.updata(this.data)
            });
        },
        methods:{
            updata(data){
                var myChart = echarts.init(this.$refs.AnnularFoundation);
                var option;
                option=data
                option && myChart.setOption(option);
                window.onresize = myChart.resize;
            }
        }
    }
</script>

<style scoped>
    .mychart{
        width: 100%;
        height: 100%;
    }
</style>

2.在页面中引入并挂在

//基础环形图
import AnnularFoundation from '@/components/AnnularFoundation'

components: {
            AnnularFoundation,
        }

3.页面中使用

<AnnularFoundation :data="AnnularFoundationOption2"></AnnularFoundation>

4.传递的数据

 AnnularFoundationOption2: {
                    color: ['#6C70DD','#C6C7ED'],//颜色
                    title: {                     //圆环中间的标题
                        text: '75%',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            fontSize: 24,
                            fontWeight:600,
                            color: '#5357C4',
                            fontStyle:'italic'
                        }
                    },
                    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: '150%'//圆环粗细
                    },
                    series: [{
                        type: 'bar',
                        data: [{
                            value: 75,
                        }],
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 25,
                        barGap: '-100%', // 两环重叠
                        z: 2,
                    },{ // 灰色环
                        type: 'bar',
                        data: [{
                            value: 100,
                        }],
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 25,
                        barGap: '-100%', // 两环重叠
                        z: 1
                    }]
                },