// pages/components/curve-echarts/index.js
import * as echarts from '../../../ec-canvas/echarts'
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        chartData:{
            type: Array
        },
        height:{
            type:String
        },
        title:{
          type:String
        },
        color:{
          type:Array
        }
    },
    observers: {
        chartData: function (val) {
            console.log(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=[]
            console.log(data);
            for(let i=0;i<data.length;i++){
                console.log(data[i].name);
                console.log(data[i].biaoyangX);
                console.log(data[i].biaoyangY);
                series.push({
                    name: data[i].name ,
                    type: 'line',
                    smooth: true ,// 将折线图变为波浪线图展示
                    data: data[i].biaoyangY,
                })
            }
            var option = {
                // title: {
                //   text: '城市天气温度',
                // },
                tooltip: {
                  trigger: 'axis',
                },
                //color:this.data.color,
                legend: {
                    // type: 'plain', // 设置为plain
                    icon:'roundRect',
                    itemWidth: 10,
                    itemHeight: 10,
                    orient: 'horizontal', // 设置为水平展示
                    // x: 'center', // 设置水平方向的位置
                    data: data.map(item=>item.name),
                    textStyle: {
                        fontSize: 10, // 设置字体大小为16px
                        color:'#fff'
                  }
                },
                grid: {
                    // top: '10%', // 可以设置为百分比或像素值
                    bottom: '30%',
                    left: '15%',
                    // right: '10%'
                },
                xAxis:{
                    //   type: 'category',
                      data: data[0].biaoyangX,
                      axisLabel: {
                        color: '#fff', // y轴文字颜色为白色
                        rotate: 60, // 旋转角度
                        margin: 10, // 偏移量
                        fontSize: 10
                    }
                },
                yAxis: {
                    name: this.data.title, // 设置y轴的单位
                    nameTextStyle: {
                        fontSize: 10, // 设置单位文字的大小
                        fontWeight: 'bold', // 设置单位文字的粗细
                        color:'#fff'
                    },
                  type: 'value',
                  axisLabel: {
                    color: '#fff' // y轴文字颜色为白色
                }
                },
                series,
              };
            return option;
        }
    }
})