// 线图
import * as echarts from '../../ec-canvas/echarts';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    canvasId: {
      type: String,
      value: "mychart-dom-bar"
    },
    id: {
      type: String,
      value: "mychart-bar"
    },
    showLegend: {
      type: Boolean,
      value: true
    },
    list: {
      type: Array,
      value: [],
      observer: function (n, o) {
        if (!n || !n.length) return;
        if (this.chart) {
          const option = this.chart.getOption();
          option.series = n;
          this.chart.setOption(option);
        } else {
          this.setData({
            ec: {
              onInit: this.initChart.bind(this)
            }
          })
        }
      }
    },
    yType: {
      type: String,
      value: ""
    },
    xType: {
      type: String,
      value: ""
    }
  },
  chart: undefined,
  ready() {
    this.setData({
      ec: {
        onInit: this.initChart.bind(this)
      }
    })
  },

  // 销毁组件
  detached: function () {
    this.chart && this.chart.dispose && this.chart.dispose();
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: undefined,
      lazyload: true
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initChart: function (canvas, width, height, dpr) {
      this.chart && this.chart.dispose && this.chart.dispose();
      this.chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
      canvas.setChart(this.chart);

      // let colorList = ['9','a','b','c','d','e','f'], len = (this.data.list[0].data || []).length, colors = [];
      // for (let i = 0; i < len; i++) {
      //   let color = "#";
      //   for (let o = 0; o < 6; o++) {
      //     color += colorList[Math.floor(Math.random()*7)]          
      //   }
      //   colors.push(color);
      // }
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}{d}%',
          position: [0, "90%"],
          textStyle: {
            color: "#fff"
          },
        },
        legend: {
          show: this.data.showLegend,
          left: 'left',
          itemGap: 1,
          itemWidth: 4,
          itemHeight: 4,
          textStyle: {
            color: "#fff"
          }
        },
        color: ["#4992ff", "#38f385", "#f45c64", "#58e0f4", "#0da17c", "#fc7b2e", "#8339df", "#f467f9", "#fddd60"],
        // color: colors,
        series: this.data.list || []
      };
      this.chart.setOption(option);
      this.setData({
        show: true
      })
      return this.chart;
    },
  }
})