<template>
    <div id="echart" style="width: 100%" ref="fg6" v-loading="isLoading"></div>
</template>
<script>
export default {
    watch: {
        faMsg1: {
            handler(val) {
                this.edata = this.faMsg1
                //console.log(this.faMsg1, "jjjihhuy");
                this.province()
            }
        }
    },

    props: ['faMsg1'],
    data() {
        return {
            edata: [],
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading: false,
            type: {},
            deptId: ''
        }
    },
    created() {},
    mounted() {
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
    },
    methods: {
        //echarts图
        async province() {
            this.isLoading = true

            let xData = []
            let seriesData1 = []
            const data = this.edata
            data.forEach(item => {
                xData.push(item.manufactureId)
                seriesData1.push(item.devCount)
            })
            // console.log(data);
            let echarts = require('echarts')
            let domID1 = document.getElementById('echart')
            setTimeout(() => {
                ;(domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') / 2 - 40 + 'px')
            }, 0)
            let myChart = echarts.init(domID1)
            this.isLoading = false
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                color: echartsColor.FigureColor,
                title: {
                    text: '厂家装置数量统计',
                    top: 20,
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                    //
                    //   top: 5,
                },
                // title:{
                //     text: '主网运行指标',
                //     left: "1%",
                //   //   top: 5,
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0,
                    textStyle: {
                        align: 'left',
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    }
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    top: '60',
                    bottom: '3%',
                    containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     // dataView: { show: true, readOnly: false },
                //     // magicType: { show: true, type: ["line", "bar"] },
                //     // //restore: { show: true },
                //     saveAsImage: { show: true },
                //   },
                // },
                legend: {
                    data: ['在运终端数量'],
                    //icon: 'rect',
                    right: 40,
                    top: 20,
                    itemGap: 28,
                    itemWidth: 16,
                    itemHeight: 16,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                xAxis: [
                    {
                        //   name: '电压等级\n(监测点数)',// 给X轴加单位
                        type: 'category',
                        data: xData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        itemStyle: {
                            barWidth: '30'
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '(台)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 浣跨敤娣辨祬鐨勯棿闅旇壊
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        }
                    }
                ],
                series: [
                    {
                        name: '在运终端数量',
                        barMaxWidth: '30px',
                        type: 'bar',
                        data: seriesData1
                    }
                ]
            }
            myChart.setOption(option)
            window.echartsArr.push(myChart)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg6, element => {
                _this.$nextTick(() => {
                    myChart.resize()
                })
            })
            window.onresize = function () {
                myChart.resize()
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../../styles/comStyle.less');
</style>
