同页面多个echarts饼图组件封装

 

同页面使用多个echarts饼图，封装成一个组件公用。

饼图组件

<!--echarts饼图组件-->
<template>
    <div class="echartsCommon">
        <div style="width: 100%; height: 100%" :id="id" class="echarts" ref="echarts"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'echartsCommon',
    data() {
        return {
            arr: []
        }
    },
    // id --> 为了多图渲染
    // chartData --> value数组
    // nameData --> name数组
    props: ['id','chartData', 'nameData'],
    created() {
        this.initData();
    },
    mounted() {
        this.drawCharts();
    },
    watch: {
        //子组件监听父组件数据实时更新
        chartData: {
            handler(newValue, oldValue) {
                this.arr.length = 0;
                this.initData();
                this.drawCharts();
            },
            deep: true
        }
    },
    methods: {
        drawCharts() {
            var myChart = echarts.init(document.getElementById(this.id));
            myChart.setOption({
                title: {
                    text: this.title,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    icon: "rect",
                    itemWidth: 10,
                    itemHeight: 10,
                    left: '1%',
                    top: '5%',
                    data: this.nameData
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '40%',
                        center: ['50%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                                show: true,
                                position: 'left'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            show: true, 
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            normal: {
                                show: true
                            }
                        },
                        data: this.arr
                    }
                ]
            })
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        },
        initData() {
             this.nameData.forEach((val, i) => {
                 this.chartData.forEach((item, index) => {
                     if (i == index) {
                        this.arr.push({
                            value: item,
                            name: val
                        })
                     }
                 })
             })
        }
    }
}
</script>
<style lang="less" scoped>

</style>

　　

父组件

<div class="project">
   <div class="title">项目应用信息</div>
   <div class="echarts-box">
        <echartsCommon id="echarts4" v-if="msg.chartData4.length > 0" :chartData="msg.chartData4"  :nameData="msg.rows4" autoresize ></echartsCommon>
        <echartsCommon id="echarts5" v-if="msg.chartData5.length > 0" :chartData="msg.chartData5"  :nameData="msg.rows5" autoresize ></echartsCommon>
        <echartsCommon id="echarts6" v-if="msg.chartData6.length > 0" :chartData="msg.chartData6"  :nameData="msg.rows6" autoresize ></echartsCommon>
    </div>
</div>

　　

import echartsCommon from '@/components/echartsCommon';
import homeTaskList from './homeTaskList';
import homeInformationList from './homeInformationList';
import homeNegativeList from './homeNegativeList';
import homeMaintainList from './homeMaintainList';
export default {
     components: {
        echartsCommon,
        homeTaskList,
        homeInformationList,
        homeNegativeList,
        homeMaintainList
     },
     data() {
         return {
             msg: {
                rows1: [],
                rows2: [],
                rows3: [],
                rows4: [],
                rows5: [],
                rows6: [],
                chartData1: [],
                chartData2: [],
                chartData3: [],
                chartData4: [],
                chartData5: [],
                chartData6: [],
            },
         }
     },
     methods: {
        //人员分类统计民族
        getPersonNation() {
            this.$http({
                method: 'get',
                url: this.$api.displayBoard.personNation
            }).then((res) => {
                let _name = [], _value = [];
                res.forEach(item => {
                    _name.push(item.name);
                    _value.push(item.value);
                })
                this.msg.chartData1 = _value;
                this.msg.rows1 = _name;
                console.log(this.msg.chartData1, '人员分类统计民族', this.msg.rows1)
            })
        },
        ... 其他的以此类推
     }
}