echars 饼图 --》二次封装

<template>
    <!-- 饼状图
       1. 调用页面引入
                    import EcharsPie from '@/components/echarsPie.vue';
                    注:自定义的组件名称 不要使用关键字
                    components: {EcharsPie}
       2. 调用页面入参:
            <EcharsPie :dataList = "valObj"></EcharsPie>
              valObj: {
                    title: "图表的标题名称",
                    tooltip: " 这是提示信息",
                    width: 400,
                    height: 300,
                    color: ["#1EAB8F", "#22D2FD", "#FFC000", "#828DA2", "#FF6023", "#0576FE"], //颜色 数组
                    seriesName: "设备状态",
                    yData: [
                        { value: 20, name: "未知", dic_code: "0" },
                        { value: 10, name: "工作", dic_code: "1" },
                        { value: 90, name: "待机", dic_code: "2" },
                        { value: 0, name: "停机", dic_code: "3" },
                        { value: 0, name: "故障", dic_code: "4" },
                        { value: 0, name: "调试", dic_code: "5" }
                    ],
                    legendList:{
                        itemGap: 16, // 设置legend的间距
                        itemWidth: 30,// 设置宽度
                        itemHeight: 14, // 设置高度
                        orient: "vertical", //垂直显示还是水平显示
                        right: 0, //legend相对位置
                        bottom: 30,//legend相对位置
                        textStyle: { fontSize: "14" },//legend字体大小
                        data: ["未知", "工作", "待机", "停机", "故障", "调试"], // 数据
                    },
                    seriesStyle:{
                        lableShow:true,//是否出现提示文字
                        lableFontSize:14,//提示文字大小
                        lableLineShow:true,//是否出现提示线
                        lableLineLength:35,//提示线的长度
                        radius: "60%", //饼图的半径     若为数组,第一项是内半径，第二项是外半径。例['50%', '70%']
                        center: ["50%", "60%"], //中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。饼图相对中心的位置
                    }
                }
    -->
    <div class="echart_box_pie">
        <div class="echart_tit" v-show="dataList.title">{{dataList.title}}
            <el-tooltip placement="bottom-start" effect="light" v-show="dataList.tooltip">
                <div slot="content" v-html="dataList.tooltip">
                </div>
                <i class="el-icon-question"></i>
            </el-tooltip>
        </div>
        <div class="echart_pie" :style="{width:dataList.width+'px',height:dataList.height+'px'}" id="echart_pie"></div>
    </div>
</template>

<script>
export default {
    props: {
        dataList: {
            type: Object,
            default: function() {
                return {
                    width: 1400, //地图宽
                    height: 800 //地图高
                };
            }
        }
    },
    data() {
        return {};
    },
    mounted() {
        this.initEcharsPie();
    },
    methods: {
        //初始化echars柱状图,
        initEcharsPie() {
            var _this = this;
           let myChart = this.$echarts.init(document.getElementById("echart_pie"));
            myChart.clear();
            // 绘制图表样式
            let option = {
                title: {
                    text: ""
                },
                color: this.dataList.color, //饼状图颜色数组
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: this.dataList.legendList,
                series: [
                    {
                        name: this.dataList.seriesName,
                        type: "pie",
                        radius: this.dataList.seriesStyle.radius,
                        center: this.dataList.seriesStyle.center,
                        data: this.dataList.yData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            },
                            normal: {
                                label: {
                                    //此处为指示线文字设置
                                    show: this.dataList.seriesStyle.labelShow,
                                    formatter: "{d}%\n{b}",
                                    fontWeight: "normal",
                                    fontSize: this.dataList.seriesStyle.lableFontSize
                                },
                                labelLine: {
                                    //指示线状态
                                    show: this.dataList.seriesStyle.lableLineShow,
                                    length: this.dataList.seriesStyle.lableLineLength
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>
.echart_box_pie {
    margin: 4px;
    position: relative;
    z-index: 1;
}
.echart_tit {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 14px;
    box-sizing: border-box;
}
</style>