@10yun/cv-mobile-ui 0.5.56 → 0.5.57

package/other/qiun-data-charts_2.5.0-20230101_example/pages/ucharts/ucharts.vue

@@ -0,0 +1,339 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="基本柱状图"/>
+    <!--
+    极简调用示例，只需指定type及chartData即可。
+    图表默认配置请修改js_sdk/u-charts/config-ucharts.js对应图表类型下配置 
+    注：1、更新前请自行备份config-ucharts.js、config-echarts.js，以免被覆盖
+    2、此方式调用组件chartData需自行按图表类型需求的数据格式拼接
+    配置参数请用在线生成工具(http://demo.ucharts.cn/)生成
+    3、class="charts-box"这个样式，指定了高度，如果你的父元素有固定高度，请修改为height:100%
+    -->
+    <view class="charts-box">
+      <qiun-data-charts type="column" :chartData="chartsDataColumn1" />
+    </view>
+    <qiun-title-bar title="堆叠柱状图"/>
+    <!-- 只需要在:opts中传入与config-ucharts.js中默认配置不同的属性即可覆盖默认配置，既保证了全局图表样式的统一性，也减少了代码量与包体积 -->
+    <view class="charts-box">
+      <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartsDataColumn2"/>
+    </view>
+    <qiun-title-bar title="温度计图表"/>
+    <view class="charts-box">
+      <qiun-data-charts type="column" :opts="{extra:{column:{type:'meter',meterBorde:1,meterFillColor:'#FFFFFF'}}}" :chartData="chartsDataColumn3"/>
+    </view>
+    <qiun-title-bar title="柱状图滚动条"/>
+    <!-- 开启滚动条，需要开启拖动功能，即:ontouch="true" ，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId -->
+    <view class="charts-box">
+      <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn4"/>
+    </view>
+    <qiun-title-bar title="圆角+渐变+半透明柱状图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="column" :opts="{color:['#FAC858','#EE6666'],extra:{column:{linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:true,customColor:['#FA7D8D','#EB88E2']}}}" :chartData="chartsDataColumn5"/>
+    </view>
+    <qiun-title-bar title="全圆角柱状图+标记线"/>
+    <view class="charts-box">
+      <qiun-data-charts type="column" :opts="{yAxis:{data:[{min:0}]},enableMarkLine:true,extra:{column:{seriesGap:5,barBorderRadius:[6,6,6,6]},markLine:{data:[{value:21,showLabel:true}]}}}" :chartData="chartsDataColumn6" />
+    </view>
+    <qiun-title-bar title="柱状图横屏模式"/>
+    <view style="width: 100%;height: 500px;">
+      <qiun-data-charts type="column" :opts="{rotate:true}" :chartData="chartsDataColumn1" />
+    </view>
+    <qiun-title-bar title="基本条状图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1"/>
+    </view>
+    <qiun-title-bar title="圆角条状图+渐变色"/>
+    <view class="charts-box">
+      <qiun-data-charts type="bar" :opts="{xAxis:{max:40},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="chartsDataColumn1"/>
+    </view>
+    <qiun-title-bar title="堆叠条状图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="bar" :opts="{xAxis:{max:70},extra:{bar:{type:'stack'}}}" :chartData="chartsDataColumn1"/>
+    </view>
+    
+    <qiun-title-bar title="圆角山峰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'mount',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
+    </view>
+    <qiun-title-bar title="尖角山峰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'sharp',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
+    </view>
+    <qiun-title-bar title="三角山峰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'triangle',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
+    </view>
+    <qiun-title-bar title="直角山峰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'bar',widthRatio:0.8}}}" :chartData="chartsDataMount" />
+    </view>
+    <qiun-title-bar title="山峰图无边渐变色"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'mount',widthRatio:1.5,borderWidth: 0,linearType: 'custom'}}}" :chartData="chartsDataMount" />
+    </view>
+    <qiun-title-bar title="山峰图有边透明渐变+滚动条"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{enableScroll:true,xAxis:{itemCount:4,scrollShow:true},extra:{mount:{type:'sharp',widthRatio:1.5,borderWidth: 2,linearType: 'opacity',linearOpacity: 0.1}}}" :ontouch="true" :chartData="chartsDataMount"/>
+    </view>
+    <qiun-title-bar title="山峰图有边渐变+标记线"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{padding:[15,40,0,15],enableMarkLine: true,extra:{mount:{type:'triangle',widthRatio:1,borderWidth: 2,linearType: 'custom'},markLine: {
+      type: 'solid',
+      dashLength: 4,
+      data: [
+        {
+          value: 45,
+          lineColor: '#DE4A42',
+          showLabel: true,
+          labelAlign: 'right',
+          labelOffsetX: 0,
+          labelOffsetY: 0,
+          labelText: '均值',
+          labelFontColor: '#666666',
+          labelBgColor: '#DFE8FF',
+          labelBgOpacity: 0.8
+        }
+      ]
+    }}}" :chartData="chartsDataMount" />
+    </view>
+    <qiun-title-bar title="山峰图圆角渐变色柱状图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'bar',widthRatio:0.3,borderWidth: 0,barBorderRadius: [50,50,50,50],linearType: 'custom'}}}" :chartData="chartsDataMount"/>
+    </view>
+    
+    <qiun-title-bar title="基本折线图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="line" :chartData="chartsDataLine1"/>
+    </view>
+    <qiun-title-bar title="基本曲线图(自定义图表类型)"/>
+    <view class="charts-box">
+      <!-- 这里的type="demotype"演示了自定义图表类型的demo，您可以根据需求自己定义一种额外的图表类型 -->
+      <qiun-data-charts type="demotype" :opts="{xAxis:{boundaryGap:'justify'}}" :chartData="chartsDataLine2"/>
+      <!-- 如果不定义"demotype"这个图表类型，可以通过传递opts来覆盖line下的默认配置，如下 -->
+      <!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
+    </view>
+    <qiun-title-bar title="基本时序图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="line" :opts="{extra:{line:{type:'step'}}}" :chartData="chartsDataLine3"/>
+    </view>
+    <qiun-title-bar title="折线图滚动条"/>
+    <!-- 开启滚动条，需要开启拖动功能，即:ontouch="true"，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId -->
+    <view class="charts-box">
+      <qiun-data-charts type="line" canvasId="scrolllineid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :chartData="chartsDataLine4" :ontouch="true" :canvas2d="true"/>
+    </view>
+    <qiun-title-bar title="折线图+断点续连connectNulls"/>
+    <view class="charts-box">
+      <qiun-data-charts type="line" :chartData="chartsDataLine5"/>
+    </view>
+    <qiun-title-bar title="时间轴(矢量轴)折线图"/>
+    <!-- 矢量轴图表支持折线图、区域图、散点图、气泡图。需要注意chartData中，如果是矢量轴，则不能带categories -->
+    <view class="charts-box">
+      <qiun-data-charts type="tline" :opts="{yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
+    </view>
+    <qiun-title-bar title="基本折线区域图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :chartData="chartsDataArea1"/>
+    </view>
+    <qiun-title-bar title="渐变色时序区域图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :opts="{extra:{area:{type:'step',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
+    </view>
+    <qiun-title-bar title="渐变色曲线区域图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
+    </view>
+    <qiun-title-bar title="时间轴(矢量轴)区域图"/>
+    <!-- 矢量轴图表支持折线图、区域图、散点图、气泡图。需要注意chartData中，如果是矢量轴，则不能带categories -->
+    <view class="charts-box">
+      <qiun-data-charts type="tarea" :opts="{xAxis:{format:'xAxisDemo2'},yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
+    </view>
+    <qiun-title-bar title="散点图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="scatter" :chartData="chartsDataScatter" />
+    </view>
+    <qiun-title-bar title="气泡图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="bubble" :chartData="chartsDataBubble" />
+    </view>
+    <qiun-title-bar title="多坐标系混合图"/>
+    <view class="charts-box" style="height: 400px;">
+      <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},{position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'}]}}" :chartData="chartsDataMix1"/>
+    </view>
+    <qiun-title-bar title="基本饼状图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
+    </view>
+    <qiun-title-bar title="环形图+渐变色"/>
+    <view class="charts-box">
+      <qiun-data-charts type="ring" :opts="{legend:{position: 'bottom'},extra:{ring:{ringWidth: 60,linearType:'custom',centerColor:'#FF0'}}}" :chartData="chartsDataRing1"/>
+    </view>
+    <qiun-title-bar title="面积玫瑰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'}}" :chartData="chartsDataRose1"/>
+    </view>
+    <qiun-title-bar title="半径玫瑰图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'},extra:{rose:{type:'radius'}}}" :chartData="chartsDataRose2"/>
+    </view>
+    <qiun-title-bar title="圆弧进度条"/>
+    <!-- 这里的title.name和subtitle.name如果需要联动chartData，请定义一个变量同步传入:opts和:chartData中 -->
+    <view class="charts-box">
+      <qiun-data-charts type="arcbar" :opts="{title:{name:'80%',color:'#2fc25b',fontSize:35},subtitle:{name:'正确率',color:'#666666',fontSize:25}}" :chartData="chartsDataArcbar1"/>
+    </view>
+    <qiun-title-bar title="多重圆弧进度条"/>
+    <view class="charts-box">
+      <qiun-data-charts type="arcbar" :opts="{title:{name:'指标',color:'#1890ff',fontSize:35},subtitle:{},extra:{arcbar:{type:'circle',startAngle:1.5}}}" :chartData="chartsDataArcbar2"/>
+    </view>
+    <qiun-title-bar title="多边形雷达图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{border:true}}}" :chartData="chartsDataRadar1"/>
+    </view>
+    <qiun-title-bar title="圆形雷达图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{gridType:'circle'}}}" :chartData="chartsDataRadar2"/>
+    </view>
+    <qiun-title-bar title="基本仪表盘"/>
+    <!-- 这里的title.name和subtitle.name如果需要联动chartData，请定义一个变量同步传入:opts和:chartData中 -->
+    <view class="charts-box">
+      <qiun-data-charts type="gauge" :opts="{title:{name: '60Km/H',color: '#2fc25b',fontSize: 25,offsetY:50},subtitle: {name: '实时速度',color: '#666666',fontSize: 15,offsetY:-50}}" :chartData="chartsDataGauge1"/>
+    </view>
+    <qiun-title-bar title="其他仪表盘"/>
+    <view class="charts-box">
+      <qiun-data-charts type="gauge" :opts="{title:{offsetY:0},subtitle:{offsetY:0},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}" :chartData="chartsDataGauge2"/>
+    </view>
+    <qiun-title-bar title="词云图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="word" :chartData="chartsDataWord1"/>
+    </view>
+    <qiun-title-bar title="漏斗图+渐变色"/>
+    <view class="charts-box">
+      <qiun-data-charts type="funnel" :opts="{extra:{funnel:{linearType:'custom'}}}" :chartData="chartsDataFunnel1"/>
+    </view>
+    <qiun-title-bar title="倒三角形漏斗图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'triangle'}}}" :chartData="chartsDataFunnel1"/>
+    </view>
+    <qiun-title-bar title="金字塔形漏斗图"/>
+    <view class="charts-box">
+      <qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'pyramid',labelAlign:'left'}}}" :chartData="chartsDataFunnel1"/>
+    </view>
+    <qiun-title-bar title="K线图+双指缩放"/>
+    <view class="charts-box" style="height: 400px;">
+      <qiun-data-charts type="candle" :opts="{extra:{tooltip:{showCategory:true}}}" :ontouch="true" :canvas2d="true" :onzoom="true" canvasId="klineid" :chartData="chartsDataCandle1"/>
+    </view>
+    <qiun-title-bar title="地图"/>
+    <view class="charts-box" style="height: 400px;">
+      <qiun-data-charts type="map" :opts="{extra:{map:{mercator:true}}}" :chartData="chartsDataMap1"/>
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+import mapdata from '@/mockdata/mapdata.json'
+
+export default {
+  data() {
+    return {
+      chartsDataColumn1:{},
+      chartsDataColumn2:{},
+      chartsDataColumn3:{},
+      chartsDataColumn4:{},
+      chartsDataColumn5:{},
+      chartsDataColumn6:{},
+      chartsDataLine1:{},
+      chartsDataLine2:{},
+      chartsDataLine3:{},
+      chartsDataLine4:{},
+      chartsDataLine5:{},
+      chartsDataTLine:{},
+      chartsDataScatter:{},
+      chartsDataBubble:{},
+      chartsDataArea1:{},
+      chartsDataArea2:{},
+      chartsDataMix1:{},
+      chartsDataPie1:{},
+      chartsDataRing1:{},
+      chartsDataRose1:{},
+      chartsDataRose2:{},
+      chartsDataArcbar1:{},
+      chartsDataArcbar2:{},
+      chartsDataGauge1:{},
+      chartsDataGauge2:{},
+      chartsDataRadar1:{},
+      chartsDataRadar2:{},
+      chartsDataWord1:{},
+      chartsDataFunnel1:{},
+      chartsDataMap1:{},
+      chartsDataCandle1:{},
+      chartsDataMount:{}
+    };
+  },
+  onReady() {
+    //模拟从服务器获取数据
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
+      	this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
+      	this.chartsDataColumn3=JSON.parse(JSON.stringify(demodata.Column))
+      	this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
+        this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column))
+        this.chartsDataMount=JSON.parse(JSON.stringify(demodata.Mount))
+        let tmpColumn6=JSON.parse(JSON.stringify(demodata.Column))
+        tmpColumn6.series[1].data[2]={value:21,color:'#EE6666'}
+        //注意，因为组件内监听了chartData，构造chartData的时候，一定要先定义一个临时变量，构造完成后统一赋值给chartData绑定的变量，否则会导致多次渲染图表
+      	this.chartsDataColumn6=tmpColumn6
+      	this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+      	this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
+      	this.chartsDataLine3=JSON.parse(JSON.stringify(demodata.Line))
+      	this.chartsDataLine4=JSON.parse(JSON.stringify(demodata.Line))
+        let tmpLine5=JSON.parse(JSON.stringify(demodata.Line))
+        for (var i = 0; i < tmpLine5.series.length; i++) {
+          tmpLine5.series[i].data[2]=null
+        }
+        tmpLine5.series[1].connectNulls=true
+        this.chartsDataLine5=tmpLine5
+        this.chartsDataTLine=JSON.parse(JSON.stringify(demodata.TLine))
+        this.chartsDataScatter=JSON.parse(JSON.stringify(demodata.Scatter))
+        this.chartsDataBubble=JSON.parse(JSON.stringify(demodata.Bubble))
+      	this.chartsDataArea1=JSON.parse(JSON.stringify(demodata.Line))
+      	this.chartsDataArea2=JSON.parse(JSON.stringify(demodata.Line))
+      	this.chartsDataMix1=JSON.parse(JSON.stringify(demodata.Mix))
+      	this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
+      	this.chartsDataRing1=JSON.parse(JSON.stringify(demodata.PieA))
+      	this.chartsDataRose1=JSON.parse(JSON.stringify(demodata.PieA))
+      	this.chartsDataRose2=JSON.parse(JSON.stringify(demodata.PieA))
+      	this.chartsDataArcbar1=JSON.parse(JSON.stringify(demodata.Arcbar1))
+      	this.chartsDataArcbar2=JSON.parse(JSON.stringify(demodata.Arcbar2))
+      	this.chartsDataGauge1=JSON.parse(JSON.stringify(demodata.Gauge))
+      	this.chartsDataGauge2=JSON.parse(JSON.stringify(demodata.Gauge))
+      	this.chartsDataRadar1=JSON.parse(JSON.stringify(demodata.Radar))
+      	this.chartsDataRadar2=JSON.parse(JSON.stringify(demodata.Radar))
+      	this.chartsDataWord1=JSON.parse(JSON.stringify(demodata.Word))
+      	this.chartsDataFunnel1=JSON.parse(JSON.stringify(demodata.PieA))
+      	this.chartsDataMap1={series:mapdata.features}
+      	this.chartsDataCandle1=JSON.parse(JSON.stringify(demodata.Candle))
+      }, 1500);
+    }
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/other/qiun-data-charts_2.5.0-20230101_example/pages/unicloud/unicloud.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="统计的开始日期"/>
+    <uni-datetime-picker type="date" v-model="startDate" start="2021-04-06" end="2021-06-05" return-type="string"></uni-datetime-picker>
+    <qiun-title-bar title="统计的结束日期"/>
+    <uni-datetime-picker type="date" v-model="endDate" start="2021-04-06" end="2021-06-05" return-type="string"></uni-datetime-picker>
+    <qiun-title-bar title="新增用户趋势"/>
+    <view class="charts-box">
+      <!--
+      datacom组件读取uniClinetDB示例
+      数据规范：
+      带有categories类型的图表定义如下
+      group：为series分组的name
+      text：为对应categories的字段，即x轴对应的数据
+      value：为series的分组data的值
+      获取后组件会自动处理categories和series数据，无需手动拼接处理
+      注意事项：
+      1、如已传入chartData的categories，则优先使用chartData的categories
+      2、如返回数据中无分组字段group，否则图例会显示"默认分组"，如下
+      chartData={categories:["a","b","c"],series:[{name:"默认分组",data:[0,1,2]}]}
+      3、如果text在数据库中定义为enum类型，则需要传入textEnum来描述正确的text值
+      4、如果group在数据库中定义为enum类型，则需要传入groupEnum来描述正确的group值
+      -->
+      <qiun-data-charts
+      	class="charts-box"
+      	type="area"
+      	:opts="{xAxis:{disableGrid:true,labelCount:3},yAxis:{data:[{format:'yAxisDemo2'}]},extra:{area:{type: 'curve',gradient:true}}}"
+        :eopts="{seriesTemplate:{areaStyle:{color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#1890FF'}, {offset: 1, color: '#FFFFFF'}],global: false}},smooth:true}}"
+      	collection="qiun-charts-demo"
+      	field="register_date,status"
+      	:where="'register_date >= ' + new Date(startDate).getTime() + ' && register_date <= ' + new Date(endDate).getTime()"
+      	groupby="dateToString(add(new Date(0),register_date),'%Y-%m-%d','+0800') as text,status as group"
+      	group-field="count(*) as value"
+        :groupEnum="[{text: '正常',value: 0},{text: '禁用',value: 1},{text: '审核中',value: 2},{text: '审核拒绝',value: 3}]"
+        :startDate="startDate"
+        :endDate="endDate"
+        :echartsH5="true"
+      />
+    </view>
+    <qiun-title-bar title="用户男女比例"/>
+    <view class="charts-box">
+      <!--
+      饼图类数据规范：
+      value：代表具体数值
+      text：代表value的描述
+      注意事项：
+      1、如果text在数据库中定义为enum类型，则需要传入textEnum来描述正确的text值
+      -->
+      <qiun-data-charts
+      	class="charts-box"
+      	type="pie"
+      	collection="qiun-charts-demo"
+      	field="register_date,gender"
+      	:where="'register_date >= ' + new Date(startDate).getTime() + ' && register_date <= ' + new Date(endDate).getTime()"
+      	groupby="gender as text"
+      	group-field="count(*) as value"
+        :textEnum="[{value: 1,text: '男'},{value: 2,text: '女'}]"
+      />
+    </view>
+    <qiun-title-bar title="销售额统计"/>
+    <view class="charts-box">
+      <qiun-data-charts
+      	class="charts-box"
+      	type="column"
+      	:opts="{xAxis:{disableGrid:true,labelCount:3},yAxis:{data:[{format:'yAxisDemo1'}]}}"
+      	collection="qiun-charts-demo"
+      	field="register_date,gender,total_fee"
+      	:where="'register_date >= ' + new Date(startDate).getTime() + ' && register_date <= ' + new Date(endDate).getTime()"
+      	groupby="dateToString(add(new Date(0),register_date),'%Y-%m-%d','+0800') as text"
+      	group-field="sum(total_fee) as value"
+        :startDate="startDate"
+        :endDate="endDate"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是uCharts的配置文件及qiun-data-charts组件的公用中转参数，可以从本配置文件中获取uCharts实例、opts配置、format配置（APP端因采用renderjs无法从此配置文件获取uCharts实例）
+import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
+
+export default {
+  data() {
+    return {
+      startDate: '2021-04-06',
+      endDate: '2021-04-13',
+    };
+  },
+  onLoad() {
+    
+  },
+  methods: {
+    getServerData() {
+      
+    },
+    complete(e) {
+      console.log(e);
+      //uCharts.instance[e.id]代表当前的图表实例（除APP端，APP不可在组件外调用uCharts的实例）
+      console.log(uCharts.instance[e.id]);
+      
+    }
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/other/qiun-data-charts_2.5.0-20230101_example/pages/updata/updata.vue

@@ -0,0 +1,212 @@
+<template>
+  <view class="content">
+    <view style="padding: 10px;">
+      <button class="uni-button" type="default" @click="updataWithLoading">带loading的更新</button>
+    </view>
+    <view style="padding: 10px;">
+      <button class="uni-button" type="default" @click="updataWithOutLoading">不显示loading的更新</button>
+    </view>
+    <qiun-title-bar title="仪表盘实时更新"/>
+    <view class="charts-box">
+      <qiun-data-charts type="gauge" :opts="gaugeOpts" :optsWatch="false" :chartData="chartsDataGauge1"/>
+    </view>
+    <qiun-title-bar title="localdata数据更新"/>
+    <view class="charts-box">
+      <qiun-data-charts type="column" :localdata="chartsDatalocaldata"/>
+    </view>
+    <qiun-title-bar title="chartData数据更新"/>
+    <view class="charts-box">
+      <qiun-data-charts type="line" :chartData="chartsDataLine"/>
+    </view>
+    <qiun-title-bar title="opts配置更新"/>
+    <view class="charts-box">
+      <qiun-data-charts type="ring" :opts="ringopts" :chartData="chartsDataRing"/>
+    </view>
+    <view style="padding: 10px;">
+      <button class="uni-button" type="default" @click="updataWithLoading">带loading的更新</button>
+    </view>
+    <view style="padding: 10px;">
+      <button class="uni-button" type="default" @click="updataWithOutLoading">不显示loading的更新</button>
+    </view>
+		<qiun-title-bar title="滚动条拖动更新"/>
+		<view class="charts-box">
+		  <!-- 注意，开启动态打点opts中update需要赋值为true，来启用uCharts的updateData方法来更新视图 -->
+		  <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{update:true,enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,scrollAlign:'current'}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn" @scrollRight="scrollRight"/>
+		</view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+var timec = null;
+export default {
+  data() {
+    return {
+      //注意如果使用localdata数据格式，默认值的类型应该是数组
+      chartsDatalocaldata:[],
+      gaugeOpts:{update:true,duration:500,title:{name: '60Km/H',color: '#2fc25b',fontSize: 25,offsetY:50},subtitle: {name: '实时速度',color: '#666666',fontSize: 15,offsetY:-50}},
+      //注意如果使用chartsData数据格式，默认值的类型应该是对象
+      chartsDataLine:{},
+      chartsDataRing:{},
+			chartsDataColumn:{},
+      chartsDataGauge1:{},
+      ringopts:{},
+			scrollLoadingStatus:false
+    };
+  },
+  onReady() {
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      //模拟从服务器获取数据的过程，请替换为您封装好的request的API
+      setTimeout(() => {
+      	//变更图表绑定的数据，一定要整体改变chartData或者localdata，否则会导致多次重新渲染或者监听不到变化的问题
+        this.chartsDatalocaldata=JSON.parse(JSON.stringify(demodata.localdata))
+        this.chartsDataLine=JSON.parse(JSON.stringify(demodata.Line))
+        this.chartsDataRing=JSON.parse(JSON.stringify(demodata.PieA))
+				this.chartsDataColumn=JSON.parse(JSON.stringify(demodata.Column))
+        //这里演示圆环图标题和副标题动态变化
+        let tmpopts = {
+          title:{
+            name:this.chartsDataRing.series[0].data[0].name
+          },
+          subtitle:{
+            name:this.chartsDataRing.series[0].data[0].value + "人"
+          }
+        }
+        this.ringopts = tmpopts;
+      }, 1500);
+      timec = setInterval(() => {
+        const value = Math.random();
+        this.gaugeOpts.title.name = (value * 100).toFixed(0) + 'Km/H';
+        this.chartsDataGauge1 = {
+          categories: [{"value":0.2,"color":"#1890ff"},{"value":0.8,"color":"#2fc25b"},{"value":1,"color":"#f04864"}],
+          series: [
+            {
+              name: "完成率",
+              data: value
+            }
+          ]
+        };
+      }, 1000)
+    },
+    updataWithLoading(){
+      //为了展示loading状态，需要把当前绑定的数据先处理一下
+      //1:localdata格式的图表数据，展示loading状态需要将绑定数据复位为空数组
+      this.chartsDatalocaldata=[];
+      //2:chartData格式的图表数据，展示loading状态需要将绑定数据的series复位为空数组
+      this.chartsDataLine.series=[];
+      this.chartsDataRing.series=[];
+      
+      //模拟从服务器获取数据的过程，请替换为您封装好的request的API
+      setTimeout(()=>{
+        //变更图表绑定的数据，一定要【整体改变】【整体改变】【整体改变】chartData或者localdata，否则会导致多次重新渲染或者监听不到变化的问题
+        //为了和原始数据不一样，我这里模拟构造一下随机数字。这里应该是您拼接chartData或者localdata的逻辑
+        let resLocaldata = this.randomLocalData(JSON.parse(JSON.stringify(demodata.localdata)))
+        let resLinedata = this.randomChartData(JSON.parse(JSON.stringify(demodata.Line)))
+        let resRingdata = this.randomChartData(JSON.parse(JSON.stringify(demodata.PieA)))
+        //这里演示圆环图标题和副标题动态变化
+        let tmpopts = {
+          title:{
+            name:resRingdata.series[0].data[0].name
+          },
+          subtitle:{
+            name:resRingdata.series[0].data[0].value + "人"
+          }
+        }
+        
+        //变更图表绑定的数据，一定要【整体改变】【整体改变】【整体改变】chartData或者localdata
+        this.chartsDatalocaldata = resLocaldata;
+        this.chartsDataLine = resLinedata;
+        this.chartsDataRing = resRingdata;
+        this.ringopts = tmpopts;
+      },1000)
+    },
+    updataWithOutLoading(){
+      //模拟从服务器获取数据的过程，请替换为您封装好的request的API
+      setTimeout(()=>{
+        //变更图表绑定的数据，一定要【整体改变】【整体改变】【整体改变】chartData或者localdata，否则会导致多次重新渲染或者监听不到变化的问题
+        //为了和原始数据不一样，我这里模拟构造一下随机数字。这里应该是您拼接chartData或者localdata的逻辑
+        let resLocaldata = this.randomLocalData(JSON.parse(JSON.stringify(demodata.localdata)))
+        let resLinedata = this.randomChartData(JSON.parse(JSON.stringify(demodata.Line)))
+        let resRingdata = this.randomChartData(JSON.parse(JSON.stringify(demodata.PieA)))
+        //这里演示圆环图标题和副标题动态变化
+        let tmpopts = {
+          title:{
+            name:resRingdata.series[0].data[0].name
+          },
+          subtitle:{
+            name:resRingdata.series[0].data[0].value + "人"
+          }
+        }
+        
+        //变更图表绑定的数据，一定要【整体改变】【整体改变】【整体改变】chartData或者localdata
+        this.chartsDatalocaldata = resLocaldata;
+        this.chartsDataLine = resLinedata;
+        this.chartsDataRing = resRingdata;
+        this.ringopts = tmpopts;
+      },200)
+    },
+		//滚动条加载更新
+		scrollRight(e){
+			//scrollLoadingStatus防抖方法
+			if(this.scrollLoadingStatus === true){
+				return;
+			}else{
+				this.scrollLoadingStatus = true
+				console.log(e);
+				this.getNewServerData();
+			}
+		},
+		//模拟滚动条加载，从服务器获取数据后拼接数据
+		getNewServerData(){
+			//模拟从服务器获取数据的过程，请替换为您封装好的request的API
+			setTimeout(()=>{
+				let tmpdata = this.chartsDataColumn;
+				tmpdata.categories = tmpdata.categories.concat(JSON.parse(JSON.stringify(demodata.Column.categories)))
+				for (var i = 0; i < tmpdata.series.length; i++) {
+					tmpdata.series[i].data=tmpdata.series[i].data.concat(JSON.parse(JSON.stringify(demodata.Column.series[i].data)))
+				}
+				//以上是我模拟的拼接增加的数据
+				this.chartsDataColumn=JSON.parse(JSON.stringify(tmpdata))
+				//防抖复位，下次触发可以继续加载
+				this.scrollLoadingStatus = false
+			},200)
+		},
+    //构造随机数字，模拟用，不必理会
+    randomLocalData(data){
+      for (var i = 0; i < data.length; i++) {
+        data[i].value = Math.floor(Math.random() * 100)
+      }
+      return data;
+    },
+    randomChartData(data){
+      for (var i = 0; i < data.series.length; i++) {
+        for (var j = 0; j < data.series[i].data.length; j++) {
+          if(typeof data.series[i].data[j] === 'number'){
+            data.series[i].data[j] = Math.floor(Math.random() * 100)
+          }else{
+            data.series[i].data[j].value = Math.floor(Math.random() * 100)
+          }
+        }
+      }
+      return data;
+    }
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+</style>