uni-admin的统计表图报错了出不来

大概率是因为你升级了 qiun-data-charts 这个插件导致的，这个插件是第三方作者写的，他的新版本有问题，替换下
uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue内的代码

<!--  
 * qiun-data-charts 秋云高性能跨全端图表组件  
 * Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.  
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )  
 * 复制使用请保留本段注释，感谢支持开源！  
 * 为方便更多开发者使用，如有更好的建议请提交码云 Pull Requests ！  
 *  
 * uCharts®官方网站  
 * https://www.uCharts.cn  
 *  
 * 开源地址:  
 * https://gitee.com/uCharts/uCharts  
 *  
 * uni-app插件市场地址：  
 * http://ext.dcloud.net.cn/plugin?id=271  
 *  
 -->  
<template>  
  <view class="chartsview" :id="'ChartBoxId'+cid">  
    <view v-if="mixinDatacomLoading">  
      <!-- 自定义加载状态，请改这里 -->  
      <qiun-loading :loadingType="loadingType" />  
    </view>  
    <view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading">  
      <!-- 自定义错误提示，请改这里 -->  
      <qiun-error :errorMessage="errorMessage" />  
    </view>  
    <!-- APP和H5采用renderjs渲染图表 -->  
    <!-- #ifdef APP-VUE || H5 -->  
    <block v-if="echarts">  
      <view  
        :style="{ background: background }"  
        style="width: 100%;height: 100%;"  
        :data-directory="directory"  
        :id="'EC'+cid"  
        :prop="echartsOpts"  
        :change:prop="rdcharts.ecinit"  
        :resize="echartsResize"  
        :change:resize="rdcharts.ecresize"  
        v-show="showchart"  
      />  
    </block>  
    <block v-else>  
      <view  
        v-on:tap="rdcharts.tap"  
        v-on:mousemove="rdcharts.mouseMove"  
        v-on:mousedown="rdcharts.mouseDown"  
        v-on:mouseup="rdcharts.mouseUp"  
        v-on:touchstart="rdcharts.touchStart"  
        v-on:touchmove="rdcharts.touchMove"  
        v-on:touchend="rdcharts.touchEnd"  
        :id="'UC'+cid"  
        :prop="uchartsOpts"  
        :change:prop="rdcharts.ucinit"  
      >  
        <canvas  
          :id="cid"  
          :canvasId="cid"  
          :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
          :disable-scroll="disableScroll"  
          @error="_error"  
          v-show="showchart"  
        />  
      </view>  
    </block>  
    <!-- #endif -->  
    <!-- 支付宝小程序 -->  
    <!-- #ifdef MP-ALIPAY -->  
    <block v-if="ontouch">  
      <canvas  
        :id="cid"  
        :canvasId="cid"  
        :width="cWidth * pixel"  
        :height="cHeight * pixel"  
        :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
        :disable-scroll="disScroll"  
        @tap="_tap"  
        @touchstart="_touchStart"  
        @touchmove="_touchMove"  
        @touchend="_touchEnd"  
        @error="_error"  
        v-show="showchart"  
      />  
    </block>  
    <block v-if="!ontouch">  
      <canvas  
        :id="cid"  
        :canvasId="cid"  
        :width="cWidth * pixel"  
        :height="cHeight * pixel"  
        :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
        :disable-scroll="disScroll"  
        @tap="_tap"  
        @error="_error"  
        v-show="showchart"  
      />  
    </block>  
    <!-- #endif -->  
    <!-- 其他小程序通过vue渲染图表 -->  
    <!-- #ifdef MP-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN || MP-KUAISHOU || MP-LARK || MP-JD -->  
    <block v-if="type2d">  
      <view v-if="ontouch" @tap="_tap">  
        <canvas  
          :id="cid"  
          :canvasId="cid"  
          :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
          type="2d"  
          :disable-scroll="disScroll"  
          @touchstart="_touchStart"  
          @touchmove="_touchMove"  
          @touchend="_touchEnd"  
          @error="_error"  
          v-show="showchart"  
        />  
      </view>  
      <view v-if="!ontouch" @tap="_tap">  
        <canvas  
          :id="cid"  
          :canvasId="cid"  
          :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
          type="2d"  
          :disable-scroll="disScroll"  
          @error="_error"  
          v-show="showchart"  
        />  
      </view>  
    </block>  
    <block v-if="!type2d">  
      <view v-if="ontouch" @tap="_tap">  
        <canvas  
          :id="cid"  
          :canvasId="cid"  
          :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
          @touchstart="_touchStart"  
          @touchmove="_touchMove"  
          @touchend="_touchEnd"  
          :disable-scroll="disScroll"  
          @error="_error"  
          v-if="showchart"  
        />  
      </view>  
      <view v-if="!ontouch" >  
        <canvas  
          :id="cid"  
          :canvasId="cid"  
          :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"  
          :disable-scroll="disScroll"  
          @tap="_tap"  
          @error="_error"  
          v-if="showchart"  
        />  
      </view>  
    </block>  
    <!-- #endif -->  
  </view>  
</template>  

<script>  
import uCharts from '../../js_sdk/u-charts/u-charts.js';  
import cfu from '../../js_sdk/u-charts/config-ucharts.js';  
// #ifdef APP-VUE || H5  
import cfe from '../../js_sdk/u-charts/config-echarts.js';  
// #endif  

function deepCloneAssign(origin = {}, ...args) {  
  for (let i in args) {  
    for (let key in args[i]) {  
      if (args[i].hasOwnProperty(key)) {  
        origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];  
      }  
    }  
  }  
  return origin;  
}  

function formatterAssign(args,formatter) {  
  for (let key in args) {  
    if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){  
      formatterAssign(args[key],formatter)  
    }else if(key === 'format' && typeof args[key] === 'string'){  
      args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;  
    }  
  }  
  return args;  
}  

// 时间转换函数，为了匹配uniClinetDB读取出的时间与categories不同  
function getFormatDate(date) {  
    var seperator = "-";  
    var year = date.getFullYear();  
    var month = date.getMonth() + 1;  
    var strDate = date.getDate();  
    if (month >= 1 && month <= 9) {  
            month = "0" + month;  
    }  
    if (strDate >= 0 && strDate <= 9) {  
            strDate = "0" + strDate;  
    }  
    var currentdate = year + seperator + month + seperator + strDate;  
    return currentdate;  
}  

var lastMoveTime = null;  
/**  
 * 防抖  
 *  
 * @param { Function } fn 要执行的方法  
 * @param { Number } wait  防抖多少毫秒  
 *  
 * 在 vue 中使用（注意：不能使用箭头函数，否则this指向不对，并且不能再次封装如：  
 * move(){  // 错误调用方式  
 *   debounce(function () {  
 *   console.log(this.title);  
 * }, 1000)}）;  
 * 应该直接使用：// 正确调用方式  
 * move: debounce(function () {  
 *   console.log(this.title);  
 * }, 1000)  
 */  
function debounce(fn, wait) {  
  let timer = false;  
  return function() {  
    clearTimeout(timer);  
    timer && clearTimeout(timer);  
    timer = setTimeout(() => {  
      timer = false;  
      fn.apply(this, arguments); // 把参数传进去  
    }, wait);  
  };  
}  

export default {  
  name: 'qiun-data-charts',  
  mixins: [uniCloud.mixinDatacom],  
  props: {  
    type: {  
      type: String,  
      default: null  
    },  
    canvasId: {  
      type: String,  
      default: 'uchartsid'  
    },  
    canvas2d: {  
      type: Boolean,  
      default: false  
    },  
    background: {  
      type: String,  
      default: 'rgba(0,0,0,0)'  
    },  
    animation: {  
      type: Boolean,  
      default: true  
    },  
    chartData: {  
      type: Object,  
      default() {  
        return {  
          categories: [],  
          series: []  
        };  
      }  
    },  
    opts: {  
      type: Object,  
      default() {  
        return {};  
      }  
    },  
    eopts: {  
      type: Object,  
      default() {  
        return {};  
      }  
    },  
    loadingType: {  
      type: Number,  
      default: 2  
    },  
    errorShow: {  
      type: Boolean,  
      default: true  
    },  
    errorReload: {  
      type: Boolean,  
      default: true  
    },  
    errorMessage: {  
      type: String,  
      default: null  
    },  
    inScrollView: {  
      type: Boolean,  
      default: false  
    },  
    reshow: {  
      type: Boolean,  
      default: false  
    },  
    reload: {  
      type: Boolean,  
      default: false  
    },  
    disableScroll: {  
      type: Boolean,  
      default: false  
    },  
    optsWatch: {  
      type: Boolean,  
      default: true  
    },  
    onzoom: {  
      type: Boolean,  
      default: false  
    },  
    ontap: {  
      type: Boolean,  
      default: true  
    },  
    ontouch: {  
      type: Boolean,  
      default: false  
    },  
    onmouse: {  
      type: Boolean,  
      default: true  
    },  
    onmovetip: {  
      type: Boolean,  
      default: false  
    },  
    echartsH5: {  
      type: Boolean,  
      default: false  
    },  
    echartsApp: {  
      type: Boolean,  
      default: false  
    },  
    tooltipShow: {  
      type: Boolean,  
      default: true  
    },  
    tooltipFormat: {  
      type: String,  
      default: undefined  
    },  
    tooltipCustom: {  
      type: Object,  
      default: undefined  
    },  
    startDate: {  
      type: String,  
      default: undefined  
    },  
    endDate: {  
      type: String,  
      default: undefined  
    },  
    textEnum: {  
      type: Array,  
      default () {  
        return []  
      }  
    },  
    groupEnum: {  
      type: Array,  
      default () {  
        return []  
      }  
    },  
    pageScrollTop: {  
      type: Number,  
      default: 0  
    },  
    directory: {  
      type: String,  
      default: '/'  
    },  
    tapLegend: {  
      type: Boolean,  
      default: true  
    },  
    menus: {  
      type: Array,  
      default () {  
        return []  
      }  
    }  
  },  
  data() {  
    return {  
      cid: 'uchartsid',  
      inWx: false,  
      inAli: false,  
      inTt: false,  
      inBd: false,  
      inH5: false,  
      inApp: false,  
      inWin: false,  
      type2d: true,  
      disScroll: false,  
      openmouse: false,  
      pixel: 1,  
      cWidth: 375,  
      cHeight: 250,  
      showchart: false,  
      echarts: false,  
      echartsResize:{  
        state:false  
      },  
      uchartsOpts: {},  
      echartsOpts: {},  
      drawData:{},  
      lastDrawTime:null,  
    };  
  },  
  created(){  
    this.cid = this.canvasId  
    if (this.canvasId == 'uchartsid' || this.canvasId == '') {  
      let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'  
      let len = t.length  
      let id = ''  
      for (let i = 0; i < 32; i++) {  
        id += t.charAt(Math.floor(Math.random() * len))  
      }  
      this.cid = id  
    }  
    const systemInfo = uni.getSystemInfoSync()  
    if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){  
      this.inWin = true;  
    }  
    // #ifdef MP-WEIXIN  
    this.inWx = true;  
    if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {  
      this.type2d = false;  
    }else{  
      this.type2d = true;  
      this.pixel = systemInfo.pixelRatio;  
    }  
    // #endif  
    //非微信小程序端强制关闭canvas2d模式  
    // #ifndef MP-WEIXIN  
    this.type2d = false;  
    // #endif  
    // #ifdef  MP-TOUTIAO || MP-LARK || MP-ALIPAY  
    this.type2d = this.canvas2d;  
    // #endif  
    // #ifdef MP-ALIPAY  
    this.inAli = true;  
    this.pixel = systemInfo.pixelRatio;  
    // #endif  
    // #ifdef MP-BAIDU  
    this.inBd = true;  
    // #endif  
    // #ifdef MP-TOUTIAO  
    this.inTt = true;  
    // #endif  
    this.disScroll = this.disableScroll;  
  },  
  mounted() {  
    // #ifdef APP-VUE  
    this.inApp = true;  
    if (this.echartsApp === true) {  
      this.echarts = true;  
      this.openmouse = false;  
    }  
    // #endif  
    // #ifdef APP-NVUE  
    this.inApp = true;  
    this.mixinDatacomLoading = false  
    this.mixinDatacomErrorMessage = "暂不支持NVUE"  
    // #endif  
    // #ifdef H5  
    this.inH5 = true;  
    if(this.inWin === true){  
      this.openmouse = this.onmouse;  
    }  
    if (this.echartsH5 === true) {  
      this.echarts = true;  
    }  
    // #endif  
    this.$nextTick(()=>{  
      this.beforeInit();  
    })  
    // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE  
    const time = this.inH5 ? 500 : 200;  
    const _this = this;  
    uni.onWindowResize(  
      debounce(function(res) {  
        if (_this.mixinDatacomLoading == true) {  
          return;  
        }  
        let errmsg = _this.mixinDatacomErrorMessage;  
        if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {  
          return;  
        }  
        if (_this.echarts) {  
          _this.echartsResize.state = !_this.echartsResize.state;  
        } else {  
          _this.resizeHandler();  
        }  
      }, time)  
    );  
    // #endif  
  },  
  destroyed(){  
    if(this.echarts === true){  
      delete cfe.option[this.cid]  
      delete cfe.instance[this.cid]  
    }else{  
      delete cfu.option[this.cid]  
      delete cfu.instance[this.cid]  
    }  
    // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO  
    uni.offWindowResize(()=>{})  
    // #endif  
  },  
  watch: {  
    chartDataProps: {  
      handler(val, oldval) {  
        if (typeof val === 'object') {  
          if (JSON.stringify(val) !== JSON.stringify(oldval)) {  
            this._clearChart();  
            if (val.series && val.series.length > 0) {  
              this.beforeInit();  
            }else{  
              this.mixinDatacomLoading = true;  
              this.showchart = false;  
              this.mixinDatacomErrorMessage = null;  
            }  
          }  
        } else {  
          this.mixinDatacomLoading = false;  
          this._clearChart();  
          this.showchart = false;  
          this.mixinDatacomErrorMessage = '参数错误：chartData数据类型错误';  
        }  
      },  
      immediate: false,  
      deep: true  
    },  
    localdata:{  
      handler(val, oldval) {  
        if (JSON.stringify(val) !== JSON.stringify(oldval)) {  
          if (val.length > 0) {  
            this.beforeInit();  
          }else{  
            this.mixinDatacomLoading = true;  
            this._clearChart();  
            this.showchart = false;  
            this.mixinDatacomErrorMessage = null;  
          }  
        }  
      },  
      immediate: false,  
      deep: true  
    },  
    optsProps: {  
      handler(val, oldval) {  
        if (typeof val === 'object') {  
          if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {  
            this.checkData(this.drawData);  
          }  
        } else {  
          this.mixinDatacomLoading = false;  
          this._clearChart();  
          this.showchart = false;  
          this.mixinDatacomErrorMessage = '参数错误：opts数据类型错误';  
        }  
      },  
      immediate: false,  
      deep: true  
    },  
    eoptsProps: {  
      handler(val, oldval) {  
        if (typeof val === 'object') {  
          if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) {  
            this.checkData(this.drawData);  
          }  
        } else {  
          this.mixinDatacomLoading = false;  
          this.showchart = false;  
          this.mixinDatacomErrorMessage = '参数错误：eopts数据类型错误';  
        }  
      },  
      immediate: false,  
      deep: true  
    },  
    reshow(val, oldval) {  
      if (val === true && this.mixinDatacomLoading === false) {  
        setTimeout(() => {  
          this.mixinDatacomErrorMessage = null;  
          this.echartsResize.state = !this.echartsResize.state;  
          this.checkData(this.drawData);  
        }, 200);  
      }  
    },  
    reload(val, oldval) {  
      if (val === true) {  
        this.showchart = false;  
        this.mixinDatacomErrorMessage = null;  
        this.reloading();  
      }  
    },  
    mixinDatacomErrorMessage(val, oldval) {  
      if (val) {  
        this.emitMsg({name: 'error', params: {type:"error", errorShow: this.errorShow, msg: val, id: this.cid}});  
        if(this.errorShow){  
          //console.log('[秋云图表组件]' + val);  
        }  
      }  
    },  
    errorMessage(val, oldval) {  
      if (val && this.errorShow && val !== null && val !== 'null' && val !== '') {  
        this.showchart = false;  
        this.mixinDatacomLoading = false;  
        this.mixinDatacomErrorMessage = val;  
      } else {  
        this.showchart = false;  
        this.mixinDatacomErrorMessage = null;  
        this.reloading();  
      }  
    }  
  },  
  computed: {  
    optsProps() {  
      return JSON.parse(JSON.stringify(this.opts));  
    },  
    eoptsProps() {  
      return JSON.parse(JSON.stringify(this.eopts));  
    },  
    chartDataProps() {  
      return JSON.parse(JSON.stringify(this.chartData));  
    },  
  },  
  methods: {  
    beforeInit(){  
      this.mixinDatacomErrorMessage = null;  
      if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {  
        //拷贝一下chartData，为了opts变更后统一数据来源  
        this.drawData = deepCloneAssign({}, this.chartData);  
        this.mixinDatacomLoading = false;  
        this.showchart = true;  
        this.checkData(this.chartData);  
      }else if(this.localdata.length>0){  
        this.mixinDatacomLoading = false;  
        this.showchart = true;  
        this.localdataInit(this.localdata);  
      }else if(this.collection !== ''){  
        this.mixinDatacomLoading = false;  
        this.getCloudData();  
      }else{  
        this.mixinDatacomLoading = true;  
      }  
    },  
    localdataInit(resdata){  
      //替换enum类型为正确的描述  
      if(this.groupEnum.length>0){  
        for (let i = 0; i < resdata.length; i++) {  
          for (let j = 0; j < this.groupEnum.length; j++) {  
            if(resdata[i].group === this.groupEnum[j].value){  
              resdata[i].group = this.groupEnum[j].text  
            }  
          }  
        }  
      }  
      if(this.textEnum.length>0){  
        for (let i = 0; i < resdata.length; i++) {  
          for (let j = 0; j < this.textEnum.length; j++) {  
            if(resdata[i].text === this.textEnum[j].value){  
              resdata[i].text = this.textEnum[j].text  
            }  
          }  
        }  
      }  
      let needCategories = false;  
      let tmpData = {categories:[], series:[]}  
      let tmpcategories = []  
      let tmpseries = [];  
      //拼接categories  
      if(this.echarts === true){  
        needCategories = cfe.categories.includes(this.type)  
      }else{  
        needCategories = cfu.categories.includes(this.type)  
      }  
      if(needCategories === true){  
        //如果props中的chartData带有categories，则优先使用chartData的categories  
        if(this.chartData && this.chartData.categories && this.chartData.categories.length>0){  
          tmpcategories = this.chartData.categories  
        }else{  
          //如果是日期类型的数据，不管是本地数据还是云数据，都按起止日期自动拼接categories  
          if(this.startDate && this.endDate){  
            let idate = new Date(this.startDate)  
            let edate = new Date(this.endDate)  
            while (idate <= edate) {  
                tmpcategories.push(getFormatDate(idate))  
                idate = idate.setDate(idate.getDate() + 1)  
                idate = new Date(idate)  
            }  
          //否则从结果中去重并拼接categories  
          }else{  
            let tempckey = {};  
            resdata.map(function(item, index) {  
              if (item.text != undefined && !tempckey[item.text]) {  
                tmpcategories.push(item.text)  
                tempckey[item.text] = true  
              }  
            });  
          }  
        }  
        tmpData.categories = tmpcategories  
      }  
      //拼接series  
      let tempskey = {};  
      resdata.map(function(item, index) {  
        if (item.group != undefined && !tempskey[item.group]) {  
          tmpseries.push({ name: item.group, data: [] });  
          tempskey[item.group] = true;  
        }  
      });  
      //如果没有获取到分组名称(可能是带categories的数据，也可能是不带的饼图类)  
      if (tmpseries.length == 0) {  
        tmpseries = [{ name: '默认分组', data: [] }];  
        //如果是需要categories的图表类型  
        if(needCategories === true){  
          for (let j = 0; j < tmpcategories.length; j++) {  
            let seriesdata = 0;  
            for (let i = 0; i < resdata.length; i++) {  
              if (resdata[i].text == tmpcategories[j]) {  
                seriesdata = resdata[i].value;  
              }  
            }  
            tmpseries[0].data.push(seriesdata);  
          }  
        //如果是饼图类的图表类型  
        }else{  
          for (let i = 0; i < resdata.length; i++) {  
            tmpseries[0].data.push({"name": resdata[i].text,"value": resdata[i].value});  
          }  
        }  
      //如果有分组名  
      } else {  
        for (let k = 0; k < tmpseries.length; k++) {  
          //如果有categories  
          if (tmpcategories.length > 0) {  
            for (let j = 0; j < tmpcategories.length; j++) {  
              let seriesdata = 0;  
              for (let i = 0; i < resdata.length; i++) {  
                if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) {  
                  seriesdata = resdata[i].value;  
                }  
              }  
              tmpseries[k].data.push(seriesdata);  
            }  
          //如果传了group而没有传text，即没有categories（正常情况下这种数据是不符合数据要求规范的）  
          } else {  
            for (let i = 0; i < resdata.length; i++) {  
              if (tmpseries[k].name == resdata[i].group) {  
                tmpseries[k].data.push(resdata[i].value);  
              }  
            }  
          }  
        }  
      }  
      tmpData.series = tmpseries  
      //拷贝一下chartData，为了opts变更后统一数据来源  
      this.drawData = deepCloneAssign({}, tmpData);  
      this.checkData(tmpData)  
    },  
    reloading() {  
      if(this.errorReload === false){  
        return;  
      }  
      this.showchart = false;  
      this.mixinDatacomErrorMessage = null;  
      if (this.collection !== '') {  
        this.mixinDatacomLoading = false;  
        this.onMixinDatacomPropsChange(true);  
      } else {  
        this.beforeInit();  
      }  
    },  
    checkData(anyData) {  
      let cid = this.cid  
      //复位opts或eopts  
      if(this.echarts === true){  
        cfe.option[cid] = deepCloneAssign({}, this.eopts);  
        cfe.option[cid].id = cid;  
        cfe.option[cid].type = this.type;  
      }else{  
        if (this.type && cfu.type.includes(this.type)) {  
          cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts);  
          cfu.option[cid].canvasId = cid;  
        } else {  
          this.mixinDatacomLoading = false;  
          this.showchart = false;  
          this.mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确';  
        }  
      }  
      //挂载categories和series  
      let newData = deepCloneAssign({}, anyData);  
      if (newData.series !== undefined && newData.series.length > 0) {  
        this.mixinDatacomErrorMessage = null;  
        if (this.echarts === true) {  
          cfe.option[cid].chartData = newData;  
          this.$nextTick(()=>{  
            this.init()  
          })  
        }else{  
          cfu.option[cid].categories = newData.categories;  
          cfu.option[cid].series = newData.series;  
          this.$nextTick(()=>{  
            this.init()  
          })  
        }  
      }  
    },  
    resizeHandler() {  
      //渲染防抖  
      let currTime = Date.now();  
      let lastDrawTime = this.lastDrawTime?this.lastDrawTime:currTime-3000;  
      let duration = currTime - lastDrawTime;  
      if (duration < 1000) return;  
      let chartdom = uni  
        .createSelectorQuery()  
        // #ifndef MP-ALIPAY  
        .in(this)  
        // #endif  
        .select('#ChartBoxId'+this.cid)  
        .boundingClientRect(data => {  
          this.showchart = true;  
          if (data.width > 0 && data.height > 0) {  
            if (data.width !== this.cWidth || data.height !== this.cHeight) {  
              this.checkData(this.drawData)  
            }  
          }  
        })  
        .exec();  
    },  
    getCloudData() {  
      if (this.mixinDatacomLoading == true) {  
        return;  
      }  
      this.mixinDatacomLoading = true;  
      this.mixinDatacomGet()  
        .then(res => {  
          this.mixinDatacomResData = res.result.data;  
          this.localdataInit(this.mixinDatacomResData);  
        })  
        .catch(err => {  
          this.mixinDatacomLoading = false;  
          this.showchart = false;  
          this.mixinDatacomErrorMessage = '请求错误：' + err;  
        });  
    },  
    onMixinDatacomPropsChange(needReset, changed) {  
      if (needReset == true && this.collection !== '') {  
        this.showchart = false;  
        this.mixinDatacomErrorMessage = null;  
        this._clearChart();  
        this.getCloudData();  
      }  
    },  
    _clearChart() {  
      let cid = this.cid  
      if (this.echarts !== true && cfu.option[cid] && cfu.option[cid].context) {  
        const ctx = cfu.option[cid].context;  
        if(typeof ctx === "object" && !!!cfu.option[cid].update){  
          ctx.clearRect(0, 0, this.cWidth*this.pixel, this.cHeight*this.pixel);  
          ctx.draw();  
        }  
      }  
    },  
    init() {  
      let cid = this.cid  
      let chartdom = uni  
        .createSelectorQuery()  
        // #ifndef MP-ALIPAY  
        .in(this)  
        // #endif  
        .select('#ChartBoxId'+cid)  
        .boundingClientRect(data => {  
          if (data.width > 0 && data.height > 0) {  
            this.mixinDatacomLoading = false;  
            this.showchart = true;  
            this.lastDrawTime = Date.now();  
            this.cWidth = data.width;  
            this.cHeight = data.height;  
            if(this.echarts !== true){  
              cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.background;  
              cfu.option[cid].canvas2d = this.type2d;  
              cfu.option[cid].pixelRatio = this.pixel;  
              cfu.option[cid].animation = this.animation;  
              cfu.option[cid].width = data.width * this.pixel;  
              cfu.option[cid].height = data.height * this.pixel;  
              cfu.option[cid].onzoom = this.onzoom;  
              cfu.option[cid].ontap = this.ontap;  
              cfu.option[cid].ontouch = this.ontouch;  
              cfu.option[cid].onmouse = this.openmouse;  
              cfu.option[cid].onmovetip = this.onmovetip;  
              cfu.option[cid].tooltipShow = this.tooltipShow;  
              cfu.option[cid].tooltipFormat = this.tooltipFormat;  
              cfu.option[cid].tooltipCustom = this.tooltipCustom;  
              cfu.option[cid].inScrollView = this.inScrollView;  
              cfu.option[cid].lastDrawTime = this.lastDrawTime;  
              cfu.option[cid].tapLegend = this.tapLegend;  
            }  
            //如果是H5或者App端，采用renderjs渲染图表  
            if (this.inH5 || this.inApp) {  
              if (this.echarts == true) {  
                cfe.option[cid].ontap = this.ontap;  
                cfe.option[cid].onmouse = this.openmouse;  
                cfe.option[cid].tooltipShow = this.tooltipShow;  
                cfe.option[cid].tooltipFormat = this.tooltipFormat;  
                cfe.option[cid].tooltipCustom = this.tooltipCustom;  
                cfe.option[cid].lastDrawTime = this.lastDrawTime;  
                this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);  
              } else {  
                cfu.option[cid].rotateLock = cfu.option[cid].rotate;  
                this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);  
              }  
            //如果是小程序端，采用uCharts渲染  
            } else {  
              cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter)  
              this.mixinDatacomErrorMessage = null;  
              this.mixinDatacomLoading = false;  
              this.showchart = true;  
              this.$nextTick(()=>{  
                if (this.type2d === true) {  
                  const query = uni.createSelectorQuery().in(this)  
                  query  
                    .select('#' + cid)  
                    .fields({ node: true, size: true })  
                    .exec(res => {  
                      if (res[0]) {  
                        const canvas = res[0].node;  
                        const ctx = canvas.getContext('2d');  
                        cfu.option[cid].context = ctx;  
                        cfu.option[cid].rotateLock = cfu.option[cid].rotate;  
                        if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){  
                          this._updataUChart(cid)  
                        }else{  
                          canvas.width = data.width * this.pixel;  
                          canvas.height = data.height * this.pixel;  
                          canvas._width = data.width * this.pixel;  
                          canvas._height = data.height * this.pixel;  
                          setTimeout(()=>{  
                            cfu.option[cid].context.restore();  
                            cfu.option[cid].context.save();  
                            this._newChart(cid)  
                          },100)  
                        }  
                      } else {  
                        this.showchart = false;  
                        this.mixinDatacomErrorMessage = '参数错误：开启2d模式后，未获取到dom节点，canvas-id:' + cid;  
                      }  
                    });  
                } else {  
                  if(this.inAli){  
                    cfu.option[cid].rotateLock = cfu.option[cid].rotate;  
                  }  
                  cfu.option[cid].context = uni.createCanvasContext(cid, this);  
                  if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){  
                    this._updataUChart(cid)  
                  }else{  
                    setTimeout(()=>{  
                      cfu.option[cid].context.restore();  
                      cfu.option[cid].context.save();  
                      this._newChart(cid)  
                    },100)  
                  }  
                }  
              })  
            }  
          } else {  
            this.mixinDatacomLoading = false;  
            this.showchart = false;  
            if (this.reshow == true) {  
              this.mixinDatacomErrorMessage = '布局错误：未获取到父元素宽高尺寸！canvas-id:' + cid;  
            }  
          }  
        })  
        .exec();  
    },  
    saveImage(){  
        uni.canvasToTempFilePath({  
          canvasId: this.cid,  
          success: res=>{  
            //#ifdef H5  
                var a = document.createElement("a");  
                a.href = res.tempFilePath;  
                a.download = this.cid;  
                a.target = '_blank'  
                a.click();  
            //#endif  
            //#ifndef H5  
              uni.saveImageToPhotosAlbum({  
              filePath: res.tempFilePath,  
              success: function () {  
                uni.showToast({  
                  title: '保存成功',  
                  duration: 2000  
                });  
              }  
              });  
            //#endif  
          }  
        },this);  
    },  
    getImage(){  
      if(this.type2d == false){  
        uni.canvasToTempFilePath({  
          canvasId: this.cid,  
          success: res=>{  
            this.emitMsg({name: 'getImage', params: {type:"getImage", base64: res.tempFilePath}});  
          }  
        },this);  
      }else{  
        const query = uni.createSelectorQuery().in(this)  
        query  
          .select('#' + this.cid)  
          .fields({ node: true, size: true })  
          .exec(res => {  
            if (res[0]) {  
              const canvas = res[0].node;  
              this.emitMsg({name: 'getImage', params: {type:"getImage", base64: canvas.toDataURL('image/png')}});  
            }  
          });  
      }  
    },  
    // #ifndef APP-VUE || H5  
    _newChart(cid) {  
      if (this.mixinDatacomLoading == true) {  
        return;  
      }  
      this.showchart = true;  
      cfu.instance[cid] = new uCharts(cfu.option[cid]);  
      cfu.instance[cid].addEventListener('renderComplete', () => {  
        this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid, opts: cfu.instance[cid].opts}});  
        cfu.instance[cid].delEventListener('renderComplete')  
      });  
      cfu.instance[cid].addEventListener('scrollLeft', () => {  
        this.emitMsg({name: 'scrollLeft', params: {type:"scrollLeft", scrollLeft: true, id: cid, opts: cfu.instance[cid].opts}});  
      });  
      cfu.instance[cid].addEventListener('scrollRight', () => {  
        this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});  
      });  
    },  
    _updataUChart(cid) {  
      cfu.instance[cid].updateData(cfu.option[cid])  
    },  
    _tooltipDefault(item, category, index, opts) {  
      if (category) {  
        let data = item.data  
        if(typeof item.data === "object"){  
          data = item.data.value  
        }  
        return category + ' ' + item.name + ':' + data;  
      } else {  
        if (item.properties && item.properties.name) {  
          return item.properties.name;  
        } else {  
          return item.name + ':' + item.data;  
        }  
      }  
    },  
    _showTooltip(e) {  
      let cid = this.cid  
      let tc = cfu.option[cid].tooltipCustom  
      if (tc && tc !== undefined && tc !== null) {  
        let offset = undefined;  
        if (tc.x >= 0 && tc.y >= 0) {  
          offset = { x: tc.x, y: tc.y + 10 };  
        }  
        cfu.instance[cid].showToolTip(e, {  
          index: tc.index,  
          offset: offset,  
          textList: tc.textList,  
          formatter: (item, category, index, opts) => {  
            if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {  
              return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);  
            } else {  
              return this._tooltipDefault(item, category, index, opts);  
            }  
          }  
        });  
      } else {  
        cfu.instance[cid].showToolTip(e, {  
          formatter: (item, category, index, opts) => {  
            if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {  
              return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);  
            } else {  
              return this._tooltipDefault(item, category, index, opts);  
            }  
          }  
        });  
      }  
    },  
    _tap(e,move) {  
      let cid = this.cid  
      let currentIndex = null;  
      let legendIndex = null;  
      if (this.inScrollView === true || this.inAli) {  
        let chartdom = uni  
          .createSelectorQuery()  
          // #ifndef MP-ALIPAY  
          .in(this)  
          .select('#ChartBoxId'+cid)  
          // #endif  
          // #ifdef MP-ALIPAY  
          .select('#'+this.cid)  
          // #endif  
          .boundingClientRect(data => {  
            e.changedTouches=[];  
            if (this.inAli) {  
              e.changedTouches.unshift({ x: e.detail.clientX - data.left, y: e.detail.clientY - data.top});  
            }else{  
              e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.pageScrollTop});  
            }  
            if(move){  
              if (this.tooltipShow === true) {  
                this._showTooltip(e);  
              }  
            }else{  
              currentIndex = cfu.instance[cid].getCurrentDataIndex(e);  
              legendIndex = cfu.instance[cid].getLegendDataIndex(e);  
              if(this.tapLegend === true){  
                cfu.instance[cid].touchLegend(e);  
              }  
              if (this.tooltipShow === true) {  
                this._showTooltip(e);  
              }  
              this.emitMsg({name: 'getIndex', params: { type:"getIndex", event:{ x: e.detail.x - data.left, y: e.detail.y - data.top }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});  
            }  
          })  
          .exec();  
      } else {  
        if(move){  
          if (this.tooltipShow === true) {  
            this._showTooltip(e);  
          }  
        }else{  
          e.changedTouches=[];  
          e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop });  
          currentIndex = cfu.instance[cid].getCurrentDataIndex(e);  
          legendIndex = cfu.instance[cid].getLegendDataIndex(e);  
          if(this.tapLegend === true){  
            cfu.instance[cid].touchLegend(e);  
          }  
          if (this.tooltipShow === true) {  
            this._showTooltip(e);  
          }  
          this.emitMsg({name: 'getIndex', params: {type:"getIndex", event:{ x: e.detail.x, y: e.detail.y - e.currentTarget.offsetTop }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});  
        }  
      }  
    },  
    _touchStart(e) {  
      let cid = this.cid  
      lastMoveTime=Date.now();  
      if(cfu.option[cid].enableScroll === true && e.touches.length == 1){  
        cfu.instance[cid].scrollStart(e);  
      }  
      this.emitMsg({name:'getTouchStart', params:{type:"touchStart", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});  
    },  
    _touchMove(e) {  
      let cid = this.cid  
      let currMoveTime = Date.now();  
      let duration = currMoveTime - lastMoveTime;  
      let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;  
      if (duration < Math.floor(1000 / touchMoveLimit)) return;//每秒60帧  
      lastMoveTime = currMoveTime;  
      if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){  
        cfu.instance[cid].scroll(e);  
      }  
      if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){  
        this._tap(e,true)  
      }  
      if(this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e.changedTouches.length == 2){  
        cfu.instance[cid].dobuleZoom(e);  
      }  
      this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid, opts: cfu.instance[cid].opts}});  
    },  
    _touchEnd(e) {  
      let cid = this.cid  
      if(cfu.option[cid].enableScroll === true && e.touches.length == 0){  
        cfu.instance[cid].scrollEnd(e);  
      }  
      this.emitMsg({name:'getTouchEnd', params:{type:"touchEnd", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});  
      if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){  
        this._tap(e,true)  
      }  
    },  
    // #endif  
    _error(e) {  
      this.mixinDatacomErrorMessage = e.detail.errMsg;  
    },  
    emitMsg(msg) {  
      this.$emit(msg.name, msg.params);  
    },  
    getRenderType() {  
      //防止如果开启echarts且父元素为v-if的情况renderjs监听不到prop变化的问题  
      if(this.echarts===true && this.mixinDatacomLoading===false){  
        this.beforeInit()  
      }  
    },  
    toJSON(){  
      return this  
    }  
  }  
};  
</script>  

<!-- #ifdef APP-VUE || H5 -->  
<script module="rdcharts" lang="renderjs">  
import uChartsRD from '../../js_sdk/u-charts/u-charts.js';  
import cfu from '../../js_sdk/u-charts/config-ucharts.js';  
import cfe from '../../js_sdk/u-charts/config-echarts.js';  

var that = {};  
var rootdom = null;  

function rddeepCloneAssign(origin = {}, ...args) {  
  for (let i in args) {  
    for (let key in args[i]) {  
      if (args[i].hasOwnProperty(key)) {  
        origin[key] = args[i][key] && typeof args[i][key] === 'object' ? rddeepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];  
      }  
    }  
  }  
  return origin;  
}  

function rdformatterAssign(args,formatter) {  
  for (let key in args) {  
    if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){  
      rdformatterAssign(args[key],formatter)  
    }else if(key === 'format' && typeof args[key] === 'string'){  
      args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;  
    }  
  }  
  return args;  
}  

export default {  
  data() {  
    return {  
      rid:null  
    }  
  },  
  mounted() {  
    rootdom = {top:0,left:0}  
    // #ifdef H5  
    let dm = document.querySelectorAll('uni-main')[0]  
    if(dm === undefined){  
      dm = document.querySelectorAll('uni-page-wrapper')[0]  
    }  
    rootdom = {top:dm.offsetTop,left:dm.offsetLeft}  
    // #endif  
    setTimeout(()=>{  
      if(this.rid === null){  
        this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')  
      }  
    },200)  
  },  
  destroyed(){  
    delete cfu.option[this.rid]  
    delete cfu.instance[this.rid]  
    delete cfe.option[this.rid]  
    delete cfe.instance[this.rid]  
  },  
  methods: {  
    //==============以下是ECharts的方法====================  
    ecinit(newVal, oldVal, owner, instance){  
      let cid = JSON.stringify(newVal.id)  
      this.rid = cid  
      that[cid] = this.$ownerInstance || instance  
      let eopts = JSON.parse(JSON.stringify(newVal))  
      let type = eopts.type;  
      //载入并覆盖默认配置  
      if (type && cfe.type.includes(type)) {  
        cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);  
      }else{  
        cfe.option[cid] = rddeepCloneAssign({}, eopts);  
      }  
      let newData = eopts.chartData;  
      if(newData){  
        //挂载categories和series  
        if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){  
          cfe.option[cid].xAxis.data = newData.categories  
        }  
        if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){  
          cfe.option[cid].yAxis.data = newData.categories  
        }  
        cfe.option[cid].series = []  
        for (var i = 0; i < newData.series.length; i++) {  
          cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {}  
          let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i])  
          cfe.option[cid].series.push(Template)  
        }  
      }  

      if (typeof window.echarts === 'object') {  
          this.newEChart()  
      }else{  
        const script = document.createElement('script')  
        // #ifdef APP-VUE  
        script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'  
        // #endif  
        // #ifdef H5  

                // const rooturl = window.location.origin  
                // const directory = instance.getDataset().directory  
                // script.src = rooturl + directory + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'  

                const { origin } = window.location  
                const rooturl = origin + process.env.BASE_URL  
                script.src = rooturl + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'  

        // #endif  
        script.onload = this.newEChart  
        document.head.appendChild(script)  
      }  
    },  
    ecresize(newVal, oldVal, owner, instance){  
      if(cfe.instance[this.rid]){  
        cfe.instance[this.rid].resize()  
      }  
    },  
    newEChart(){  
      let cid = this.rid  
      if(cfe.instance[cid] === undefined){  
        cfe.instance[cid] = echarts.init(that[cid].$el.children[0])  
        //ontap开启后才触发click事件  
        if(cfe.option[cid].ontap === true){  
          cfe.instance[cid].on('click', resdata => {  
            let event = JSON.parse(JSON.stringify({  
              x:resdata.event.offsetX,y:resdata.event.offsetY  
            }))  
            that[cid].callMethod('emitMsg',{name:"getIndex", params:{type:"getIndex", event:event, currentIndex:resdata.dataIndex, value:resdata.data, seriesName: resdata.seriesName,id:cid}})  
          })  
          // 增加ECharts的highlight消息，实现按下移动返回索引功能。add by onefish 创建于 2021-12-11 09:50  
          cfe.instance[cid].on('highlight', resdata => {  
            that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})  
          })  
        }  
        this.updataEChart(cid,cfe.option[cid])  
      }else{  
        this.updataEChart(cid,cfe.option[cid])  
      }  
    },  
    updataEChart(cid,option){  
      //替换option内format属性为formatter的预定义方法  
      option = rdformatterAssign(option,cfe.formatter)  
      if(option.tooltip){  
        option.tooltip.show = option.tooltipShow?true:false;  
        option.tooltip.position = this.tooltipPosition()  
        //tooltipFormat方法，替换组件的tooltipFormat为config-echarts.js内对应的方法  
        if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) {  
          option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[option.tooltipFormat]  
        }  
      }  
      // 颜色渐变添加的方法  
      if (option.series) {  
        for (let i in option.series) {  
            let linearGradient = option.series[i].linearGradient  
            if (linearGradient) {  
                option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],linearGradient[1],linearGradient[2],linearGradient[3],linearGradient[4])  
            }  
        }  
      }  
      cfe.instance[cid].setOption(option, option.notMerge)  
      cfe.instance[cid].on('finished', function(){  
        that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}})  
        if(cfe.instance[cid]){  
          cfe.instance[cid].off('finished')  
        }  
      });  

      //修复init初始化实例获取宽高不正确问题  
      if(  
        typeof that[cid].$el.children[0].clientWidth != 'undefined' &&  
          (  
            Math.abs( that[cid].$el.children[0].clientWidth - cfe.instance[cid].getWidth() )>3 ||  
            Math.abs( that[cid].$el.children[0].clientHeight - cfe.instance[cid].getHeight() )>3  
          )  
      ){this.ecresize();}  
    },  
    tooltipPosition(){  
      return (point, params, dom, rect, size) => {  
        let x = point[0]  
        let y = point[1]  
        let viewWidth = size.viewSize[0]  
        let viewHeight = size.viewSize[1]  
        let boxWidth = size.contentSize[0]  
        let boxHeight = size.contentSize[1]  
        let posX = x + 30  
        let posY = y + 30  
        if (posX + boxWidth > viewWidth) {  
            posX = x - boxWidth - 30  
        }  
        if (posY + boxHeight > viewHeight) {  
            posY = y - boxHeight - 30  
        }  
        return [posX, posY]  
      }  
    },  
    //==============以下是uCharts的方法====================  
    ucinit(newVal, oldVal, owner, instance){  
      if(JSON.stringify(newVal) == JSON.stringify(oldVal)){  
        return;  
      }  
      if(!newVal.canvasId){  
        return;  
      }  
      let cid = JSON.parse(JSON.stringify(newVal.canvasId))  
      this.rid = cid  
      that[cid] = this.$ownerInstance || instance  
      cfu.option[cid] = JSON.parse(JSON.stringify(newVal))  
      cfu.option[cid] = rdformatterAssign(cfu.option[cid],cfu.formatter)  
      let canvasdom = document.getElementById(cid)  
      if(canvasdom && canvasdom.children[0]){  
        cfu.option[cid].context = canvasdom.children[0].getContext("2d")  
        if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){  
          this.updataUChart()  
        }else{  
          setTimeout(()=>{  
            cfu.option[cid].context.restore();  
            cfu.option[cid].context.save();  
            this.newUChart()  
          },100)  
        }  
      }  
    },  
    newUChart() {  
      let cid = this.rid  
      cfu.instance[cid] = new uChartsRD(cfu.option[cid])  
      cfu.instance[cid].addEventListener('renderComplete', () => {  
        that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid, opts: cfu.instance[cid].opts}})  
        cfu.instance[cid].delEventListener('renderComplete')  
      });  
      cfu.instance[cid].addEventListener('scrollLeft', () => {  
        that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid, opts: cfu.instance[cid].opts}})  
      });  
      cfu.instance[cid].addEventListener('scrollRight', () => {  
        that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})  
      });  
    },  
    updataUChart() {  
      let cid = this.rid  
      cfu.instance[cid].updateData(cfu.option[cid])  
    },  
    tooltipDefault(item, category, index, opts) {  
      if (category) {  
        let data = item.data  
        if(typeof item.data === "object"){  
          data = item.data.value  
        }  
        return category + ' ' + item.name + ':' + data;  
      } else {  
        if (item.properties && item.properties.name) {  
          return item.properties.name ;  
        } else {  
          return item.name + ':' + item.data;  
        }  
      }  
    },  
    showTooltip(e,cid) {  
      let tc = cfu.option[cid].tooltipCustom  
      if (tc && tc !== undefined && tc !== null) {  
        let offset = undefined;  
        if (tc.x >= 0 && tc.y >= 0) {  
          offset = { x: tc.x, y: tc.y + 10 };  
        }  
        cfu.instance[cid].showToolTip(e, {  
          index: tc.index,  
          offset: offset,  
          textList: tc.textList,  
          formatter: (item, category, index, opts) => {  
            if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {  
              return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);  
            } else {  
              return this.tooltipDefault(item, category, index, opts);  
            }  
          }  
        });  
      } else {  
        cfu.instance[cid].showToolTip(e, {  
          formatter: (item, category, index, opts) => {  
            if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {  
              return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);  
            } else {  
              return this.tooltipDefault(item, category, index, opts);  
            }  
          }  
        });  
      }  
    },  
    tap(e) {  
      let cid = this.rid  
      let ontap = cfu.option[cid].ontap  
      let tooltipShow = cfu.option[cid].tooltipShow  
      let tapLegend = cfu.option[cid].tapLegend  
      if(ontap == false) return;  
      let currentIndex=null  
      let legendIndex=null  
      let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()  
      let tmpe = {}  
      if(e.detail.x){//tap或者click的事件  
        tmpe = { x: e.detail.x - rchartdom.left, y:e.detail.y - rchartdom.top + rootdom.top}  
      }else{//mouse的事件  
        tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}  
      }  
      e.changedTouches = [];  
      e.changedTouches.unshift(tmpe)  
      currentIndex=cfu.instance[cid].getCurrentDataIndex(e)  
      legendIndex=cfu.instance[cid].getLegendDataIndex(e)  
      if(tapLegend === true){  
        cfu.instance[cid].touchLegend(e);  
      }  
      if(tooltipShow==true){  
        this.showTooltip(e,cid)  
      }  
      that[cid].callMethod('emitMsg',{name:"getIndex",params:{type:"getIndex",event:tmpe,currentIndex:currentIndex,legendIndex:legendIndex,id:cid, opts: cfu.instance[cid].opts}})  
    },  
    touchStart(e) {  
      let cid = this.rid  
      let ontouch = cfu.option[cid].ontouch  
      if(ontouch == false) return;  
      if(cfu.option[cid].enableScroll === true && e.touches.length == 1){  
        cfu.instance[cid].scrollStart(e);  
      }  
      that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})  
    },  
    touchMove(e) {  
      let cid = this.rid  
      let ontouch = cfu.option[cid].ontouch  
      if(ontouch == false) return;  
      if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){  
        cfu.instance[cid].scroll(e);  
      }  
      if(cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid].onmovetip === true){  
        let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()  
        let tmpe = { x: e.changedTouches[0].clientX - rchartdom.left, y:e.changedTouches[0].clientY - rchartdom.top + rootdom.top}  
        e.changedTouches.unshift(tmpe)  
        if(cfu.option[cid].tooltipShow === true){  
          this.showTooltip(e,cid)  
        }  
      }  
      if(ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e.changedTouches.length == 2){  
        cfu.instance[cid].dobuleZoom(e);  
      }  
      that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})  
    },  
    touchEnd(e) {  
      let cid = this.rid  
      let ontouch = cfu.option[cid].ontouch  
      if(ontouch == false) return;  
      if(cfu.option[cid].enableScroll === true && e.touches.length == 0){  
        cfu.instance[cid].scrollEnd(e);  
      }  
      that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})  
    },  
    mouseDown(e) {  
      let cid = this.rid  
      let onmouse = cfu.option[cid].onmouse  
      if(onmouse == false) return;  
      let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()  
      let tmpe = {}  
      tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}  
      e.changedTouches = [];  
      e.changedTouches.unshift(tmpe)  
      cfu.instance[cid].scrollStart(e)  
      cfu.option[cid].mousedown=true;  
      that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})  
    },  
    mouseMove(e) {  
      let cid = this.rid  
      let onmouse = cfu.option[cid].onmouse  
      let tooltipShow = cfu.option[cid].tooltipShow  
      if(onmouse == false) return;  
      let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()  
      let tmpe = {}  
      tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}  
      e.changedTouches = [];  
      e.changedTouches.unshift(tmpe)  
      if(cfu.option[cid].mousedown){  
        cfu.instance[cid].scroll(e)  
        that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"mouseMove",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})  
      }else if(cfu.instance[cid]){  
        if(tooltipShow==true){  
          this.showTooltip(e,cid)  
        }  
      }  
    },  
    mouseUp(e) {  
      let cid = this.rid  
      let onmouse = cfu.option[cid].onmouse  
      if(onmouse == false) return;  
      let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()  
      let tmpe = {}  
      tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}  
      e.changedTouches = [];  
      e.changedTouches.unshift(tmpe)  
      cfu.instance[cid].scrollEnd(e)  
      cfu.option[cid].mousedown=false;  
      that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})  
    },  
  }  
}  
</script>  
<!-- #endif -->  

<style scoped>  
.chartsview {  
  width: 100%;  
  height: 100%;  
  display: flex;  
  flex: 1;  
  justify-content: center;  
  align-items: center;  
}  
</style>  

有人吗