<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>