// pages/components/curve-echarts/index.js
import * as echarts from '../../../ec-canvas/echarts'
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        chartData:{
            type: Object
        },
        height:{
            type:String
        }
    },
    observers: {
        chartData: function (val) {
            this.initChart() 
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart:undefined,
    },
    lifetimes: {
        created: function(){
        //在组件实例刚刚被创建时执行，注意此时不能调用 setData
        },
        attached: function () {
            //在组件实例进入页面节点树时执行
           
        },
        ready: function () {
            // 在组件在视图层布局完成后执行
          
            this.initChart();
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        
    },

    /**
     * 组件的方法列表
     */
    methods: {
        initChart(){
            var id ='#' +  this.data.chartId;
            this.component = this.selectComponent(id);
            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() {
            let that=this
            var data = this.data.chartData
            var legend={}
            var xAxis={}
            var series=[]
            if(data.lineData != undefined) {
                for(let i=0;i<data.lineData.length;i++) {
                    series.push({
                        name: data.legend[i] ,
                        type: 'line',
                        smooth: true ,// 将折线图变为波浪线图展示
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 2,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: data.color[i],
                                borderWidth: 5,
                            },
                        },
                        data: data.lineData[i]
                    })
                }
            }
            var unit = ''
            if(data.unit){
                unit = '单位：'+data.unit
            }
            var option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    lineStyle: {
                        color: "#ccc",
                    },
                  },
                },
                legend: {
                    // type: 'plain', // 设置为plain
                    icon:'rect',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 6,
                    data: data.legend,
                    top: -5,
                        textStyle: {
                            fontSize: 10,
                            color: "#6d82bd",
                        },
                },
                grid: {
                    // top: '10%', // 可以设置为百分比或像素值
                    bottom: '40%',
                    left: '18%',
                    // right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: data.date,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: false,
                        lineStyle: {
                            color: "#23283e",
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        color: '#6d82bd', 
                        rotate: 60, // 旋转角度
                        margin: 5 // 偏移量
                    }
                },
                yAxis: {
                    name: unit, // 设置y轴的单位
                    type: "value",
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: false,
                        lineStyle: {
                            color: "#23283e",
                            type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#008ffd', // y轴文字颜色为蓝色
                    },
                    nameTextStyle: {
                        fontSize: 10, // 设置单位文字的大小
                        fontWeight: 'bold', // 设置单位文字的粗细
                        color:'#fff'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#3d414e",
                            type: "solid",
                        },
                    },
                
                },
                series,
              };
            return option;
        }
    }
})