echarts 多级环状图（柱状图）

废话少说，直接上代码

安装echarts

npm i echarts --save

<template>
  <div class="about">
    <mulCircleCharts :chartData="MulChartData" height="500px" width="700px" />
  </div>
</template>
<script>
import mulCircleCharts from '@/components/mulCircleCharts.vue'
export default {
  components: {
    mulCircleCharts,
  },
  data() {
    return {
      MulChartData: {
        data: [
          { name: "零食", value: 50 },
          { name: "饮料", value: 15 },
          { name: "烟酒", value: 23 },
          { name: "餐饮", value: 150 },
          { name: "游戏", value: 50 },
          { name: "游玩", value: 78 },
          { name: "水电", value: 50 },
          { name: "话费", value: 50 },
          { name: "出行", value: 20 },
          { name: "购物", value: 200 },
          { name: "礼物", value: 600 },
          { name: "租房", value: 805 },
          { name: "押金", value: 805 },
        ],
      },
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

组件内容

<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
    props: {
        className: {
            type: String,
            default: "chart",
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "260px",
        },
        chartData: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            chart: null,
        };
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.setOptions(val);
            },
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, "macarons");
            this.setOptions(this.chartData);
        },
        setOptions({
            data
        } = {}) {
            this.chart.setOption({
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    top: 50,
                    containLabel: true,
                },
                legend:(function(){
                    let baseSet = {
                        show: true,
                        width: 60,
                        height: "50%",
                        type: "scroll",
                        right: 0,
                        top: 'middle',
                        orient: "vertical",
                        tooltip: {
                            show: true
                        },
                        textStyle: {
                            color: '#999',
                            width: 50,
                            overflow: 'truncate',
                            ellipsis: '...'
                        }
                    }
                    return baseSet
                })(),
                tooltip: {
                    formatter: '{a}:{c}'
                },
                polar: {
                    radius: [30, '90%']
                },
                angleAxis: {
                    max: function (value) {
                        return value.max + 20;
                    },//避免柱状图成为一个圈
                    startAngle: 90,//从正上方开始
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false,
                    }
                },
                radiusAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                series: (function () {
                    let baseSet = {
                        name: '',
                        type: 'bar',
                        data: [],
                        coordinateSystem: 'polar',
                    }
                    let arr = []
                    data.forEach(item => {
                        baseSet.name = item.name
                        baseSet.data = [item.value]
                        arr.push(JSON.parse(JSON.stringify(baseSet)))
                    });
                    return arr
                })()
            });
        },
    },
};
</script>

总结

本文主要是使用echarts中的柱状图实现的

效果图