<template>
  <div>
    <div className="carTypeTime">
      <canvas style="width: 40px;height: 40px"  className="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>
      <!--                <image v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>-->
    </div>
  </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";

var uChartsInstance = {};
export default {
  name: "carTypeTime",
  components: {Analyse, NoData},
  data() {
    return {

    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  onReady(){
    console.log('data',this.data)
    this.handleCarData(this.data)
  },
  methods: {
    //点击事件
    handleTap(e) {
      uChartsInstance[e.target.id].showToolTip(e, {
        formatter: (item, category, index, opts) => {

        }
      });
      uChartsInstance[e.target.id].touchLegend(e);
    },
    // 处理传入的数据
    handleCarData(value) {
      console.log('value',value)
      setTimeout(() => {
        let res = {
          series:[{data:value}]
        }
        this.drawCharts('carTypeTime', res)
      },500)
    },
    drawCharts(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "ring",
        context: ctx,
        width: '40px',
        height: '40px',
        series: data.series,
        animation: true,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: false,
          position: "right",
          lineHeight: 25
        },
        extra: {
          ring: {
            ringWidth: 10,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 5,
            border: false,
            borderWidth: 1,
            borderColor: "#FFFFFF"
          }
        }
      });
    },

  }
}
</script>

<style scoped lang="scss">
.carTypeTime {
  width: 40px;
  height: 40px;
  .canvas {
    width: 40px;
    height: 40px;
  }
}
</style>
