/**
 * 顶部header
 */
Vue.component("environment-line-chart", {
    template: `
       <div :style="{'height': height+'px'}" ref="chart">
 
            </div>
    `,
    props: {
        height:{
            type:Number
        },
        data:{
            type:Array
        }
    },
    data() {
        return {

        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        getChartData(){
            //品类金额占比 饼图
            var myChart = echarts.init(this.$refs.chart);
            this.echartPie(myChart,this.data)
        },
        echartPie(myChart,datas){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {

                var data = datas[0]

                var unit = ''
                if(data.unit){
                    unit = '单位：'+data.unit
                }

                this.option = {
                    color : data.color,
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                                color: "#57617B",
                            },
                        },
                    },
                    grid: {
                        top:'15%',
                        left: "25",
                        right: "3%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: data.text,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#25597e",
                                type: "dashed",
                            },
                        },
                        axisTick: {
                            show: false
                        },

                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize:16
                            },
                        },
                    },
                    yAxis: {
                        name:unit,
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                        type: "value",
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: false,
                            lineStyle: {
                                color: "#c5d9fc",
                                type: "dashed",
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize:16
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#25597e",
                                type: "dashed",
                            },
                        },
                    },
                    series: [
                        {
                            type: "line",
                            smooth: true,
                            symbol: "circle",
                            symbolSize: 5,
                            showSymbol: true,
                            lineStyle: {
                                normal: {
                                    width: 2,
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(0,142,252, 0.3)",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(0,142,252, 0)",
                                            },
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)",
                                    shadowBlur: 10,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: "rgb(0,142,252)",
                                    borderColor: "rgba(0,142,252,0.27)",
                                    borderWidth: 12,
                                },
                            },
                            data: data.data,
                        },
                    ]
                };
                myChart.setOption(this.option,true);
                window.onresize = myChart.resize;
            })
        },
    },
    watch:{
        data: function (val, oldVal){
            this.init()
        }
    }

})