<template>
	<view class="self-ucharts"><canvas canvas-id="shopecharts" id="shopecharts" class="shopecharts"></canvas></view>
</template>

<script>
import uCharts from '../../js_sdk/u-charts/u-charts/u-charts'

let _self
export default {
  name: 'self-ucharts',

  props: {
    series: {
      type: Array,
      default: () => null
    },
    datas: {
      type: Object,
      default: () => null
    },
    type: {
      type: String,
      default: 'pie'
    }
  },
  watch: {
    datas (n, o) {
      this.shopLine()
    },
    series (n, o) {
      this.showPie()
    }
  },
  data () {
    return {
      pixelRatio: 1,
      bWidth: '',
      bHeight: '',
      cWidth: '',
      cHeight: ''
    }
  },
  mounted () {
    this.bWidth = uni.upx2px(690)
    this.bHeight = uni.upx2px(500)
    this.cWidth = uni.upx2px(690)
    this.cHeight = uni.upx2px(300)
    if (this.type === 'pie') {
      this.showPie()
    } else {
      this.shopLine()
    }
  },
  methods: {
    showPie () {
      const _self = this
      if (_self.series === null) {
        return
      }
      const canvasId = 'shopecharts'
      const series = _self.series
      new uCharts({
        $this: _self,
        colors: ['#FFBC3C', '#F25051', '#FE7DDE', '#4880FF', '#47EDFB'],
        canvasId,
        type: 'pie',
        fontSize: 12,
        legend: {
          show: true,
          position: 'top',
          float: 'left',
          itemGap: 10,
          padding: 5,
          lineHeight: 20,
          margin: 5,
          borderWidth: 1
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        series,
        animation: false,
        width: _self.bWidth * _self.pixelRatio,
        height: _self.bHeight * _self.pixelRatio,
        dataLabel: true,
        extra: {
          pie: {
            type: 'area',
            minRadius: 200,
            activeOpacity: 0.5,
            offsetAngle: 0,
            lableWidth: 15
          }
        }
      })

      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            // 将图表转成图片
            x: 0,
            y: 0,
            width: _self.bWidth * _self.pixelRatio,
            height: _self.bHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId,
            success: function (res) {},
            fail: function (res) {}
          },
          _self
        )
      }, 1000)
    },
    shopLine () {
      const _self = this
      if (_self.datas === null) {
        return
      }
      const canvasId = 'shopecharts'
      const series = _self.datas
      console.log(JSON.stringify(series))
      new uCharts({
        $this: this,
        canvasId,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false
        },
        dataLabel: true,
        duration: 500,
        dataPointShape: false, // 折点
        animation: false,
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: series.xdata, // x轴数据
        series: [
          {
            textColor: '#ffcc01',
            color: '#ffcc01',
            data: series.jrdata,
            name: '今日',
            pointShape: 'circle',
            show: true,
            type: 'line'
          },
          {
            color: '#7d66f3',
            textColor: '#7d66f3',
            data: series.zrdata,
            name: '昨日',
            pointShape: 'circle',
            show: true,
            type: 'line'
          }
        ], // 值
        xAxis: {
          type: 'grid',
          disableGrid: true,
          labelCount: 7
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#cccccc',
          min: 0,
          max: 180,
          data: [
            {
              axisLine: false,
              format: val => {
                return val.toFixed(0)
              }
            }
          ]
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15, 15, 4, 15],
        extra: {
          line: {
            type: 'curve' // 平滑曲线； straight直线
          }
        }
      })

      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            // 将图表转成图片
            x: 0,
            y: 0,
            width: _self.cWidth * _self.pixelRatio,
            height: _self.cHeight * _self.pixelRatio,
            fileType: 'png',
            canvasId: canvasId,
            success: function (res) {},
            fail: function (res) {}
          },
          _self
        )
      }, 1000)
    }
  }
}
</script>

<style>
.self-ucharts .shopecharts {
	width: 690upx;
	height: 550upx;
}
</style>
