echarts饼图案例

1. 效果图
   
2. vue饼图组件

<template>
    <div id="pie"></div>
</template>

<script>
    import echarts from "echarts";
    import "echarts/lib/chart/pie";
    import "echarts/lib/chart/line";
    import "echarts/lib/chart/bar";
    import "echarts/lib/chart/map";
    import "echarts/lib/chart/effectScatter";
    import "echarts/lib/chart/scatter";
    import "echarts/lib/chart/lines";
    import "echarts/lib/chart/pictorialBar";
    import "echarts/lib/component/markPoint";
    import "echarts/lib/component/geo";
    export default {
        name: "myPie",
        props:{
            pieData:{
                type:Array,
                required:true//必须
            }
        },
        data() {
            return {};
        },
        mounted() {
            this.pie = echarts.init(document.getElementById("pie"));
            this.initPie();
        },
        methods:{
            initPie(){
                let data = this.pieData;
                console.log('饼图数据',data);
                let legendData = [];
                data.forEach(item=>{
                    legendData.push(item.name);
                });
                const option = {
                    color: ['#36A7FE', '#FB765E','#3652e6','#4ea3fa','#19dbff','#ffd12b','#fca800','#fa785f','#c654df','#01ce8d','#ffa922','#46D44F','#76DCCE'],
                    title: {
                        text:'各景点客流占比',
                        x: "25",
                        y: "10",
                        textStyle: {
                            fontWeight: "700",
                            fontSize: 20,
                            color: "#444",
                        },
                    },
                    legend: {
                        data: legendData,
                        orient: 'horizontal',
                        bottom: 0,
                        icon: 'circle',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (val) {
                            return `<div style="text-align:left; position:relative">${val.name}</div>
          <span style="display:inline-block; width:10px;height:10px;background:
            ${val.color};margin:0 10px 0 0; border-radius:3px">  </span>
             ${val.value}人次 （${val.percent}%）`
                        },
                        // formatter: '{b} <br/>{c} 人次({d}%)',
                        textStyle: {
                            fontSize: 16,
                            color: '#666'
                        },
                        backgroundColor: '#f1f1f1',
                        borderColor: '#f2f2f2',
                        borderWidth: 1,
                        borderRadius: 5,
                        padding: [10, 20, 10, 20]//上右下左
                    },
                    series: [
                        {
                            // name: '各景点客流占比',
                            name:'',
                            type: 'pie',
                            radius: ['50%', '65%'],
                            hoverOffset: 30,
                            // avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '25',
                                    formatter: '{b}:{d}%',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            center: ['50%', '50%'],
                            data: data
                        }
                    ]
                };
                this.pie.setOption(option);
            }
        }
    }
</script>

<style scoped>
</style>

3. 页面引用

<my-pie :key="myPie" style="height: 500px;" :pieData="pieData"></my-pie>

import MyPie from "../components/echarts/myPie";
export default {
    components: { MyPie},
  data () {
    return {
        myPie:1,
        pieData: [
        {name:'景点1',value:200},
        {name:'景点2',value:300},
        {name:'景点3',value:400},
        {name:'景点4',value:500},
        {name:'景点5',value:600},
        {name:'景点6',value:700},
        {name:'景点7',value:800}
        ]
      }
  }
}