Vue中echarts半圆环图表

更新补充

才发现官方文档有更简便方式，有两个参数:startAngle开始的角度，endAngle结束的角度

官方案例

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 90,
      endAngle: 270,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

---

父组件调用

<template>
  <Semicircle id="seedling-ratio" width="50%" height="40vh" :mapData="mapData"></Semicircle>
</template>
<script>
import Semicircle from './components/Semicircle.vue'
export default {
  components: { Card, Semicircle, Slider },
  data() {
  	return {
  	  mapData: {
        data: [
          { name: '丘北县分公司', value: 16 },
          { name: '砚山县分公司', value: 20 },
          { name: '广南县分公司', value: 18 },
          { name: '文山市分公司', value: 10 },
          { name: '麻栗坡县分公司', value: 15 },
          { name: '西畴县分公司', value: 14 },
          { name: '马关县分公司', value: 7 }
        ],
        total: 100
      },
    }
  }
}
</script>

Semicircle.vue图表组件

<template>
    <div class="cirle-pie">
        <div :id="id" :style="{ width, height }"></div>
        <ul class="legend-ul">
            <li class="legend-li" v-for="(item, index) in mapData.data" :key="index">
                <p class="li-name">{{ item.name }}</p>
                <div class="li-num">
                    <span class="point" :style="{ background: color[index] }"></span>
                    <span class="num">{{ item.value }} %</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'Semicircle',
    props: ['id', 'width', 'height', 'mapData'],

    computed: {},
    data() {
        return {
            myMap: {},
            // 颜色设置
            color: ["#5B7630", "#668435", "#75963D", "#86AD46", "#9AC24E", "#B6CA3F", "#C4BC48", "#E0C646", "#F7CF46", "#FFDE87", "#FEEECA"],

        }
    },
    watch: {
        'mapData': {
            handler(newVal, old) {
                this.setOption()
            },
        }
    },
    created() { },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const _this = this
            this.myMap = echarts.init(document.getElementById(this.id),);

            window.addEventListener("resize", function () {
                _this.myMap.resize();
            });
            this.setOption()
        },
        setOption() {
            const _this = this
            let option = {
                color: [
                    "#F5F9ED",
                    "transparent",
                    ..._this.color,
                    "transparent",
                ],
                grid: {
                    top: "0px",
                    left: "0px",
                    right: "0px",
                    bottom: "0px"
                },
                series: [
                    {
                    	// 内圆
                        name: '总',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '70%'],
                        center: ["0", "50%"],
                        label: {
                            position: 'inner',
                            fontSize: 14,
                            color: '#000000',
                            formatter: ` {b} \n {c}`,
                            position: 'center',
                            padding: [0, 0, 0, 40],
                            fontWeight: 'bold'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                             // 要显示的内半圆部分
                            { value: _this.mapData.total, name: '总' },
                            // 隐藏掉的内半圆
                            {
                                value: 1,
                                name: "",
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 0,
                                        shadowBlur: 0,
                                        borderColor: "transparent",
                                        shadowColor: "transparent",
                                    },
                                },
                            },
                        ]
                    },
                    // 外圆环
                    {
                        name: '占比',
                        type: "pie",
                        radius: ["85%", "140%"],
                        avoidLabelOverlap: false,
                        startAngle: 90, // 角度
                        center: ["0", "50%"],
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 88,
                            },
                        },
                        label: {
                            show: false
                        },
                        data: [
                            // 要显示的外半圆数据
                            ...this.mapData.data,
                            // 隐藏的外半圆数据
                            {
                                value: this.mapData.total, // total是要展示的半圆数据的总和，以达到显示和隐藏比例各占50%
                                name: "其他",
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 0,
                                        shadowBlur: 0,
                                        borderColor: "transparent",
                                        shadowColor: "transparent",
                                    },
                                },
                            },
                        ],
                    },
                ],
            };

            this.myMap.setOption(option);

        }
    }
}
</script>

<style scoped lang='scss'>
.cirle-pie {
    display: flex;
}

.legend-ul {
    width: 50%;

    .legend-li {
        line-height: 34px;
        font-size: 24px;
        color: #333333;
        font-weight: 500;
    }

    .li-name {
        margin-bottom: 0;
    }

    .li-num {
        .point {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 16px;
        }
    }
}
</style>