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

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

@@ -0,0 +1,142 @@
+<template>
+  <view class="content">
+    <!-- 从页面整洁度及代码可阅读性上来看，不再推荐使用原生canvas写法来调用uCharts -->
+    <qiun-title-bar title="原生canvas用法示例"/>
+    <canvas canvasId="canvasLine" id="canvasLine" class="charts" @tap="tap($event,'canvasLine')"/>
+    <!-- #ifdef MP-WEIXIN -->
+    <!-- 只有微信小程序有canvas2d模式 -->
+    <qiun-title-bar title="启用type='2d'用法示例"/>
+    <!-- 开启canvas2d模式后@tap的获取的点击坐标会不准确，开发者需按组件源码自行处理event的坐标为正确的坐标，并传入uCharts的实例中方可正确调用showTooltip方法 -->
+    <canvas canvasId="canvasColumn" id="canvasColumn" type="2d" class="charts" @tap="tap($event,'canvasColumn')"/>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
+var uChartsInstance = {};
+
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+
+export default {
+  data() {
+    return {
+      cWidth:350,
+      cHeight:300,
+      pixelRatio:1,
+    };
+  },
+  onLoad() {
+  	//#ifdef MP-ALIPAY || MP-WEIXIN
+  	this.pixelRatio=uni.getSystemInfoSync().pixelRatio;
+  	//#endif
+  	this.cWidth=uni.upx2px(750);
+  	this.cHeight=uni.upx2px(500);
+  	this.getServerData();
+  },
+  onReady() {
+    this.getServerData()
+  },
+  methods: {
+    //模拟从服务器获取数据
+    getServerData() {
+      setTimeout(() => {
+        // 需要自行拼接chartsData
+        let chartsData=JSON.parse(JSON.stringify(demodata.Line))
+        let type2dData=JSON.parse(JSON.stringify(demodata.Column))
+        this.drawCharts("canvasLine",chartsData);
+        // #ifdef MP-WEIXIN
+        this.draw2dCharts("canvasColumn",type2dData);
+        // #endif
+      }, 500);
+    },
+    drawCharts(id,data){
+      const ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id]=new uCharts({
+        //$this:this, //v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
+        //canvasId: canvasId, //v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
+        type: 'line',
+        context:ctx,//v2.0版本必须要传context
+        fontSize:11,
+        padding:[15,15,0,15],
+        dataLabel:true,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        width: this.cWidth,
+        height: this.cHeight,
+        extra: {
+        	line:{
+        		type: 'straight'
+        	}
+        }
+      });
+    },
+    draw2dCharts(id,data){
+      const query = uni.createSelectorQuery().in(this);
+      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
+        if (res[0]) {
+          const canvas = res[0].node
+          //v2.0版本必须要获取context并传入opts(option)中
+          const ctx = canvas.getContext('2d')
+          canvas.width = res[0].width * this.pixelRatio
+          canvas.height = res[0].height * this.pixelRatio
+          uChartsInstance[id]=new uCharts({
+            //canvasId: canvasId, v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
+            type: 'column',
+            padding:[15,5,0,15],
+            dataLabel: true,
+            width: this.cWidth*this.pixelRatio,
+            height: this.cHeight*this.pixelRatio,
+            pixelRatio:this.pixelRatio,
+            canvas2d:true,//开启canvas2d
+            context:ctx,//v2.0版本必须要传context
+            fontSize:11,
+            animation: true,
+            categories: data.categories,
+            series: data.series,
+            xAxis: {
+              disableGrid:true,
+            },
+            yAxis: {
+              data:[{
+                position:'right',
+                axisLine:false,
+                //注意，v2.0版本的format变成了formatter
+                formatter:(val)=>{return val.toFixed(0)+'元'},
+              }]
+            },
+            extra: {
+              column: {
+                type:'group',
+                width: 20
+              }
+            }
+          });
+        }else{
+          console.error("[uCharts]:未获取到context")
+        }
+      })
+    },
+    tap(e,id){
+      uChartsInstance[id].showToolTip(e)
+    }
+  }
+}
+  
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-bottom: 40px;
+}
+.charts{
+  width: 750rpx;
+  height: 500rpx;
+}
+</style>

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

@@ -0,0 +1,228 @@
+<template>
+  <view class="content">
+    <!-- config-echarts.js中的seriesTemplate为option.series模板，可以作为series中的默认配置，:chartData.series中的配置如果有相同的，会覆盖掉 seriesTemplate 中的配置 -->
+		<qiun-title-bar title="柱状图+动态更新数据" />
+    <view class="charts-box">
+      <!-- 如果发布到二级或者多级目录中，需要配置 directory 属性 -->
+      <!-- <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" directory="/h5/" @complete="complete"/> -->
+      <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" @complete="complete"/>
+    </view>
+    <qiun-title-bar title="堆叠柱状图+点击获取索引" />
+    <view class="charts-box">
+      <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！ -->
+      <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :eopts="{xAxis:{axisLabel:{color:'#FF0000'}}}" :chartData="chartsDataColumn2" :echartsH5="true" :echartsApp="true" @getIndex="getIndex"/>
+    </view>
+    <qiun-title-bar title="柱状图+渐变色" />
+    <view class="charts-box">
+      <qiun-data-charts type="column" :chartData="chartsDataColumn3" :echartsH5="true" :echartsApp="true"/>
+    </view>
+    <qiun-title-bar title="圆角柱状图" />
+    <view class="charts-box">
+      <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传itemStyle，将会覆盖:chartData.series 实现更低的代码量 -->
+      <qiun-data-charts type="column" :eopts="{seriesTemplate:{itemStyle:{normal:{barBorderRadius:[30, 30, 0, 0]}}}}" :chartData="chartsDataColumn4" :echartsH5="true" :echartsApp="true"/>
+    </view>
+    <qiun-title-bar title="横向柱状图(仅ECharts)" />
+    <view class="charts-box">
+      <qiun-data-charts type="column" :eopts="columneopts" :chartData="chartsDataColumn5" :echartsH5="true" :echartsApp="true"/>
+    </view>
+		<qiun-title-bar title="折线图" />
+    <view class="charts-box">
+      <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
+    </view>
+		<qiun-title-bar title="曲线图" />
+    <view class="charts-box">
+      <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
+      <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
+    </view>
+		<qiun-title-bar title="区域图" />
+    <view class="charts-box">
+      <qiun-data-charts type="area" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine2" :echartsH5="true" :echartsApp="true"/>
+    </view>
+    <qiun-title-bar title="渐变色区域图" />
+    <view class="charts-box">
+      <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
+      <qiun-data-charts type="area" :opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataLine3" :echartsH5="true" :echartsApp="true"/>
+    </view>
+		<qiun-title-bar title="饼图" />
+    <view class="charts-box">
+      <qiun-data-charts type="pie" :chartData="chartsDataPie1" :echartsH5="true" :echartsApp="true"/>
+    </view>
+		<qiun-title-bar title="环形图+动态更新option"/>
+		<view class="charts-box">
+      <!-- 演示动态改变eopts -->
+		  <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
+		</view>
+		<qiun-title-bar title="面积玫瑰图"/>
+		<view class="charts-box">
+       <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
+		  <qiun-data-charts type="rose" :opts="{legend:{position:'bottom'}}" :chartData="chartsDataPie3" :echartsH5="true" :echartsApp="true"/>
+		</view>
+		<qiun-title-bar title="漏斗图"/>
+		<view class="charts-box">
+		  <qiun-data-charts type="funnel" :chartData="chartsDataPie4" :echartsH5="true" :echartsApp="true"/>
+		</view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+export default {
+  data() {
+    return {
+      chartsDataColumn1:{},
+      chartsDataColumn2: {},
+      chartsDataColumn3:{},
+      chartsDataColumn4:{},
+      chartsDataColumn5:{},
+      chartsDataPie1: {},
+      chartsDataPie2: {},
+      chartsDataPie3: {},
+      chartsDataPie4: {},
+      chartsDataLine1: {},
+      chartsDataLine2: {},
+      chartsDataLine3: {},
+      ringOpts:{},
+      //横向柱状图的配置，您也可以把默认配置写在config-echarts.js中
+      columneopts:{
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: 30,
+          top:10,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: []
+        },
+        //series模板，会覆盖至chartData中的series中的每一个数组内
+        seriesTemplate:{
+          "label": {
+          	"show": true,
+            "color": "#666666",
+          	"position": 'right',
+          },
+        }
+      }
+    };
+  },
+  onReady() {
+    setTimeout(() => {
+      this.getServerData();
+    }, 1000);
+    
+    //演示变更数据后显示loading状态，如果不想展示loading状态，则不需要此步，可以注释掉看效果
+    setTimeout(() => {
+      this.chartsDataColumn1.series=[];
+    }, 4000);
+    
+    setTimeout(() => {
+      //模拟新的柱状图
+      this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Line));
+      //测试动态绑定的eopts
+      this.ringOpts={
+        color:['#FF00FF','#AAFF11'],
+        legend:{show:false}
+      }
+    }, 5000);
+  },
+  methods: {
+    getServerData() {
+      
+      //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+      
+      this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column));
+      let tmpColumn3=JSON.parse(JSON.stringify(demodata.Column));
+      //series.linearGradient代表渐变色：
+      //前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始；
+      //第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
+      tmpColumn3.series[0].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#0EE2F8'},{offset: 1, color: '#1890FF'}]];
+      tmpColumn3.series[1].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#2BDCA8'},{offset: 1, color: '#91CB74'}]];
+      this.chartsDataColumn3=tmpColumn3;
+      
+      this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column));
+      this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column));
+      this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
+      this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
+      this.chartsDataPie3=JSON.parse(JSON.stringify(demodata.PieA))
+      this.chartsDataPie4=JSON.parse(JSON.stringify(demodata.PieA))
+      this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+      
+      
+      //处理堆叠柱状图的series
+      let duidie = JSON.parse(JSON.stringify(demodata.Column))
+      for (var i = 0; i < duidie.series.length; i++) {
+        duidie.series[i].stack = 'one'
+        duidie.series[i].barWidth = '50%'
+        duidie.series[i].label = {position: 'inside',color:'#FFFFFF'}
+      }
+      //这里需要注意，一定要定义一个临时的变量再统一赋值给chartData，否则chartData具有监听属性，只要有变化就会导致重新渲染
+      this.chartsDataColumn2=duidie
+      
+      
+      let areadata = JSON.parse(JSON.stringify(demodata.Line))
+      areadata.series = areadata.series.reverse()
+      this.chartsDataLine2=areadata
+      
+      //渐变色区域图
+      let linearareadata={
+        categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+        series:[{
+          name: "成交量A",
+          smooth:true,
+          areaStyle:{
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                  offset: 0, color: '#1890FF' // 0% 处的颜色
+              }, {
+                  offset: 1, color: '#FFFFFF' // 100% 处的颜色
+              }],
+              global: false // 缺省为 false
+            }
+          },
+          data: [100, 80, 95, 150, 112, 132]
+        }]
+      }
+      this.chartsDataLine3=linearareadata
+      
+    },
+    complete(e) {
+      console.log("渲染完成事件",e);
+    },
+    getIndex(e){
+      console.log("获取点击索引事件",e);
+    }
+  }
+};
+</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/format-e/format-e.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="tooltip提示窗format" />
+    <view class="charts-box"> 
+    <!-- 注意：因app端通过组件均不能传递function类型参数，组件内所有formatter方法，均需使用format属性指定config-echarts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function -->
+      <!-- tooltip的format需要在组件的props参数上传递，例如tooltipFormat="tooltipDemo1"，并需要在config-echarts.js中的formatter节点中的tooltipDemo1中配置format方法。如果开启了echarts，则需要在config-echarts.js中的formatter节点中的tooltipDemo1中配置format方法。 -->
+      <qiun-data-charts
+        type="column"
+        :echartsH5="true"
+        :echartsApp="true"
+        :chartData="chartsDataLine1"
+        tooltipFormat="tooltipDemo1"
+      />
+    </view>
+    <qiun-title-bar title="图例的format"/>
+    <view class="charts-box">
+      <!-- 需要把echarts文档内的formatter转成format，对应的'legendFormat'这个字符串为config-echarts.js中的formatter节点中的 legendFormat 方法-->
+      <qiun-data-charts 
+        type="line" 
+        :echartsH5="true" 
+        :echartsApp="true" 
+        :eopts="{legend:{format:'legendFormat'}}"
+        :chartData="chartsDataColumn2"
+      />
+    </view>
+    <qiun-title-bar title="Y轴format方式1"/>
+    <view class="charts-box">
+      <!-- 需要把echarts文档内的formatter转成format，对应的'yAxisFormatDemo'这个字符串为config-echarts.js中的formatter节点中的 yAxisFormatDemo 方法-->
+      <qiun-data-charts 
+        type="line" 
+        :echartsH5="true" 
+        :echartsApp="true" 
+        :eopts="{yAxis:{axisLabel:{format:'yAxisFormatDemo'}}}" 
+        :chartData="chartsDataLine1" 
+      />
+    </view>
+    <qiun-title-bar title="Y轴format方式2"/>
+    <view class="charts-box">
+      <!-- ECharts如果使用 formatter，则只能使用字符串模板方式，不能使用函数模板！函数模板请参考上面的例子-->
+      <qiun-data-charts 
+        type="line" 
+        :echartsH5="true" 
+        :echartsApp="true" 
+        :eopts="{yAxis:{axisLabel:{formatter:'{value} 元'}}}" 
+        :chartData="chartsDataLine1" 
+      />
+    </view>
+    <qiun-title-bar title="series数据点format方法1"/>
+    <view class="charts-box">
+      <!-- seriesTemplate是config-echarts.js中对应图表类型定义好的series模板 ，如果每个series的formatter都不一样，则format需要定义在chartData.series中，不能使用seriesTemplate -->
+      <!-- formatter需要把echarts文档内的formatter转成format，对应的'seriesFormatDemo'这个字符串为config-echarts.js中的formatter节点中的 seriesFormatDemo 方法-->
+      <qiun-data-charts 
+        type="line" 
+        :echartsH5="true" 
+        :echartsApp="true" 
+        :eopts="{seriesTemplate:{label:{format:'seriesFormatDemo'}}}" 
+        :chartData="chartsDataLine1" 
+      />
+    </view>
+    <qiun-title-bar title="series数据点format方法2"/>
+    <view class="charts-box">
+      <!-- ECharts如果使用 formatter，则只能使用字符串模板方式，不能使用函数模板！函数模板请参考上面的例子-->
+      <qiun-data-charts 
+        type="line" 
+        :echartsH5="true" 
+        :echartsApp="true" 
+        :eopts="{seriesTemplate:{label:{formatter:'{b}年{c}元'}}}" 
+        :chartData="chartsDataLine1" 
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+export default {
+  data() {
+    return {
+      chartsDataLine1: {},
+      chartsDataColumn2: {},
+    };
+  },
+  onLoad() {
+    //模拟从服务器获取数据
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+        this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
+      }, 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/format-u/format-u.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="饼状图format"/>
+    <view class="charts-box">
+      <!-- 注意：因各小程序及app端通过组件均不能传递function类型参数，组件内所有formatter方法，均需使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function -->
+      <!-- 饼图的format需要挂到chartData中的series[i].format上，例如pieFormatDemo.series[i].format="pieDemo"。当使用localdata数据渲染图表时，因series是组件自动拼接的，暂时不支持使用format -->
+      <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
+    </view>
+    <qiun-title-bar title="Y轴format方法1(保留小数点及添加单位)"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :opts="{yAxis:{data:[{tofix:3,unit:'万元',min:0,max:200}]}}" :chartData="chartsDataLine1" />
+    </view>
+    <qiun-title-bar title="Y轴format方法2(自定义)"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :opts="{yAxis:{data:[{format:'yAxisDemo1'}]}}" :chartData="chartsDataLine1" />
+    </view>
+    <qiun-title-bar title="X轴format方法"/>
+    <view class="charts-box">
+      <qiun-data-charts type="area" :opts="{xAxis:{format:'xAxisDemo1'}}" :chartData="chartsDataLine1" />
+    </view>
+    <qiun-title-bar title="series数据点format"/>
+    <view class="charts-box">
+      <!-- series的format需要在chartData.series中指定，注意，因为组件监听了chartData，只要有数据变化，就会触发更新，不要用循环chartData绑定的变量，需要一次性整体赋值给chartData！！！ -->
+      <qiun-data-charts type="line" :chartData="chartsDataColumn2"/>
+    </view>
+    <qiun-title-bar title="临时增加的tooltip提示窗format" />
+    <view class="charts-box"> 
+      <!-- 此方法展示在引用的config-ucharts.js中动态添加tooltip的formatter（APP不能实现） -->
+      <qiun-data-charts
+        type="column"
+        :chartData="chartsDataLine1"
+        :tooltipFormat="tooltipFormatTemp"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+//下面是uCharts的配置文件及qiun-data-charts组件的公用中转参数，可以从本配置文件中获取uCharts实例、opts配置、format配置（APP端因采用renderjs无法从此配置文件获取uCharts实例）
+//***并不是所有的页面都需要引用这个文件***引入这个configjs是为了获取组件的uCharts实例，从而操作uCharts的一些方法，例如手动显示tooltip及一些其他uCharts包含的方法及事件。
+//再说一遍，只能在H5内使用，APP不行，APP不行，APP不行
+import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
+
+export default {
+  data() {
+    return {
+      chartsDataLine1: {},
+      chartsDataColumn2: {},
+      chartsDataPie1:{},
+      tooltipFormatTemp:"tooltipTemp1"
+    };
+  },
+  onLoad() {
+    //tooltipFormat临时自定义的示例（APP端不能这么做，只能在config-ucharts.js内预先定义），item, category, index, opts详细解释看文档https://demo.ucharts.cn的帮助页
+    uCharts.formatter[this.tooltipFormatTemp] = function(item, category, index, opts) {
+      //只有第一组数据和其他组别不一样，想要其他的请自由发挥
+      if (index === 0) {
+        return '第一组数据' + item.data + '年';
+      } else {
+        return '2016年以后的' + item.data + '天';
+      }
+    };
+    //模拟从服务器获取数据
+    this.getServerData()
+    
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+        
+        //数据点格式化示例
+        //使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function 
+      	let columnFormatDemo=JSON.parse(JSON.stringify(demodata.Column))
+        for (var i = 0; i < columnFormatDemo.series.length; i++) {
+          columnFormatDemo.series[i].format="seriesDemo1"
+        }
+        this.chartsDataColumn2=columnFormatDemo
+        
+        //饼图格式化示例
+        //使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function 
+        let pieFormatDemo=JSON.parse(JSON.stringify(demodata.PieA))
+        for (var i = 0; i < pieFormatDemo.series.length; i++) {
+          pieFormatDemo.series[i].format="pieDemo"
+        }
+        this.chartsDataPie1=pieFormatDemo
+        
+      }, 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/index/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <view class="content">
+    <block v-for="(item, index) in list" :key="index">
+      <view class="list-box" @tap="gotourl(item.url)">{{item.name}}</view>
+    </block>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {name:"全端uCharts渲染图表",url:"../ucharts/ucharts"},
+        {name:"H5、App用ECharts，其他端用uCharts",url:"../echarts/echarts"},
+        {name:"uniCloud数据渲染图表",url:"../unicloud/unicloud"},
+        {name:"动态更新数据示例",url:"../updata/updata"},
+        {name:"图表交互示例",url:"../other/other"},
+        {name:"uCharts的formatter用法",url:"../format-u/format-u"},
+        {name:"ECharts的formatter用法",url:"../format-e/format-e"},
+        {name:"Tab选项卡切换示例",url:"../tab/tab"},
+        {name:"特殊布局示例",url:"../layout/layout"},
+        {name:"原生用法示例（非组件）",url:"../canvas/canvas"},
+      ],
+    }
+  },
+  onReady() {
+  },
+  methods: {
+    gotourl(url) {
+      uni.navigateTo({
+          url: url
+      });
+    },
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  padding-bottom: 40px;
+}
+.list-box{
+  text-align: center;
+  margin-top: 40px;
+  line-height: 40px;
+  width: 80%;
+  border: 1 px solid #317ac3;
+  border-radius: 5px;
+  background: #409EFF;
+  font-size: 20px;
+  color: #FFFFFF;
+}
+</style>