echarts饼图的配置 封装组件的注意点

Posted 2020-12-13 iwishicould

1==>tooltip 类似饰hover效果提示框组件。光标放上去会触发

2==>formatter   // 饼图 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

3==>itemStyle 饼图各个部分之间的间隔

4==>legend通常是是解释说明每一个部分的

如果将echarts封装成了一个组件，那么你需要注意的事，
数据可能时有的，但是echarts图像没有显示出来，这个问题怎么解决：
原因：当进行dom渲染的时候，数据还没有回来。因为没有显示
解决办法：在watch中去调用初始化的方法，数据数据变化的时候，就去调用，
这样就不会出现excharts显示不出来了这个现象
    watch: {
        mydata() {
            this.initEcharts();
            console.log(1);
        }
    },

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

 mounted() {
        this.initEcharts();
},

  methods: {
        initEcharts() {
            let demo = echarts.init(document.getElementById("demo"))
            var option = {

                // 类似饰hover效果提示框组件。
                // tooltip: {
                //     trigger: ‘item‘,
                //     formatter: ‘{a} <br/>{b}: {c} ({d}%)‘
                // },

                // 类似解释说名，
                // legend: {
                //     orient: ‘vertical‘,
                //     left: 10,
                //     data: [‘直接访问‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘搜索引擎‘]
                // },
                series: [
                    {
                        type: ‘pie‘,
                        radius: [‘50%‘, ‘70%‘],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: ‘center‘,

                        },

                        emphasis: {
                            label: {
                                show: true,
                                fontSize: ‘30‘,
                                fontWeight: ‘bold‘,
                                formatter: ‘{b} {d}%‘, //中间显示百分比
                                // 饼图 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                            }
                        },

                        labelLine: {
                            show: false
                        },
                        //饼图每个板块之间有间隔
                        itemStyle: {
                            borderWidth: 2, //设置border的宽度有多大
                            borderColor: ‘#fff‘,//间隙颜色
                        },

                        data: [
                            { value: 10, name: ‘直接访问‘ },
                            { value: 20, name: ‘邮件营销‘ },
                            { value: 30, name: ‘联盟广告‘ },
                            { value: 40, name: ‘视频广告‘ },
                            { value: 100, name: ‘搜索引擎‘ }
                        ]
                    }
                ]
            };
            demo.setOption(option);

        }

    }
}

<style lang="scss" scoped>
#demo {
    width: 400px;
    height: 400px;
}
</style>