// components/safety-pie-chart/index.js
import * as echarts from '../../ec-canvas/echarts'

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        data:{
            type: Array
        },
        height:{
            type: Number
        }

    },
    observers: {
        data: function (val) {
            this.initChart() 
            this.setData({
                chartData:val
            })
           
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart:undefined,
        chartData:[]
    },
    lifetimes: {
        created: function(){
        //在组件实例刚刚被创建时执行，注意此时不能调用 setData
        },
        attached: function () {
            //在组件实例进入页面节点树时执行
           
        },
        ready: function () {
            // 在组件在视图层布局完成后执行
            this.initChart();
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        
    },
    /**
     * 组件的方法列表
     */
    methods: {
        initChart(){
            var id ='#' +  this.data.chartId;
            this.component = this.selectComponent(id);
            if(this.component){
                this.component.init((canvas, width, height, dpr) => {
                    let chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: dpr
                    })
                    chart.setOption(this.getData());
                    return chart;
                })
            }
            
        },
        getData() {
            var data = this.data.chartData
            console.log(data)
            var yData_1 = []
            var yData_2 = []
            var xData = []
            var legend = ['设计量','应耗量']
            var unit = '单位：m³'

            data.forEach(item =>{
                yData_1.push(item.sjQuantity)
                yData_2.push(item.yesMonitor)
                xData.push(item.name)
            })
            var option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true,
                        },
                    },
                },
                grid:{
                    left: "15%",
                    top: "25%",
                    right: "5%",
                    bottom: "12%",
                },
                legend: {
                    data: legend,
                    right: 10,
                    top: 12,
                    textStyle: {
                      color: "#fff",
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                  },
                xAxis: {
                    data: xData,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#2f4472",
                            width: 1,
                        },
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#cbdaff", //X轴文字颜色
                            fontSize: 12,
                        },
                        interval: 0,

                    },
                },
                yAxis: {
                    name:unit,
                    nameTextStyle: {		//Y轴那么的样式
                        color: '#42d0ff',
                        fontSize: 12,
                    },
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#cbdaff",
                        },
                        formatter: "{value}",
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#2f4472",
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#2f4472",
                        },
                    },
                },
                series: [
                    {
                        name: legend[0],
                        type: "bar",
                        barWidth: 8,
                        barGap: 2,
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                color:"#fff"
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(64,124,254,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(64,124,254,0.2)",
                                    },
                                ]),
                            },
                        },
                        data: yData_1,
                    },
                    {
                        name: legend[1],
                        type: "bar",
                        barWidth: 8,
                        barGap: 2,
                        label: {
                            normal: {
                                show: true,
                                position: "inside",
                                color:"#fff"
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(25,210,204,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(25,210,204,0.2)",
                                    },
                                ]),
                            },
                        },
                        data: yData_2,
                    },

                ],
            };

            return option;
        }
    }
})