ahyd_DIB/pages/nationalPage/components/entryCarNumber.vue

<template>
  <div class="entryCarNumber">
    <qiunDataCharts
        type="area"
        :opts="opts"
        :chartData="res"
        :animation="false"
        :canvas2d="true"
        :inScrollView="true"
        tooltipFormat="entryCarNumber"
    />



<!--    <canvas  class="entryCarNumber" canvas-id="entryCarNumber" id="entryCarNumber"  @tap="handleTap"/>-->
  </div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import qiunDataCharts
  from "./qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
  // 营收特征分析
  name: "entryCarNumber",
  components: {qiunDataCharts},
  data() {
    return {
      trendsPath:'',
      width:'',
      opts:{},
      res:{}
    }
  },
  props: {
    dataObj: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataObj: {
      handler(value) {
        this.trendsPath = ''
        this.handleCarData(value)
      },
      immediate: true,
      deep: true
    }
  },
  methods:{
    tooltip(item, category, index, opts){
      return 1111
    },
    handleTap(e){
      console.log('e',e)
      // uChartsInstance[e.target.id].showToolTip(e, {
      //   formatter: (item, category, index, opts) => {
      //     if (item.data){
      //       return item.name + ":" + this.$util.fmoney(item.data.value,2) + '万元';
      //     }else{
      //       return item.name + ":" + 0 + '万元';
      //     }
      //     // if (item.data){
      //     //   if (opts.series && opts.series.length>0){
      //     //     let text = ''
      //     //     opts.series.forEach(subItem=>{
      //     //       if (subItem.name===item.name){
      //     //         text= item.name + ":" + this.$util.noDecimal(subItem.real[index]) + '元';
      //     //       }
      //     //     })
      //     //     return text
      //     //   }
      //     // }else{
      //     //   return item.name + ":" + 0 + '元';
      //     // }
      //   },
      // });
      // uChartsInstance[e.target.id].touchLegend(e);
    },
    // 处理传入的数据
    handleCarData(value) {
      console.log('111',value)
      this.res = value
      let config  = {
        max:this.getSplitNumber(value.max)
      }
      this.opts = {
        categories: value.categories,
        series: value.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:4,
          data: [
            {
              min: 0,
              max:config.max
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      }
      // let res = {
      //   categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
      //   series: [
      //     {
      //       name: "2022年",
      //       data: [35,36,31,33,13,34,31,33,13,34]
      //     },
      //     {
      //       name: "2023年",
      //       data: [18,27,21,24,6,28,21,24,6,28]
      //     }
      //   ]
      // };

      // this.drawCharts('entryCarNumber', res,config)
    },
    getSplitNumber(value){
      if (value === 0 || value<5){
        let num = Math.ceil(Number(value))
        return num
      }else{
        let sum = Number(value) + Number(value) *0.2
        return  Number((Math.ceil(sum / 1000)).toFixed(0)) * 1000
      }
    },
    drawCharts(id, data,config) {
      const ctx = uni.createCanvasContext(id, this);
      let _this = this
      let phoneInfo = uni.getStorageSync('phoneInfo')
      this.width = phoneInfo.screenWidth - 56
      uChartsInstance[id] = new uCharts({
        type: "area",
        context: ctx,
        width: _this.width ,
        height: 213,
        categories: data.categories,
        series: data.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:4,
          data: [
            {
              min: 0,
              max:config.max
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      });
      setTimeout( ()=>{
        // this.canvasToTempImage('trends')
      },2000)
    },
  }
}
</script>

<style scoped  lang="scss">
.entryCarNumber{
  width: 100%;
  height: 200px;
  .entryCarNumber{
    width: 100%;
    height: 100%;
  }
}
</style>