@10yun/cv-mobile-ui 0.5.63 → 0.5.64

package/other/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue

@@ -1,1618 +0,0 @@
-<!-- 
- * 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-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD || MP-360 -->
-    <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'
-        // #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>