Vue组件封装饼图

组件封装的JS:chart-pie.js

//饼图
Vue.component("chart-pie", {
    template: '#chart-pie',
    props: {
        id: {
            type: String,
            default: 'pie'
        },
        data: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        setTimeout(this.initChart(), 100);
    },
    watch: {
        data: {
            handler(val, oldval) {
                this.initChart();
            },
            deep: true

        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id))
            /** 仪表盘所需数据*/
            var chartData = {
                data: this.data.datas,
                name: this.data.name,
                title: this.data.title,
                subtext: this.data.subtext
            }
            this.chart.setOption({
                title: {
                    //text: chartData.title,
                    //subtext: chartData.subtext,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    left: 'left',
                    show: false,
                },
                series: [
                    {
                        name: chartData.name,
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '50%'],
                        label: {
                            show: false,
                            formatter: '{b}: {d}%'
                        },
                        labelLine: {
                            show: false
                        },
                        data: chartData.data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
            //this.chart.resize();
        }
    }
})




在页面需要显示的地方插入组件：<chart-pie :data="piedata"></chart-pie>

页面底部<script></script>内使用：定义图表显示模板（作为组件的一个包装）：

<script type="text/x-template" id="chart-pie">
        <div :id="id" style="width:150px;height:150px;"></div>
    </script>

定义Vue:
    <script>
        new Vue({
            el: '#vueDom',
            data: {
                dataintact: { name: "gauge", title: "数据完整性", value: "75.52", total: "100" },
                piedata: {
                    name: "饼图1",
                    id: "pie1",
                    title: "标题文字",
                    subtext: "副标题",
                    datas: [
                        { value: 2628, name: '整车工程中心' },
                        { value: 1797, name: '人力资源部' },
                        { value: 1399, name: '用户体验及功能开发中心' },
                        { value: 1241, name: '路特斯工程（中国）' },
                        { value: 1211, name: '吉利品牌研究院NL项目组' },
                        { value: 1198, name: 'PMA项目组' },
                        { value: 980, name: '创新中心' },
                        { value: 949, name: '电子电器开发中心' },
                        { value: 14557, name: '其他' }
                    ]
                }
            }
        })
        console.log(echarts.version);
    </script>