import * as echarts from "echarts";
export default {
    data(){
        return {
            getChartData:[]
        }
    },
    components:{

    },
    methods:{
        getPackageData2(gridData){
            this.getChartData = [];
            for(let i=0;i<gridData.length;i++){
                this.getChartData.push({product:gridData[i].wpName,'限电损失电量单位:万KWh':gridData[i].xdss,
                '故障损失电量单位:万KWh':gridData[i].gzss,'检修损失电量单位:万KWh':gridData[i].jxssl,
                '性能损失电量单位:万KWh':gridData[i].xnssl,'受累损失电量单位:万KWh':gridData[i].slss})
            }
            this.getChartDataImport();
        },
        getChartDataImport(){
            var charts =echarts.init(document.getElementById("chartHistogram"));
            let option = {
            title: {
                text: '损失电量分析',
                left: 'center'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            tooltip: {},
            dataset: {
                 dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
                 source: this.getChartData
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {
                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#D201D8'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#FD0100'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#FF7B16'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#8085E9'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#A6A6A6'
                        }
                    }
                },
                
            ]
        };
        charts.setOption(option);
        }
    },
}