import * as echarts from './../../ec-canvas/echarts';
function initChart(canvas: any, width: any, height: any, data: any, dpr: any) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 4,
      itemStyle: {
        color: data.numColor,//指针和走过的轨道颜色
        shadowColor: 'rgba(0,138,255,0.45)',
        // shadowBlur: 10,
        // shadowOffsetX: 2,
        // shadowOffsetY: 2
      },
      splitLine: {
        show: true,
        distance: 5,//分割线（大刻度的位置）
      },
      axisTick: {
        distance: 5,//小刻度的位置
      },
      progress: {//进度条
        show: true,
        roundCap: true,
        width: 9
      },
      axisLabel: {//隐藏刻度
        show: false,
      },
      name: '业务指标',
      detail: {
        formatter: function (value: any) {
          // console.log(value,'----value')
          return value + data.dataList[0].unit;
        },
        fontSize: 14,
      },
      axisLine: {
        show: true
      },
      title: { //传入的文字
        show: true,
        offsetCenter: [0, "65%"],
        fontSize: 14,
        color: "#323241"
      },
      pointer: {
        showAbove: true,
        width: 4
      },
      center: ["50%", "50%"],
      data: data.dataList,
      radius: "95%"

    }]
  };
  chart.setOption(option, true);
  return chart;
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    echartData: {
      type: Object,
      value: () => { }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // lazyLoad: true, // 延迟加载
      onInit: initChart
    },
  },
  // observers: {
  //   'dashObj': function (val: any) {
  //     console.log(val, 'dashObjdashObjdashObj')
  //     this.setData({ //重新setData渲染canvas
  //       ec: {
  //         onInit: initChart
  //       }
  //     })
  //   }
  // },

  /**
   * 组件的方法列表
   */
  methods: {
    // initChart() {
    //   this[this.data.chartLineId].init((canvas, width, height, dpr) => {
    //     const chart = echarts.init(canvas, null, {
    //       width: width,
    //       height: height,
    //       devicePixelRatio: dpr // new
    //     })
    //     chart.setOption(this.data.options)
    //     return chart
    //   })
    // }
  },
  lifetimes: {
    ready() {
      // this[this.data.chartLineId] = this.selectComponent('#' + this.data.chartLineId);
      // this.isshow?this.initChart():''  // 因为自己项目有在弹框里面展示echarts的，有页面加载直接展示的，所以这里有区分。
    },
    detached() {
      // this[this.data.chartLineId] = null
      // this[this.data.canvasId] = null
    },
  },

  ready: function () {
    console.log(this.data, '----------data----------')
  },

})