添加数据统计静态页面

pages/user/newReport.vue

@@ -1,8 +1,267 @@
 <template>
 	<view class="content">
-		<view class="header">
-			<image src="../../static/img/tjbgc.png" mode="widthFix" class="bgc"></image>
+		<view class="status_bar"></view>
+		<view class="top-nav">
+			<u-icon name="arrow-left" size="38" class="back" @click="back"></u-icon>
+			<view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
+				全部
+			</view>
+			<view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
+				新季
+			</view>
 		</view>
+		<view class="content1 content-item">
+			<view class="title">
+				收支核算 <u-icon :name="iconName1" size="30" style="margin-left: 10rpx;"
+					@click="foldClcik(['fade', 'slide-top'],1)">
+				</u-icon>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent1">
+				<u-line color="#EEEEEE" />
+				<view class="row1 mtb40">
+					<view class="left">
+						2022.06
+					</view>
+					<view class="right">
+						<text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
+							按月
+						</text>
+						<text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
+					</view>
+				</view>
+				<view class="row2">
+					<view class="text">
+						收入(元)
+					</view>
+					<view class="price">
+						73923475.30
+					</view>
+				</view>
+				<view class="row3">
+					<view class="left">
+						<view class="text">
+							支出(元)
+						</view>
+						<view class="number">
+							676234.42
+						</view>
+					</view>
+					<view class="center">
+
+					</view>
+					<view class="right">
+						<view class="text">
+							差额(元)
+						</view>
+						<view class="number">
+							676234.42
+						</view>
+					</view>
+				</view>
+				<view class="row4">
+					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true" />
+				</view>
+			</uni-transition>
+
+		</view>
+		<view class="content2 content-item">
+			<view class="title">
+				合同数据<u-icon :name="iconName2" size="30" style="margin-left: 10rpx;"
+					@click="foldClcik(['fade', 'slide-top'],2)">
+				</u-icon>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent2">
+				<u-line color="#EEEEEE" />
+				<view class="row1 flex jcsb mtb40">
+					<view class="left title-lv2">
+						数量统计
+					</view>
+					<view class="right-btn">
+						合同明细
+					</view>
+				</view>
+				<!-- 		<view class="row2 flex jcse">
+					<view class="left flex alc">
+						<view class="color1"></view>
+						<text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
+					</view>
+					<view class="right flex alc">
+						<view class="color2"></view>
+						<text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
+					</view>
+				</view> -->
+				<view class="row3">
+					<qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
+				</view>
+				<view class="row4 flex jcsb mtb40">
+					<view class="left title-lv2">
+						利润核算
+					</view>
+					<view class="right-btn">
+						利润明细
+					</view>
+				</view>
+				<view class="row5">
+					<view class="left">
+						<u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
+							@click="yearClick('1')">
+						</u-icon>
+						<text @click="showYear=true">{{year}}</text>
+						<u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
+							:color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
+						</u-icon>
+						<u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
+							:color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
+						</u-icon>
+					</view>
+					<view class="right">
+						单位：元
+					</view>
+				</view>
+				<view class="row6">
+					<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
+				</view>
+			</uni-transition>
+		</view>
+		<view class="content3 content-item">
+			<view class="title flex jcsb">
+				<view class="">
+					仓储数据<u-icon :name="iconName3" size="30" style="margin-left: 10rpx;"
+						@click="foldClcik(['fade', 'slide-top'],3)">
+					</u-icon>
+				</view>
+				<view class="right-btn">
+					库存明细
+				</view>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent3">
+				<u-line color="#EEEEEE" />
+				<view class="row1 flex jcsb mtb40">
+					<view class="left title-lv2">
+						库存储量
+					</view>
+					<view class="right">
+						单位：吨
+					</view>
+				</view>
+				<view class="row2">
+					<qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" />
+				</view>
+				<view class="row3">
+					<view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
+						<view class="flex alc">
+							<image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
+							<text>{{item.name}}</text>
+						</view>
+						<view class="number">
+							{{item.number}}
+						</view>
+					</view>
+				</view>
+				<view class="row5 flex jcsb mtb40">
+					<view class="left title-lv2">
+						当期货值
+					</view>
+					<view class="right">
+						单位：元
+					</view>
+				</view>
+				<view class="row6">
+					<qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" />
+				</view>
+				<view class="row7">
+					<view class="left title-lv2" style="margin: 30rpx;">
+						平均成本
+					</view>
+					<view class="list-item" v-for="item in averageCostList">
+						<view class="flex jcsb alc">
+							<view class="left">
+								{{item.name}}
+							</view>
+							<view class="">
+								{{item.number}}
+							</view>
+						</view>
+
+					</view>
+				</view>
+			</uni-transition>
+		</view>
+		<view class="content4 content-item">
+			<view class="title flex jcsb">
+				<view class="">
+					今日入库<u-icon :name="iconName4" size="30" style="margin-left: 10rpx;"
+						@click="foldClcik(['fade', 'slide-top'],4)">
+					</u-icon>
+				</view>
+				<view class="right-btn">
+					入库明细
+				</view>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent4">
+				<view class="row1">
+					<qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" />
+				</view>
+			</uni-transition>
+		</view>
+		<view class="content5 content-item">
+			<view class="title">
+				在途数据<u-icon :name="iconName5" size="30" style="margin-left: 10rpx;"
+					@click="foldClcik(['fade', 'slide-top'],5)">
+				</u-icon>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent5">
+				<view class="row1 days-nav">
+					<view class="" v-for="(item, index) in dayList">
+						{{item}}
+					</view>
+				</view>
+				<qiun-data-charts type="pie" :opts="opts7" :chartData="chartData7" />
+			</uni-transition>
+		</view>
+		<view class="content6 content-item">
+			<view class="title">
+				用户增长<u-icon :name="iconName6" size="30" style="margin-left: 10rpx;"
+					@click="foldClcik(['fade', 'slide-top'],6)">
+				</u-icon>
+			</view>
+			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+				:show="isSHowContent6">
+				<view class="row1 flex jcsb">
+					<view class="left">
+						app注册
+					</view>
+					<view class="right">
+						<text>合计：</text>
+						<text style="color: #EC6666;">23444</text>
+						<text>人</text>
+					</view>
+				</view>
+				<view class="row2">
+					<qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
+				</view>
+
+				<view class="row1 flex jcsb">
+					<view class="left">
+						粮脉入驻
+					</view>
+					<view class="right">
+						<text>合计：</text>
+						<text style="color: #22C572;">23444</text>
+						<text>人</text>
+					</view>
+				</view>
+				<view class="row2">
+					<qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
+				</view>
+			</uni-transition>
+		</view>
+		<u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
 	</view>
 </template>
 
@@ -14,31 +273,824 @@
 		},
 		data() {
 			return {
+				dayList: ['1天', '7天', '30天'],
+				averageCostList: [{
+						name: '玉米',
+						number: '2000.00'
+					},
+					{
+						name: '玉米(潮粮)',
+						number: '2000.00'
+					},
+					{
+						name: '高粱',
+						number: '2000.00'
+					},
+					{
+						name: '高粱(潮粮)',
+						number: '2000.00'
+					},
+					{
+						name: '小麦',
+						number: '2000.00'
+					},
+					{
+						name: '大豆',
+						number: '2000.00'
+					},
+				],
+				InventoryList: [{
+						name: '合计储量',
+						number: '1000.00',
+						src: '../../static/img/cl.png'
+					}, {
+						name: '采购待执行',
+						number: '1000.00',
+						src: '../../static/img/cg.png'
+					},
+					{
+						name: '销待执行售',
+						number: '1000.00',
+						src: '../../static/img/xs.png'
+					},
+					{
+						name: '头寸',
+						number: '1000.00',
+						src: '../../static/img/tc.png'
+					},
+
+				],
+				year: 2022,
+				selector: [2020, 2021, 2022],
+				showYear: false,
+				iconName1: 'arrow-up-fill',
+				iconName2: 'arrow-up-fill',
+				iconName3: 'arrow-up-fill',
+				iconName4: 'arrow-up-fill',
+				iconName5: 'arrow-up-fill',
+				iconName6: 'arrow-up-fill',
+				styles: {},
+				modeClass: 'fade',
+				isSHowContent1: false,
+				isSHowContent2: false,
+				isSHowContent3: false,
+				isSHowContent4: false,
+				isSHowContent5: true,
+				isSHowContent6: true,
+				chartData: {},
+				chartData1: {},
+				chartData3: {},
+				chartData4: {},
+				chartData5: {},
+				chartData6: {},
+				chartData7: {},
+				chartData8: {},
+				chartData9: {},
+				opts: {
+					enableScroll: true,
+					color: ["#E84A55", "#22C572"],
+					padding: [15, 15, 0, 15],
+					dataPointShapeType: "hollow",
+					legend: {},
+					xAxis: {
+						disableGrid: true,
+						itemCount: 6,
+
+					},
+					yAxis: {
+						gridType: "solid",
+						data: [{
+							// disabled: true,
+							axisLine: false
+						}]
 
+					},
+					extra: {
+						area: {
+							type: "straight",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: false
+						}
+					}
+				},
+				opts2: {
+					color: ["#D2F3E2", "#22C572"],
+					padding: [15, 30, 0, 5],
+					legend: {},
+					xAxis: {
+						boundaryGap: "justify",
+						disableGrid: false,
+						min: 0,
+						axisLine: false,
+						max: 40
+					},
+					yAxis: {},
+					extra: {
+						bar: {
+							type: "group",
+							width: 30,
+							meterBorde: 1,
+							meterFillColor: "#FFFFFF",
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							// linearType: "custom",
+							barBorderCircle: true,
+							seriesGap: 2,
+							categoryGap: 6
+						}
+					}
+				},
+				opts3: {
+					color: ["#8D9EE9"],
+					padding: [15, 15, 0, 5],
+					legend: {},
+					xAxis: {
+						disableGrid: true
+					},
+					yAxis: {
+						data: [{
+							min: 0
+						}]
+					},
+					extra: {
+						column: {
+							type: "group",
+							width: 15,
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							linearType: "custom",
+							seriesGap: 5,
+							linearOpacity: 0.5,
+							barBorderCircle: true,
+							customColor: [
+								"#8D9EE9",
+								"#8D9EE9"
+							]
+						}
+					}
+				},
+				opts4: {
+					padding: [15, 30, 0, 5],
+					legend: {
+						show: false,
+					},
+					xAxis: {
+						boundaryGap: "justify",
+						disableGrid: false,
+						min: 0,
+						axisLine: false,
+						max: 40
+					},
+					yAxis: {},
+					extra: {
+						bar: {
+							type: "group",
+							width: 15,
+							meterBorde: 1,
+							meterFillColor: "#FFFFFF",
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							// linearType: "custom",
+							barBorderCircle: true,
+							seriesGap: 2,
+							categoryGap: 6
+						}
+					}
+				},
+				opts5: {
+					color: ["#8D9EE9"],
+					padding: [15, 15, 0, 5],
+					legend: {
+						show: false,
+					},
+					xAxis: {
+						disableGrid: true
+					},
+					yAxis: {
+						data: [{
+							min: 0
+						}]
+					},
+					extra: {
+						column: {
+							type: "group",
+							width: 15,
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							// linearType: "custom",
+							seriesGap: 5,
+							// linearOpacity: 0.5,
+							barBorderCircle: true,
+							customColor: [
+								"#8D9EE9",
+								"#8D9EE9"
+							]
+						}
+					}
+				},
+				opts6: {
+					rotate: false,
+					rotateLock: false,
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: true,
+					legend: {
+						show: true,
+						position: "right",
+						lineHeight: 25
+					},
+					title: {
+						name: "",
+						fontSize: 15,
+						color: "#666666"
+					},
+					subtitle: {
+						name: "",
+						fontSize: 25,
+						color: "#7cb5ec"
+					},
+					extra: {
+						ring: {
+							ringWidth: 20,
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: false,
+							borderWidth: 3,
+							borderColor: "#FFFFFF"
+						}
+					}
+				},
+				opts7: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					extra: {
+						pie: {
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 3,
+							borderColor: "#FFFFFF",
+							linearType: "custom"
+						}
+					}
+				},
+				opts8: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [15, 15, 0, 15],
+					legend: {},
+					xAxis: {
+						disableGrid: true
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2
+					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true
+						}
+					}
+				},
+				opts9: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [15, 15, 0, 15],
+					legend: {},
+					xAxis: {
+						disableGrid: true
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2
+					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true
+						}
+					}
+				},
+				textIndex: 1,
+				index: 1,
 				background: {
 					backgroundColor: '#2E303A',
 					backgroundColor: 'red',
 				},
+				nowYear: ''
 
 			}
 		},
 		onLoad: function(option) {
-
+			this.nowYear = new Date().getFullYear()
 		},
 		destroyed() {
 
 		},
 		onUnload() {
 
+		},
+		onReady() {
+			this.getServerData();
 		},
 		methods: {
+			yearClick(type) {
+
+				if (type == 1) {
+					this.year--
+				} else {
+					this.year++
+				}
+			},
+			foldClcik(type, index) {
+				switch (index) {
+					case 1:
+						this.isSHowContent1 = !this.isSHowContent1
+						this.iconName1 = this.isSHowContent1 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+					case 2:
+						this.isSHowContent2 = !this.isSHowContent2
+						this.iconName2 = this.isSHowContent2 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+					case 3:
+						this.isSHowContent3 = !this.isSHowContent3
+						this.iconName3 = this.isSHowContent3 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+					case 4:
+						this.isSHowContent4 = !this.isSHowContent4
+						this.iconName4 = this.isSHowContent4 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+					case 5:
+						this.isSHowContent5 = !this.isSHowContent5
+						this.iconName5 = this.isSHowContent5 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+					case 6:
+						this.isSHowContent6 = !this.isSHowContent6
+						this.iconName6 = this.isSHowContent6 ? "arrow-up-fill" : 'arrow-down-fill'
+						break;
+
+
+				}
+
+
+				this.modeClass = type
+			},
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+						let res = {
+							categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
+							series: [{
+									name: "收入",
+									data: [70, 40, 65, 100, 44, 68, 90, 240]
+								}, {
+									name: "支出",
+									data: [35, 8, 25, 37, 4, 20, 56, 30]
+								}
+
+							]
+						};
+						this.chartData = JSON.parse(JSON.stringify(res));
+						let res1 = {
+							categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+							series: [{
+									name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
+									data: [35, 36, 31, 33, 13, 34],
+									legendShape: "circle",
+								},
+								{
+									name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
+									data: [18, 27, 21, 24, 6, 28],
+									legendShape: "circle"
+								}
 
+							]
+						};
+						this.chartData1 = JSON.parse(JSON.stringify(res1));
+						let res3 = {
+							categories: ["销售", "采购", "收购", "代收", "代储"],
+							series: [{
+								name: "利润金额",
+								data: [35, 36, 31, 33, 13]
+							}]
+						};
+						this.chartData3 = JSON.parse(JSON.stringify(res3));
+						let res4 = {
+							categories: ["小麦", "高粱（潮粮）", "高粱", "玉米（潮粮）", "玉米"],
+							series: [{
+								name: '库存储量',
+								data: [{
+										value: 35,
+										color: "#FFBB6E"
+									},
+									{
+										value: 36,
+										color: "#8D9EE9"
+									}, {
+										value: 31,
+										color: "#FF8B95"
+									}, {
+										value: 33,
+										color: "#38CA80"
+									},
+									{
+										value: 13,
+										color: "#FFDD85"
+									}
+								]
+							}]
+						};
+						this.chartData4 = JSON.parse(JSON.stringify(res4));
+						let res5 = {
+							categories: ["小麦", "高粱（潮粮）", "高粱", "玉米（潮粮）", "玉米"],
+							series: [{
+								name: "利润金额",
+								data: [{
+										value: 35,
+										color: "#FFBB6E"
+									},
+									{
+										value: 36,
+										color: "#8D9EE9"
+									}, {
+										value: 31,
+										color: "#FF8B95"
+									}, {
+										value: 33,
+										color: "#38CA80"
+									},
+									{
+										value: 13,
+										color: "#FFDD85"
+									}
+								]
+							}]
+						};
+						this.chartData5 = JSON.parse(JSON.stringify(res5));
+						let res6 = {
+							series: [{
+								data: [{
+									"name": "一班",
+									"value": 50
+								}, {
+									"name": "二班",
+									"value": 30
+								}, {
+									"name": "三班",
+									"value": 20
+								}, {
+									"name": "四班",
+									"value": 18
+								}, {
+									"name": "五班",
+									"value": 8
+								}]
+							}]
+						};
+						this.chartData6 = JSON.parse(JSON.stringify(res6));
+						let res7 = {
+							series: [{
+								data: [{
+									"name": "一班",
+									"value": 50
+								}, {
+									"name": "二班",
+									"value": 30
+								}, {
+									"name": "三班",
+									"value": 20
+								}, {
+									"name": "四班",
+									"value": 18
+								}, {
+									"name": "五班",
+									"value": 8
+								}]
+							}]
+						};
+						this.chartData7 = JSON.parse(JSON.stringify(res7));
+						let res8 = {
+							categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+							series: [{
+									name: "成交量A",
+									data: [35, 8, 25, 37, 4, 20]
+								},
+								{
+									name: "成交量B",
+									data: [70, 40, 65, 100, 44, 68]
+								},
+								{
+									name: "成交量C",
+									data: [100, 80, 95, 150, 112, 132]
+								}
+							]
+						};
+						this.chartData8 = JSON.parse(JSON.stringify(res8));
+						let res9 = {
+							categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+							series: [{
+									name: "成交量A",
+									data: [35, 8, 25, 37, 4, 20]
+								},
+								{
+									name: "成交量B",
+									data: [70, 40, 65, 100, 44, 68]
+								},
+								{
+									name: "成交量C",
+									data: [100, 80, 95, 150, 112, 132]
+								}
+							]
+						};
+						this.chartData9 = JSON.parse(JSON.stringify(res9));
+					},
+					500);
+			},
+			back() {
+				uni.navigateBack()
+			},
+			navClick(val) {
+				this.index = val
+				this.getServerData();
+			},
+			accounting(val) {
+				this.textIndex = val
+			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.bgc {
-		width: 100vw;
+	.flex {
+		display: flex;
+	}
+
+	.alc {
+		align-items: center;
+	}
+
+	.jcse {
+		justify-content: space-evenly;
+	}
+
+	.jcsb {
+		justify-content: space-between;
+	}
+
+	.mtb40 {
+		margin: 40rpx 0;
+	}
+
+	.title-lv2 {
+		font-weight: bold;
+		color: #333333;
+	}
+
+	.status_bar {
+		height: var(--status-bar-height);
+		width: 100%;
+	}
+
+	.top-nav {
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		position: relative;
+	}
+
+	.back {
+		position: absolute;
+		left: 20rpx;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+	}
+
+	.top-nav {
+		font-size: 36rpx;
+		background: white;
+		padding: 20rpx;
+	}
+
+	.nav-active {
+		font-weight: 700;
+		position: relative;
+	}
+
+	.nav-active:after {
+		content: "";
+		position: absolute;
+		bottom: -20rpx;
+		left: 0;
+		right: 0;
+		margin: auto;
+		height: 10rpx;
+		width: 60%;
+		background: #262626;
+		border-radius: 40rpx;
+	}
+
+	.content-item {
+		background: white;
+		margin: 20rpx 20rpx 0 20rpx;
+		border-radius: 20rpx;
+		padding: 20rpx;
+		box-sizing: border-box;
+
+	}
+
+	.title {
+		margin-bottom: 22rpx;
+		font-size: 32rpx;
+		font-weight: 700;
+		color: #343434;
+	}
+
+	.right-btn {
+		width: 120rpx;
+		height: 42rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #F1F1F1;
+		border-radius: 30px;
+		font-size: 22rpx;
+		color: #707575;
+	}
+
+	.content1 {
+		.content1-wrap {}
+
+		.row1 {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				color: #868686;
+			}
+
+			.text {
+				margin-left: 38rpx;
+				color: #2E303A;
+			}
+
+			.text-active {
+				// margin-left: 38rpx;
+				color: #FFF;
+				background: #2E303A;
+				padding: 11rpx 26rpx;
+				border-radius: 10rpx;
+			}
+		}
+
+		.row2 {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.text {
+				color: #636363;
+				margin-bottom: 10rpx
+			}
+
+			.price {
+				font-size: 56rpx;
+				font-weight: 700;
+				color: #D79C58;
+			}
+
+		}
+
+		.row3 {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 27rpx;
+			align-items: center;
+
+			.center {
+				width: 2px;
+				height: 61rpx;
+				border: 2rpx solid #EEEEEE;
+			}
+
+			.left,
+			.right {
+				// background: green;
+				width: calc(50% - 1px);
+				text-align: center;
+
+				.text {
+					color: #636363
+				}
+
+				.number {
+					margin-top: 12rpx;
+					font-size: 34rpx;
+					font-weight: 700;
+					color: #343434;
+				}
+			}
+		}
+
+		.row4 {
+			margin-top: 20rpx;
+		}
+	}
+
+	.content2 {
+		.row1 {}
+
+		.row2 {
+			color: #707575;
+			font-size: 22rpx;
+
+			.color1 {
+				width: 16rpx;
+				height: 12rpx;
+				background: #D2F3E2;
+				border-radius: 7rpx;
+				margin-right: 10rpx;
+			}
+
+			.color2 {
+				width: 16rpx;
+				height: 12rpx;
+				background: #2CC778;
+				border-radius: 7rpx;
+				margin-right: 10rpx;
+			}
+		}
+
+		.row5 {
+			display: flex;
+			justify-content: space-between;
+			color: #9E9E9E;
+
+			.left {}
+		}
+	}
+
+	.content3 {
+		.right {
+			color: #9E9E9E;
+		}
+
+		.row3 {
+			padding: 10rpx 25rpx 30rpx 25rpx;
+			border-radius: 15rpx;
+			margin-top: 20rpx;
+			background: #FAFAFA;
+
+
+
+			.list-item {
+				margin-top: 20rpx;
+
+				.number {
+					font-weight: 700;
+				}
+			}
+		}
+
+		.row7 {
+			.list-item {
+				display: inline-block;
+				padding: 20rpx;
+				box-sizing: border-box;
+				background: #FAFAFA;
+				width: calc(50% - 40rpx);
+				margin: 20rpx;
+				border-radius: 8rpx;
+
+			}
+		}
+	}
+
+	.content5 {
+		.days-nav {
+			display: flex;
+			justify-content: space-evenly;
+		}
 	}
 </style>

uni_modules/qiun-data-charts/changelog.md

@@ -1,3 +1,104 @@
+## 2.4.4-20221102（2022-11-02）
+- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
+- 秋云图表组件 修复使用echarts时，初始化时宽高不正确的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
+- 秋云图表组件 修复uniapp的h5使用history模式时，无法加载echarts的bug
+- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出，方便一些特殊需求的交互获取数据。
+
+- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
+- uCharts.js 地图新增参数opts.series[i].fillOpacity，以透明度方式来设置颜色过度效果，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
+- uCharts.js 地图新增参数opts.extra.map.active，是否启用点击激活变色
+- uCharts.js 地图新增参数opts.extra.map.activeTextColor，是否启用点击激活变色
+- uCharts.js 地图新增渲染完成事件renderComplete
+- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
+- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
+- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小，默认opts.fontSize
+- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色，默认#FFFFFF
+- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度，默认0
+- uCharts.js 进度条新增参数opts.extra.arcbar.direction，动画方向，可选值为cw顺时针、ccw逆时针
+- uCharts.js 混合图新增参数opts.extra.mix.line.width，折线的宽度，默认2
+- uCharts.js 修复tooltip开启horizentalLine水平横线标注时，图表显示错位的bug
+- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
+- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
+- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
+- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
+
+## 报错TypeError: Cannot read properties of undefined (reading 'length')
+1. 如果是uni-modules版本组件，请先登录HBuilderX账号；
+2. 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
+3. 如果是cli项目请使用码云上的非uniCloud版本组件；
+4. 或者添加uniCloud的依赖；
+5. 或者使用原生uCharts；
+## 2.4.3-20220505（2022-05-05）
+- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时，再次赋值后画布闪动的bug
+- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
+- uCharts.js 雷达图新增参数opts.extra.radar.gridEval，数据点位网格抽希，默认1
+- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel，	是否显示刻度点值，默认false
+- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix，刻度点值小数位数，默认0
+- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow，是否显示末端刻度圆点，默认false
+- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius，刻度圆点的半径，默认3
+- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor，刻度圆点的颜色，默认#cccccc
+- uCharts.js 雷达图新增参数opts.extra.radar.linearType，渐变色类型，可选值"none"关闭渐变,"custom"开启渐变
+- uCharts.js 雷达图新增参数opts.extra.radar.customColor，自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
+- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
+- uCharts.js 柱状图中温度计式图标，优化支持全圆角类型，修复边框有缝隙的bug，详见官网【演示】中的温度计图表
+- uCharts.js 柱状图新增参数opts.extra.column.activeWidth，当前点击柱状图的背景宽度，默认一个单元格单位
+- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
+- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度，默认0.2
+- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelText，自定义标签文字，避免formatter格式化的繁琐，详见官网【演示】中的饼图
+- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelShow，自定义是否显示某一个指示标签，避免因饼图类别太多导致标签重复或者居多导致图形变形的问题，详见官网【演示】中的饼图
+- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText（与series.name同级）自定义图例显示文字的方法
+- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参，统一为fromatter:function(value,index,opts){}
+- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
+- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
+- 【官网模板】增加外部自定义图例与图表交互的例子，[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
+
+## 注意：非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下，请到码云更新非 unimodules 版本组件，[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
+> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
+## 2.4.2-20220421（2022-04-21）
+- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
+## 2.4.2-20220420（2022-04-20）
+## 重要！此版本uCharts新增了很多功能，修复了诸多已知问题
+- 秋云图表组件 新增onzoom开启双指缩放功能（仅uCharts），前提需要直角坐标系类图表类型，并且ontouch为true、opts.enableScroll为true，详见实例项目K线图
+- 秋云图表组件 新增optsWatch是否监听opts变化，关闭optsWatch后，动态修改opts不会触发图表重绘
+- 秋云图表组件 修复开启canvas2d功能后，动态更新数据后画布闪动的bug
+- 秋云图表组件 去除directory属性，改为自动获取echarts.min.js路径（升级不受影响）
+- 秋云图表组件 增加getImage()方法及@getImage事件，通过ref调用getImage()方法获，触发@getImage事件获取当前画布的base64图片文件流。
+- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
+- 秋云图表组件 新增加【非uniCloud】版本组件，避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题，请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)，或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
+- uCharts.js 新增dobuleZoom双指缩放功能
+- uCharts.js 新增山峰图type="mount"，数据格式为饼图类格式，不需要传入categories，具体详见新版官网在线演示
+- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
+- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
+- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts)，方便格式化时有更多参数可用
+- uCharts.js 标记线功能增加labelText自定义显示文字，增加labelAlign标签显示位置（左侧或右侧），增加标签显示位置微调labelOffsetX、labelOffsetY
+- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
+- uCharts.js 修复X轴开启disabled后，X轴仍占用空间的bug
+- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后，X轴文字与滚动条重叠的bug
+- uCharts.js 增加X轴rotateAngle文字旋转自定义角度，取值范围(-90至90)
+- uCharts.js 修复地图文字标签层级显示不正确的bug
+- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
+- uCharts.js 修复当opts.padding上边距为0时，Y轴顶部刻度标签位置不正确的bug
+
+## 另外我们还开发了各大原生小程序组件，已发布至码云和npm
+[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
+[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
+
+## 对于原生uCharts文档我们已上线新版官方网站，详情点击下面链接进入官网
+[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
+## 2.3.7-20220122（2022-01-22）
+## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
+- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
+## 2.3.7-20220118（2022-01-18）
+## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
+## 2.3.67-20220118（2022-01-18）
+- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
+1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
+2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
+3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
+## 2.3.6-20220111（2022-01-11）
+- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
+## 2.3.6-20211201（2021-12-01）
+- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
 ## 2.3.5-20211014（2021-10-15）
 - uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
 ## 2.3.4-20211012（2021-10-12）

uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue

@@ -1,5 +1,5 @@
 <!-- 
- * qiun-data-charts 秋云高性能跨全端图表组件 v2.3.5-20211014
+ * qiun-data-charts 秋云高性能跨全端图表组件
  * Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.
  * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  * 复制使用请保留本段注释，感谢支持开源！
@@ -97,7 +97,7 @@
     </block>
     <!-- #endif -->
     <!-- 其他小程序通过vue渲染图表 -->
-    <!-- #ifdef MP-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN -->
+    <!-- #ifdef MP-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN || MP-KUAISHOU || MP-LARK || MP-JD -->
     <block v-if="type2d">
       <view v-if="ontouch" @tap="_tap">
         <canvas
@@ -156,7 +156,7 @@
 </template>
 
 <script>
-import uChartsMp from '../../js_sdk/u-charts/u-charts.js';
+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';
@@ -175,7 +175,7 @@ function deepCloneAssign(origin = {}, ...args) {
 
 function formatterAssign(args,formatter) {
   for (let key in args) {
-    if(args[key] !== null && typeof args[key] === 'object'){
+    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;
@@ -247,7 +247,7 @@ export default {
     },
     background: {
       type: String,
-      default: 'none'
+      default: 'rgba(0,0,0,0)'
     },
     animation: {
       type: Boolean,
@@ -306,6 +306,14 @@ export default {
       type: Boolean,
       default: false
     },
+    optsWatch: {
+      type: Boolean,
+      default: true
+    },
+    onzoom: {
+      type: Boolean,
+      default: false
+    },
     ontap: {
       type: Boolean,
       default: true
@@ -373,6 +381,12 @@ export default {
     tapLegend: {
       type: Boolean,
       default: true
+    },
+    menus: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
   data() {
@@ -393,7 +407,9 @@ export default {
       cHeight: 250,
       showchart: false,
       echarts: false,
-      echartsResize:false,
+      echartsResize:{
+        state:false
+      },
       uchartsOpts: {},
       echartsOpts: {},
       drawData:{},
@@ -420,16 +436,17 @@ export default {
     if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
       this.type2d = false;
     }else{
+      this.type2d = true;
       this.pixel = systemInfo.pixelRatio;
-      if (this.canvasId === 'uchartsid' || this.canvasId == '') {
-        console.log('[uCharts]:开启canvas2d模式，必须指定canvasId，否则会出现偶尔获取不到dom节点的问题！');
-      }
     }
     // #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;
@@ -480,7 +497,7 @@ export default {
           return;
         }
         if (_this.echarts) {
-          _this.echartsResize = !_this.echartsResize;
+          _this.echartsResize.state = !_this.echartsResize.state;
         } else {
           _this.resizeHandler();
         }
@@ -505,11 +522,11 @@ export default {
       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._clearChart();
               this.showchart = false;
               this.mixinDatacomErrorMessage = null;
             }
@@ -543,7 +560,7 @@ export default {
     optsProps: {
       handler(val, oldval) {
         if (typeof val === 'object') {
-          if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false) {
+          if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
             this.checkData(this.drawData);
           }
         } else {
@@ -575,7 +592,7 @@ export default {
       if (val === true && this.mixinDatacomLoading === false) {
         setTimeout(() => {
           this.mixinDatacomErrorMessage = null;
-          this.echartsResize = !this.echartsResize;
+          this.echartsResize.state = !this.echartsResize.state;
           this.checkData(this.drawData);
         }, 200);
       }
@@ -848,10 +865,12 @@ export default {
     },
     _clearChart() {
       let cid = this.cid
-      if (this.echrts !== true) {
-        const ctx = uni.createCanvasContext(cid, this);
-        ctx.clearRect(0, 0, this.cWidth, this.cHeight);
-        ctx.draw();
+      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() {
@@ -870,12 +889,13 @@ export default {
             this.cWidth = data.width;
             this.cHeight = data.height;
             if(this.echarts !== true){
-              cfu.option[cid].background = this.background == 'none' ? '#FFFFFF' : this.background;
+              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;
@@ -918,14 +938,14 @@ export default {
                         const canvas = res[0].node;
                         const ctx = canvas.getContext('2d');
                         cfu.option[cid].context = ctx;
-                        canvas.width = data.width * this.pixel;
-                        canvas.height = data.height * this.pixel;
-                        canvas._width = data.width * this.pixel;
-                        canvas._height = data.height * this.pixel;
                         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();
@@ -977,34 +997,55 @@ export default {
     	    //#endif
     	    //#ifndef H5
     	      uni.saveImageToPhotosAlbum({
-    	          filePath: res.tempFilePath,
-    	          success: function () {
-    	              uni.showToast({
-    	                  title: '保存成功',
-    	                  duration: 2000
-    	              });
-    	          }
+              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 uChartsMp(cfu.option[cid]);
+      cfu.instance[cid] = new uCharts(cfu.option[cid]);
       cfu.instance[cid].addEventListener('renderComplete', () => {
-        this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid}});
+        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}});
+        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}});
+        this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});
       });
     },
     _updataUChart(cid) {
@@ -1118,31 +1159,35 @@ export default {
     _touchStart(e) {
       let cid = this.cid
       lastMoveTime=Date.now();
-      if(cfu.option[cid].enableScroll === true){
+      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}});
+      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;
-      if (duration < Math.floor(1000 / 60)) return;//每秒60帧
+      let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
+      if (duration < Math.floor(1000 / touchMoveLimit)) return;//每秒60帧
       lastMoveTime = currMoveTime;
-      if(cfu.option[cid].enableScroll === true){
+      if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
         cfu.instance[cid].scroll(e);
       }
-      this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid}});
       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){
+      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}});
+      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)
       }
@@ -1189,7 +1234,7 @@ function rddeepCloneAssign(origin = {}, ...args) {
 
 function rdformatterAssign(args,formatter) {
   for (let key in args) {
-    if(args[key] !== null && typeof args[key] === 'object'){
+    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;
@@ -1215,7 +1260,7 @@ export default {
     // #endif
     setTimeout(()=>{
       if(this.rid === null){
-        this.$ownerInstance.callMethod('getRenderType')
+        this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')
       }
     },200)
   },
@@ -1230,7 +1275,7 @@ export default {
     ecinit(newVal, oldVal, owner, instance){
       let cid = JSON.stringify(newVal.id)
       this.rid = cid
-      that[cid] = this.$ownerInstance
+      that[cid] = this.$ownerInstance || instance
       let eopts = JSON.parse(JSON.stringify(newVal))
       let type = eopts.type;
       //载入并覆盖默认配置
@@ -1240,19 +1285,22 @@ export default {
         cfe.option[cid] = rddeepCloneAssign({}, eopts);
       }
       let newData = eopts.chartData;
-      //挂载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(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{
@@ -1261,9 +1309,9 @@ export default {
         script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
         // #endif
         // #ifdef H5
-        const rooturl = window.location.origin 
-        const directory = instance.getDataset().directory
-        script.src = rooturl + directory + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
+        const { origin } = window.location
+        const rooturl = origin + process.env.BASE_URL
+        script.src = rooturl + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
         // #endif
         script.onload = this.newEChart
         document.head.appendChild(script)
@@ -1286,6 +1334,10 @@ export default {
             }))
             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{
@@ -1318,7 +1370,16 @@ export default {
         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) => {
@@ -1344,9 +1405,12 @@ export default {
       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
+      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)
@@ -1367,14 +1431,14 @@ export default {
       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}})
+        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}})
+        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}})
+        that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})
       });
     },
     updataUChart() {
@@ -1442,6 +1506,7 @@ export default {
       }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)
@@ -1457,15 +1522,18 @@ export default {
       let cid = this.rid
       let ontouch = cfu.option[cid].ontouch
       if(ontouch == false) return;
-      cfu.instance[cid].scrollStart(e)
-      that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid}})
+      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;
-      cfu.instance[cid].scroll(e)
-      that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid}})
+      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}
@@ -1474,13 +1542,19 @@ export default {
           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;
-      cfu.instance[cid].scrollEnd(e)
-      that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid}})
+      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
@@ -1489,10 +1563,11 @@ export default {
       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}})
+      that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
     },
     mouseMove(e) {
       let cid = this.rid
@@ -1502,10 +1577,11 @@ export default {
       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}})
+        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)
@@ -1519,10 +1595,11 @@ export default {
       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}})
+      that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
     },
   }
 }

uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js

@@ -324,7 +324,7 @@ const cfe = {
 			"data": [],
 			"radius": "55%",
 			"center": ['50%', '50%'],
-			"rosetype": 'area',
+			"roseType": 'area',
 		},
 	},
 	"funnel": {

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -43,22 +43,22 @@ const formatDateTime = (timeStamp, returnType)=>{
 
 const cfu = {
   //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
-	"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
-	"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
+	"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
+	"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
   //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
   //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
-	"categories":["line","column","bar","area","radar","gauge","candle","mix","demotype"],
+	"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
   //instance为实例变量承载属性，不要删除
   "instance":{},
   //option为opts及eopts承载属性，不要删除
   "option":{},
   //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
   "formatter":{
-    "yAxisDemo1":function(val){return val+'元'},
-    "yAxisDemo2":function(val){return val.toFixed(2)},
-    "xAxisDemo1":function(val){return val+'年'},
-    "xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
-    "seriesDemo1":function(val){return val+'元'},
+    "yAxisDemo1":function(val, index, opts){return val+'元'},
+    "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
+    "xAxisDemo1":function(val, index, opts){return val+'年';},
+    "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
+    "seriesDemo1":function(val, index, series, opts){return val+'元'},
     "tooltipDemo1":function(item, category, index, opts){
       if(index==0){
       	return '随便用'+item.data+'年'
@@ -66,7 +66,7 @@ const cfu = {
       	return '其他我没改'+item.data+'天'
       }
     },
-    "pieDemo":function(val, index, series){
+    "pieDemo":function(val, index, series, opts){
       if(index !== undefined){
         return series[index].name+'：'+series[index].data+'元'
       }
@@ -120,7 +120,7 @@ const cfu = {
 		"legend": {
 			"show": true,
 			"position": "right",
-      "lineHeight": 15,
+      "lineHeight": 25,
 		},
 		"title": {
 			"name": "收益率",
@@ -328,13 +328,30 @@ const cfu = {
 			"column": {
 				"type": "group",
 				"width": 30,
-				"meterBorde": 1,
-				"meterFillColor": "#FFFFFF",
 				"activeBgColor": "#000000",
 				"activeBgOpacity": 0.08
 			},
 		}
 	},
+  "mount":{
+  	"type": "mount",
+    "color": color,
+  	"padding": [15,15,0,5],
+  	"xAxis": {
+      "disableGrid": true,
+  	},
+  	"yAxis": {
+      "data":[{"min":0}]
+  	},
+  	"legend": {
+  	},
+  	"extra": {
+  		"mount": {
+  			"type": "mount",
+  			"widthRatio": 1.5,
+  		},
+  	}
+  },
   "bar":{
   	"type": "bar",
     "color": color,

uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md

@@ -1,12 +1,5 @@
 # uCharts JSSDK说明
-1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`98kb`。
-2、如果100kb的体积仍需压缩，请手动删除u-charts.js内您不需要的图表类型，如k线图candle。
+1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`120kb`。
+2、如果120kb的体积仍需压缩，请手到uCharts官网通过在线定制选择您需要的图表。
 3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
-3、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
-
-# v1.0转v2.0注意事项
-1、opts.colors变更为opts.color
-2、ring圆环图的扩展配置由extra.pie变更为extra.ring
-3、混合图借用的扩展配置由extra.column变更为extra.mix.column
-4、全部涉及到format的格式化属性变更为formatter
-5、不需要再传canvasId及$this参数，如果通过uChats获取context，可能会导致this实例混乱，导致小程序开发者工具报错。如果不使用qiun-data-charts官方组件，需要在new uCharts()实例化之前，自行获取canvas的上下文context（ctx），并传入new中的context（opts.context）。为了能跨更多的端，给您带来的不便敬请谅解。
+4、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。

uni_modules/qiun-data-charts/package.json

@@ -1,8 +1,8 @@
 {
   "id": "qiun-data-charts",
   "displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
-  "version": "2.3.5-20211014",
-  "description": "uCharts v2.3上线，支持nvue！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件",
+  "version": "2.4.4-20221102",
+  "description": "uCharts 新增双指缩放、新增山峰图！支持H5及APP用 ucharts echarts 渲染图表，uniapp可视化首选组件",
   "keywords": [
     "ucharts",
     "echarts",
@@ -12,13 +12,9 @@
 ],
   "repository": "https://gitee.com/uCharts/uCharts",
   "engines": {
-    "HBuilderX": "^3.1.0"
+    "HBuilderX": "^3.3.8"
   },
-  "dcloudext": {
-    "category": [
-        "前端组件",
-        "通用组件"
-    ],
+"dcloudext": {
     "sale": {
       "regular": {
         "price": "0.00"
@@ -35,7 +31,8 @@
       "data": "插件不采集任何数据",
       "permissions": "无"
     },
-    "npmurl": ""
+    "npmurl": "https://www.npmjs.com/~qiun",
+    "type": "component-vue"
   },
   "uni_modules": {
     "dependencies": [],
@@ -76,7 +73,7 @@
         },
         "Vue": {
             "vue2": "y",
-            "vue3": "u"
+            "vue3": "y"
         }
       }
     }

uni_modules/qiun-data-charts/readme.md

@@ -1,451 +1,102 @@
-## [uCharts官方网站](https://www.ucharts.cn)
-## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
-## [优秀的nvue全端组件与模版库nPro](https://ext.dcloud.net.cn/plugin?id=5169)
-## [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) 
-### [v1.0文档（将在9月30日作废，请尽快转v2.0）](http://doc.ucharts.cn)
-## [如何安装、更新 uni_modules 插件点这里，必看，必看，必看](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
-## 点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
-## 初次使用不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
-## <font color=#FF0000> 新手请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！ </font> 
-## <font color=#FF0000> 关于NVUE兼容的说明： </font> uCharts.js从2.3.0开始支持nuve（暂时只能通过原生canvas写法调用uCharts，nuve版本组件请见码云示例项目[uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)），因其渲染方式是通过nvue的gcanvas组件来渲染，理论上性能不及renderjs的qiun-data-charts组件性能。官方仍然建议NVUE使用图表的页面改为vue页面，在App端，从性能来讲，由于通讯阻塞的问题，nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端，仍然推荐使用qiun-data-charts组件。[详见uni-app官方说明](https://uniapp.dcloud.io/component/canvas?id=canvas)
 
-[![uCharts/uCharts](https://gitee.com/uCharts/uCharts/widgets/widget_card.svg?colors=393222,ebdfc1,fffae5,d8ca9f,393222,a28b40)](https://gitee.com/uCharts/uCharts)
 
-## 秋云图表组件使用帮助
+## <font color='red'>写给uCharts使用者的一封信</font>
+<font color='red'>
+亲爱的用户：
 
-全新图表组件，全端全平台支持，开箱即用，可选择uCharts引擎全端渲染，也可指定PC端或APP端`单独使用ECharts`引擎渲染图表。支持极简单的调用方式，只需指定图表类型及传入符合标准的图表数据即可，使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。
+- 由于最近上线的官网中实行了部分收费体验，收到了许多用户的使用反馈，大致反馈的问题都指向同一矛头：为何新官网的在线工具也要收费？对于这件事，我们深表歉意。由于新官网本身未提供技术文档，使得用户误以为我们对文档实行了收费。经我们连夜整改，新官网目前已经将技术文档开放出来供大家阅读使用，并免费对外开放了【演示】中的查看全端全平台的代码的功能，为此再次向所受影响的用户们致以诚恳的歉意。
 
-## 为何使用官方封装的组件？
+- 其次，我们须澄清几点，如下：
+1. uCharts的插件本身遵循开源原则，并不收费，用户可自行到DCloud市场与Gitee码云上获取源码
+2. uCharts的技术文档永久对用户开放
+3. 收费内容仅针对原生工具、组件工具、定制功能以及模板市场的部分收费模板
 
-封装组件并不难，谁都会，但组件调试却是一件令人掉头发的事，尤其是canvas封装成组件会带来一系列问题：例如封装后不显示，图表多次初始化导致抖动问题，单页面多个图表点击事件错乱，组件放在scroll-view中无法点击，在图表上滑动时页面无法滚动等等一系列问题。为解决开发者使用可视化组件的困扰，uCharts官方特推出可视化通用组件，本组件具备以下特点：
+- uCharts为什么实行收费原则？
+1. 服务器的费用支撑
+2. 团队的运营支出；正如你所见，我们的群里有大量的用户在请教图表配置与反馈问题，群里的每一位管理员都在花费不少精力在积极解决用户的问题，然而遇到巨大的咨询量时，我们无法及时、精准解答回复，因此，我们推出了会员优先服务
+3. 与其说模板市场是收费，倒不如说给野生用户提供了创造价值的机会，用户既可以在上面发布模板赚取费用，遇到心动的模板也能免费/付费使用
 
-- 极简单的调用方式，默认配置下只需要传入`图表类型`及`图表数据`即可全端显示。
-- 提供强大的`在线配置生成工具`，可视化中的可视化，鼠标点一点就可以生成图表，可视化从此不再难配。
-- 兼容ECharts，可选择`PC端或APP端单独使用ECharts`引擎渲染图表。
-- H5及App采用`renderjs`渲染图表，动画流畅、性能翻倍。
-- 根据父容器尺寸`弹性显示图表`，再也不必为宽高匹配及多端适配问题发愁。
-- 支持`加载状态loading及error展示`，避免数据读取显示空白的尴尬。
-- chartData`配置与数据解耦`，即便使用ECharts引擎也不必担心拼接option的困扰。
-- localdata`后端数据直接渲染`，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
-- 小程序端不必担心包体积过大问题，ECharts引擎将不会编译到各小程序端，u-charts.js编译后`仅为93kb`。
-- 未来将支持通过HbuilderX的[schema2code自动生成全端全平台图表](https://ext.dcloud.net.cn/plugin?id=4684)，敬请期待！！！
-- uCharts官方拥有3个2000人的QQ群支持，庞大的用户量证明我们一直在努力，本组件将持续更新，请各位放心使用，本组件问题请在`QQ3群`反馈，您的宝贵建议是我们努力的动力！！
+- 收费不是目的，正如你们所见，用户可以申请成为[【开发者】](https://www.ucharts.cn/v2/#/agreement/developer)，开发者不限制任何官网功能，并享有官方指导、开发、改造uCharts的权力，并且活动期间【返还超级会员费用】！我们想说的是，我们新版官网上线旨在希望更多的用户加入到开发者的队伍，我们共同去维护uCharts！
+       
+我们相信：星星之火可以燎原！
 
+uCharts技术团队
 
-## 致开发者
+2022.4.23
 
-感谢各位开发者`两年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献，为更好的帮助各位开发者在uni-app生态系统更好的应用图表，uCharts始终坚持开源，并提供社群帮助开发者解决问题。 为确保您能更好的应用图表组件，建议您先`仔细阅读本页文档`以及uCharts官方文档，而不是下载下来`直接使用`。 如遇到问题请先阅读文档，如仍然不能解决，请加入QQ群咨询，如群友均不能解决或者您有特殊需求，请在群内私聊我，因工作原因，回复不一定很及时，您可直接说问题，有时间一定会回复您。
+</font>
 
-uCharts的开源图表组件的开发，付出了大量的个人时间与精力，经过两年来的考验，不会有比较明显的bug，请各位放心使用。不求您5星评价，也不求您赞赏，`只求您对开源贡献的支持态度`，所以，当您想给`1星评价`的时候，秋云真的会`含泪希望您绕路而行……`。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
 
-## 快速体验
+![logo](https://img-blog.csdnimg.cn/4a276226973841468c1be356f8d9438b.png)
+
+
+[![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
+[![fork](https://gitee.com/uCharts/uCharts/badge/fork.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/members)
+[![License](https://img.shields.io/badge/license-Apache%202-4EB1BA.svg)](https://www.apache.org/licenses/LICENSE-2.0.html)
+[![npm package](https://img.shields.io/npm/v/@qiun/ucharts.svg?style=flat-square)](https://www.npmjs.com/~qiun)
+
+
+## uCharts简介
 
-一套代码编到7个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！IOS因demo比较简单无法上架，请自行编译。
-![](https://box.kancloud.cn/58092090f2bccc6871ca54dbec268811_654x479.png)
-
-## 快速上手
-### <font color=#FF0000> 注意前提条件【版本要求：HBuilderX 3.1.0+】 </font> 
-- 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程
-- 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本）
-- 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts
-- 4、注意父元素class='charts-box'这个样式需要有宽高
-
-## 基本用法
-
-- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
-
-```
-<view class="charts-box">
-	<qiun-data-charts type="column" :chartData="chartData" />
-</view>
-```
-
-- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
-
-```
-chartData:{
-  categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
-  series: [{
-    name: "目标值",
-    data: [35, 36, 31, 33, 13, 34]
-  }, {
-    name: "完成量",
-    data: [18, 27, 21, 24, 6, 28]
-  }]
-}
-```
-
-- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
-
-```
-chartData:{
-  series: [{
-    data: [
-      {
-        name: "一班",
-        value: 50
-      }, {
-        name: "二班",
-        value: 30
-      }, {
-        name: "三班",
-        value: 20
-      }, {
-        name: "四班",
-        value: 18
-      }, {
-        name: "五班",
-        value: 8
-      }
-    ]
-  }]
-}
-```
+`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。
 
-注：其他特殊图表类型，请参考mockdata文件夹下的数据格式，v2.0版本的uCharts已兼容ECharts的数据格式，v2.0版本仍然支持v1.0版本的数据格式。
+## 官方网站
 
-## localdata数据渲染用法
+## [https://www.ucharts.cn](https://www.ucharts.cn)
 
-- 使用localdata数据格式渲染图表的优势：数据结构简单，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
-- localdata数据的缺点：并不是所有的图表类型均可通过localdata渲染图表，例如混合图，组件并不能识别哪个series分组需要渲染成折线还是柱状图，涉及到复杂的图表，仍需要由chartData传入。
+## 快速体验
+
+一套代码编到多个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！其他平台请自行编译。
+
+![](https://www.ucharts.cn/images/web/guide/qrcode20220224.png)
+
+## 致开发者
 
-- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
+感谢各位开发者`四年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具，我们推出了新版官网，增加了在线定制、问答社区、在线配置等一些增值服务，为确保您能更好的应用图表组件，建议您先`仔细阅读本页指南`以及`常见问题`，而不是下载下来`直接使用`。如仍然不能解决，请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
 
-```
-<view class="charts-box">
-	<qiun-data-charts type="column" :localdata="localdata" />
-</view>
-```
+## 社群支持
 
+uCharts官方拥有4个2000人的QQ群及专属VIP会员群支持，庞大的用户量证明我们一直在努力，请各位放心使用！uCharts的开源图表组件的开发，团队付出了大量的时间与精力，经过四来的考验，不会有比较明显的bug，请各位放心使用。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
 
-- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
-
-其中value代表数据的数值，text代表X轴的categories数据点，group代表series分组的类型名称即series[i].name。
-
-```
-localdata:[
-  {value:35, text:"2016", group:"目标值"},
-  {value:18, text:"2016", group:"完成量"},
-  {value:36, text:"2017", group:"目标值"},
-  {value:27, text:"2017", group:"完成量"},
-  {value:31, text:"2018", group:"目标值"},
-  {value:21, text:"2018", group:"完成量"},
-  {value:33, text:"2019", group:"目标值"},
-  {value:24, text:"2019", group:"完成量"},
-  {value:13, text:"2020", group:"目标值"},
-  {value:6, text:"2020", group:"完成量"},
-  {value:34, text:"2021", group:"目标值"},
-  {value:28, text:"2021", group:"完成量"}
-]
-```
-
-- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
-
-其中value代表数据的数值，text代表value数值对应的描述。
-
-```
-localdata:[
-  {value:50, text:"一班"},
-  {value:30, text:"二班"},
-  {value:20, text:"三班"},
-  {value:18, text:"四班"},
-  {value:8, text:"五班"},
-]
-```
-
-- 注意，localdata的数据格式必需要符合datacom组件规范[【详见datacom组件】](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)。
-
-## 进阶用法读取uniCloud数据库并渲染图表
-
-- 组件基于uniCloud的[clientDB](https://uniapp.dcloud.net.cn/uniCloud/clientdb)技术，无需云函数，在前端对数据库通过where查询条件及group和count统计即可渲染图表。
-- 具体可参考/pages/unicloud/unicloud.vue中的demo例子，使用前，请先关联云服务空间，然后在uniCloud/database/db_init.json文件上点右键，初始化云数据库，当控制台显示“初始化云数据库完成”即完成示例数据的导入，之后方可运行uniCloud的demo。
-
-- template代码：
-
-```
-<qiun-data-charts
-  type="line"
-  :chartData="demoData"
-  collection="uni-id-users"
-  field="register_date,status"
-  :where="'publish_date >= ' + new Date(startDate).getTime() + ' && publish_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"
-/>
-```
-
-- 注意，从uniCloud读取出的数据，需要符合localdata的标准结果数据格式（参考上部分localdata），并需要把输出的字段as成规定的别名（value、text、group）。
-
-
-## 示例文件地址：
-
-### <font color=#FF0000> 强烈建议先看本页帮助，再看下面示例文件源码！</font>
-
-```
-/pages/ucharts/ucharts.vue（展示用uCharts全端运行的例子）
-
-/pages/echarts/echarts.vue（展示H5和App用ECharts，小程序端用uCharts的例子）
-
-/pages/unicloud/unicloud.vue（展示读取uniCloud数据库后直接渲染图表的例子）
-
-/pages/updata/updata.vue（展示动态更新图表数据的例子）
-
-/pages/other/other.vue（展示图表交互的例子：动态更新图表数据，渲染完成事件，获取点击索引，自定义tooltip，图表保存为图片，强制展示错误信息等）
-
-/pages/format-u/format-u.vue（展示uCharts的formatter用法的例子）
-
-/pages/format-e/format-e.vue（展示ECharts的formatter用法的例子）
-
-/pages/tab/tab.vue（展示再tab选项卡中用法的例子，即父容器采用v-show或v-if时需要注意的问题）
-
-/pages/layout/layout.vue（展示特殊布局用法的例子：swiper、scroll-view、绝对定位等布局）
-
-/pages/canvas/canvas.vue（展示uCharts v2.0版本原生js用法的例子）
-
-```
-
-
-## 组件基本API参数
-
-|属性名|类型|默认值|必填|说明|
-| -- | -- | -- | -- | -- |
-|type|String|null|`是`|图表类型，如全端用uCharts，可选值为pie、ring、rose、word、funnel、map、arcbar、line、column、bar、area、radar、gauge、candle、mix、tline、tarea、scatter、bubble <font color=#FF0000>（您也可以根据需求自定义新图表类型，需要在config-ucharts.js或config-echarts.js内添加，可参考config-ucharts.js内的"demotype"类型）</font>|
-|chartData|Object|见说明|`是`|图表数据，常用的标准数据格式为{categories: [],series: []}，请按不同图表类型传入对应的标准数据。|
-|localdata|Array|[]|`是`|图表数据，如果您觉得拼接上面chartData比较繁琐，可以通过使用localdata渲染，组件会根据传入的type类型，自动拼接categories或series数据（使用localdata就不必再传入chartData，详见 /pages/other/other.vue 中使用localdata渲染图表的例子）。【localdata和collection（uniCloud数据库）同时存在，优先使用localdata；如果localdata和chartData同时存在，优先使用chartData。<font color=#FF0000> 即chartData>localdata>collection的优先级</font>渲染图表】。|
-|opts|Object|{}|否|uCharts图表配置参数(option)，请参考[【在线生成工具】](https://demo.ucharts.cn)<font color=#FF0000>注：传入的opts会覆盖默认config-ucharts.js中的配置，只需传入与config-ucharts.js中属性不一致的opts即可实现【同类型的图表显示不同的样式】。</font>|
-|eopts|Object|{}|否|ECharts图表配置参数(option)，请参考[【ECharts配置手册】](https://echarts.apache.org/zh/option.html)传入eopts。<font color=#FF0000>注：1、传入的eopts会覆盖默认config-echarts.js中的配置，以实现同类型的图表显示不同的样式。2、eopts不能传递function，如果option配置参数需要function，请将option写在config-echarts.js中即可实现。</font>|
-|loadingType|Number|2|否|加载动画样式，0为不显示加载动画，1-5为不同的样式，见下面示例。|
-|errorShow|Boolean|true|否|是否在页面上显示错误提示，true为显示错误提示图片，false时会显示空白区域|
-|errorReload|Boolean|true|否|是否启用点击错误提示图表重新加载，true为允许点击重新加载，false为禁用点击重新加载事件|
-|errorMessage|String|null|否|自定义错误信息，强制显示错误图片及错误信息，当上面errorShow为true时可用。（组件会监听该属性的变化，只要有变化，就会强制显示错误信息！）。说明：1、一般用于页面网络不好或其他情况导致图表loading动画一直显示，可以传任意(不为null或者"null"或者空"")字符串强制显示错误图片及说明。2、如果组件使用了data-come属性读取uniCloud数据，组件会自动判断错误状态并展示错误图标，不必使用此功能。3、当状态从非null改变为null或者空时，会强制调用reload重新加载并渲染图表数据。|
-|echartsH5|Boolean|false|否|是否在H5端使用ECharts引擎渲染图表|
-|directory|String|'/'|否|二级目录名称，如果开启上面echartsH5即H5端用ECharts引擎渲染图表，并且项目未发布在website根目录，需要填写此项配置。例如二级目录是h5，则需要填写`/h5/`，左右两侧需要带`/`，发布到三级或更多层目录示例`/web/v2/h5/`|
-|echartsApp|Boolean|false|否|是否在APP端使用ECharts引擎渲染图表|
-|canvasId|String|见说明|否|默认生成32位随机字符串。如果指定canvasId，可方便后面调用指定图表实例，否则需要通过渲染完成事件获取自动生成随机的canvasId|
-|canvas2d|Boolean|false|否|是否开启canvas2d模式，用于解决微信小程序层级过高问题，仅微信小程序端可用，其他端会强制关闭canvas2d模式。<font color=#FF0000>注：开启canvas2d模式，必须要传入上面的canvasId（随机字符串，不能是动态绑定的值，不能是数字），否则微信小程序可能会获取不到dom导致无法渲染图表！**开启后，开发者工具显示不正常，预览正常（不能“真机调试”,不能“真机调试”,不能“真机调试”）**</font>|
-|background|String|none|否|背景颜色，默认透明none，可选css的16进制color值，如#FFFFFF|
-|animation|Boolean|true|否|是否开启图表动画效果|
-|inScrollView|Boolean|false|否|图表组件是否在scroll-view中，如果在请传true，否则会出现点击事件坐标不准确的现象|
-|pageScrollTop|Number|0|否|如果图表组件是在scroll-view中，并且整个页面还存在滚动条，这个值应为绑定为页面滚动条滚动的距离，否则会出现点击事件坐标不准确的现象|
-|reshow|Boolean|false|否|强制重新渲染属性，如果图表组件父级用v-show包裹，初始化的时候会获取不到元素的宽高值，导致渲染失败，此时需要把父元素的v-show方法复制到reshow中，组件检测到reshow值变化并且为true的时候会强制重新渲染|
-|reload|Boolean|false|否|强制重新加载属性，与上面的reshow区别在于：1、reload会重新显示loading动画；2、如果组件绑定了uniCloud数据查询，通过reload会重新执行SQL语句查询，重新请求网络。而reshow则不会显示loading动画，只是应用现有的chartData数据进行重新渲染|
-|disableScroll|Boolean|false|否|当在canvas中移动时，且有绑定手势事件时，禁止屏幕滚动以及下拉刷新（赋值为true时，在图表区域内无法拖动页面滚动）|
-|tooltipShow|Boolean|true|否|点击或者鼠标经过图表时，是否显示tooltip提示窗，默认显示|
-|tooltipFormat|String|undefined|否|自定义格式化Tooltip显示内容，详见下面【tooltipFormat格式化】|
-|tooltipCustom|Object|undefined|否|（仅uCharts）如果以上系统自带的Tooltip格式化方案仍然不满足您，您可以用此属性实现更多需求，详见下面【tooltipCustom自定义】|
-|startDate|String|undefined|否|需为标准时间格式，例如"2021-02-14"。用于配合uniClinetDB自动生成categories使用|
-|endDate|String|undefined|否|需为标准时间格式，例如"2021-03-31"。用于配合uniClinetDB自动生成categories使用|
-|groupEnum|Array|[]|否|当使用到uniCloud数据库时，group字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
-|textEnum|Array|[]|否|当使用到uniCloud数据库时，text字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
-|ontap|Boolean|true|否|是否监听@tap@cilck事件，禁用后不会触发组件点击事件|
-|ontouch|Boolean|false|否|（仅uCharts）是否监听@touchstart@touchmove@touchend事件（赋值为true时，非PC端在图表区域内无法拖动页面滚动）|
-|onmouse|Boolean|true|否|是否监听@mousedown@mousemove@mouseup事件，禁用后鼠标经过图表上方不会显示tooltip|
-|on movetip|Boolean|false|否|（仅uCharts）是否开启跟手显示tooltip功能（前提条件，1、需要开启touch功能，即:ontouch="true"；2、并且opts.enableScroll=false即关闭图表的滚动条功能）（建议微信小程序开启canvas2d功能，否则原生canvas组件会很卡）|
-|tapLegend|Boolean|true|否|（仅uCharts）是否开启图例点击交互事件 |
-
-## 组件事件及方法
-
-|事件名|说明|
-| --| --|
-|@complete|图表渲染完成事件，渲染完成会返回图表实例{complete: true, id:"xxxxx"(canvasId), type:"complete"}。可以引入config-ucharts.js/config-echarts.js来根据返回的id，调用uCharts或者ECharts实例的相关方法，详见other.vue其他图表高级应用。|
-|@getIndex|获取点击数据索引，点击后返回图表索引currentIndex，图例索引（仅uCharts）legendIndex，等信息。返回数据：{type: "getIndex", currentIndex: 3, legendIndex: -1, id:"xxxxx"(canvasId), event: {x: 100, y: 100}（点击坐标值）}|
-|@error|当组件发生错误时会触发该事件。返回数据：返回数据：{type:"error",errorShow:true/false(组件props中的errorShow状态值) , msg:"错误消息xxxx", id: "xxxxx"(canvasId)}|
-|@getTouchStart|（仅uCharts）拖动开始监听事件。返回数据：{type:"touchStart",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
-|@getTouchMove|（仅uCharts）拖动中监听事件。返回数据：{type:"touchMove",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
-|@getTouchEnd|（仅uCharts）拖动结束监听事件。返回数据：{type:"touchEnd",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
-|@scrollLeft|（仅uCharts）开启滚动条后，滚动条到最左侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：{type:"scrollLeft", scrollLeft: true, id: "xxxxx"(canvasId)}|
-|@scrollRight|（仅uCharts）开启滚动条后，滚动条到最右侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：返回数据：{type:"scrollRight", scrollRight: true, id: "xxxxx"(canvasId)}|
-
-## tooltipFormat格式化（uCharts和ECharts）
-
-tooltipFormat类型为string字符串类型，需要指定config-ucharts.js/config-echarts.js中formatter下的属性值。因各小程序及app端通过组件均不能传递function类型参数，因此请先在config-ucharts.js/config-echarts.js内定义您想格式化的数据，然后在这里传入formatter下的key值，组件会自动匹配与其对应的function。如不定义该属性，组件会调用默认的tooltip方案，标准的tooltipFormat使用姿势如下：
-
-```
-<qiun-data-charts
-  type="column"
-  :chartData="chartData"
-  tooltipFormat="tooltipDemo1"
-⁄>
-==================
-config-ucharts.js
-formatter:{
-  tooltipDemo1:function(item, category, index, opts){return item.data+'天'}
-}
-==================
-config-echarts.js
-formatter:{
-  tooltipDemo1:function(){
-    
-  }
-}
-```
-
-注意，config-ucharts.js内的formatter下的function需要携带(item, category, index, opts)参数，这4个参数都是uCharts实例内传递过来的数据，具体定义如下：
-
-|属性名|说明|
-| -- | -- |
-|item|组件内计算好的当前点位的series[index]数据，其属性有data(继承series[index].format属性),color,type,style,pointShape,disableLegend,name,show|
-|category|当前点位的X轴categories[index]分类名称（如果图表类型没有category，其值则为undefined）|
-|index|当前点位的索引值|
-|opts|全部uCharts的opts配置，包含categories、series等一切你需要的都在里面，可以根据index索引值获取其他相关数据。您可以在渲染完成后打印一下opts，看看里面都有什么，也可以自定义一些你需要的挂载到opts上，这样就可以根据需求更方便的显示自定义内容了。|
-
-## tooltipCustom自定义（仅uCharts）
-
-上面仅仅展示了Tooltip的自定义格式化，如果仍然仍然还不能还不能满足您的需求，只能看这里的方法了。tooltipCustom可以自定义在任何位置显示任何内容的文本，当然tooltipCustom可以和tooltipFormat格式化同时使用以达到更多不同的需求，下面展示了tooltip固定位置显示的方法：
-
-```
-<qiun-data-charts 
-	type="column" 
-	:chartData="chartData" 
-	:tooltipCustom="{x:10,y:10}"
-/>
-```
-
-tooltipCustom属性如下：
-
-|属性名|类型|默认值|说明|
-| -- | -- | -- | -- |
-|x|Number|undefined|tooltip左上角相对于画布的X坐标|
-|y|Number|undefined|tooltip左上角相对于画布的Y坐标|
-|index|Number|undefined|相对于series或者categories中的索引值。当没有定义index或者index定义为undefined的时候，组件会自动获取当前点击的索引，并根据上面的xy位置绘制tooltip提示框。如果为0及以上的数字时，会根据您传的索引自动计算x轴方向的偏移量（仅直角坐标系有效）|
-|textList|Array.Object|undefined|多对象数组，tooltip的文字组。当没有定义textList或者textList定义为undefined的时候，会调自动获取点击索引并拼接相应的textList。如传递[{text:'默认显示的tooltip',color:null},{text:'类别1：某个值xxx',color:'#2fc25b'},{text:'类别2：某个值xxx',color:'#facc14'},{text:'类别3：某个值xxx',color:'#f04864'}]这样定义好的数组，则会只显示该数组。|
-|textList[i].text|String| |显示的文字|
-|textList[i].color|Color| |左侧图表颜色|
-
-## datacome属性及说明
-
-- 通过配置datacome属性，可直接获取uniCloud云数据，并快速自动生成图表，使开发者只需专注业务及数据，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。datacome属性及说明，详见[datacom组件规范](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)
-
-|属性名|类型|默认值|说明|
-| -- | -- | -- | -- |
-|collection|String| |表名。支持输入多个表名，用 , 分割|
-|field|String| |查询字段，多个字段用 , 分割|
-|where|String| |查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
-|orderby|String| |排序字段及正序倒叙设置|
-|groupby|String| |对数据进行分组|
-|group-field|String| |对数据进行分组统计|
-|distinct|Boolean|false|是否对数据查询结果中重复的记录进行去重|
-|action|string| |云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理，详情。场景：前端无权操作的数据，比如阅读数+1|
-|page-data|string|add|分页策略选择。值为 add 代表下一页的数据追加到之前的数据中，常用于滚动到底加载下一页；值为 replace 时则替换当前data数据，常用于PC式交互，列表底部有页码分页按钮|
-|page-current|Number|0|当前页|
-|page-size|Number|0|每页数据数量|
-|getcount|Boolean|false|是否查询总数据条数，默认 false，需要分页模式时指定为 true|
-|getone|Boolean|false|指定查询结果是否仅返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在值为 true 时，直接返回结果数据，少一层数组。一般用于非列表页，比如详情页|
-|gettree|Boolean|false|是否查询树状数据，默认 false|
-|startwith|String|''|gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询|
-|limitlevel|Number|10|gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1|
-
-## uni_modules目录说明
-
-```
-├── components
-│ └── qiun-data-chatrs──────────# 组件主入口模块
-│ └── qiun-error────────────────# 加载动画组件文件目录（可以修改错误提示图标以减少包体积）
-│ └── qiun-loading──────────────# 加载动画组件文件目录（可以删除您不需要的动画效果以减少包体积）
-├── js_skd
-│ └── u-charts
-│ ── └──config-echarts.js ──────# ECharts默认配置文件（非APP端内可作为实例公用中转）
-│ ── └──config-ucharts.js ──────# uCharts默认配置文件（非APP端内可作为实例公用中转）
-│ ── └──u-charts-v2.0.0.js──────# uCharts基础库v2.0.0版本，部分API与之前版本不同
-├── static
-│ └── app-plus──────────────────# 条件编译目录，仅编译到APP端
-│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
-│ └── h5────────────────────────# 条件编译目录，仅编译到H5端
-│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
-```
-
-
-## 加载动画及错误提示
-- 为保证编译后的包体积，加载动画引用作者wkiwi提供的[w-loading](https://ext.dcloud.net.cn/plugin?id=504)中选取5种，如需其他样式请看下面说明。
-- loading的展示逻辑：
-	* 1、如果是uniCloud数据，从发送网络请求到返回数据期间展示。
-	* 2、如果是自行传入的chartData，当chartData.series=[]空数组的时候展示loading，也就是说初始化图表的时候，如果您没有数据，可以通过先传个空数组来展示loading效果，当chartData.series有数据后会自动隐藏loading图标。
-- <font color=#FF0000>如您修改了qiun-data-charts.vue组件文件，请务必在升级前备份您的文件，以免被覆盖！！！建议将加载状态显示做成组件，避免下次升级时丢失后无法找到。</font>
-
-
-## 配置文件说明
-
-- <font color=#FF0000>注意，config-echarts.js和config-ucharts.js内只需要配置符合您项目整体UI的整体默认配置，根据需求，先用[【在线工具】](http://demo.ucharts.cn)调试好默认配置，并粘贴到配置文件中。</font>
-- <font color=#FF0000>如果需要与configjs中不同的配置，只需要在组件上绑定:opts或者:eopts传入与默认配置不同的某个属性及值即可覆盖默认配置，极大降低了代码量。</font>
-
-- ECharts默认配置文件：config-echarts.js
-
-	i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
-	
-	ii、ECharts配置手册：[https://echarts.apache.org/zh/option.html](https://echarts.apache.org/zh/option.html)
-	
-	iii、"type"及"categories"属性为支持的图表属性，您可参照ECharts配置手册，配置您更多的图表类型，并将对应的图表配置添加至下面
-	
-	iv、"formatter"属性，因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
-	
-	v、"seriesTemplate"属性，因ECharts的大部分配置均在series内，seriesTemplate作为series的模板，这样只需要在这里做好模板配置，组件的数组层chartData（或者localdata或者collection）的series会自动挂载模板配置。如需临时或动态改变seriesTemplate，可在:eopts中传递seriesTemplate，详见pages/echarts/echarts.vue中的曲线图。
-
-	vi、ECharts配置仅可用于H5或者APP端，并且配置`echartsH5`或`echartsApp`为`true`时可用
-
-- uCharts默认配置文件：config-ucharts.js
-
-	i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
-	
-	ii、v2版本后的uCharts基础库不提供配置手册，您可以使用在线配置生成工具来快速生成配置：[http://demo.ucharts.cn](http://demo.ucharts.cn)
-	
-	iii、"type"及"categories"属性为支持的图表属性，不支持添加uCharts基础库没有的图表类型
-	
-	iv、"formatter"属性因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
-	
-	v、uCharts配置可跨全端使用
-
-
-## 常见问题及注意事项
-
-- `图表无法显示问题`：
-	* 请先检查您的HBuilderX版本，要求高于3.1.0+。
-	* 1、如果是首次导入插件不显示，或者报以下未注册`qiun-data-charts`的错误：
-	> Unknown custom element: &lt; qiun-data-charts &gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
-	* 2、<font color=#FF0000>请【重启HBuilderX】或者【重启项目】或者【重启开发者工具】或者【删除APP基座】重新运行，避免缓存问题导致不能显示。</font>
-  * 3、如果是基于uniapp的vue-cli项目，1、请 npm update 升级uniapp依赖为最新版本；2、请尝试清理node-modules，重新install，还不行就删除项目，再重新install。如果仍然不行，请检查uniapp依赖是否为最新版本，再重试以上步骤。如果仍然不行，请使用<font color=#FF0000>【非uni_modules版本】</font>组件，最新非uni_modules版本在码云发布，[点击此处获取](https://gitee.com/uCharts/uCharts/tree/master/qiun-data-charts%EF%BC%88%E9%9D%9Euni-modules%EF%BC%89)。。
-	* 4、请检查控制台是否有报错或提示信息，如果没有报错，也没有提示信息，并且检查视图中class="charts-box"这个元素的宽高均为0，请修改父元素的css样式或进行下面第4步检查。
-	* 5、检查父级是否使用了v-show来控制显示。如果页面初始化时组件处于隐藏状态，组件则无法正确获取宽高尺寸，此时<font color=#FF0000>需要组件内绑定reshow属性（逻辑应与父级的v-show的逻辑相同）</font>，强制重新渲染图表，例如:reshow="父级v-show绑定的事件"。
-	* 6、如果在微信小程序端开启了canvas2d模式<font color=#FF0000>（不能使用真机调试，请直接预览）</font>不显示图表：
-		* a、请务必在组件上定义canvasId，不能为纯数字、不能为变量、不能重复、尽量长一些。
-		* b、请检查微信小程序的基础库，修改至2.16.0或者最新版本的基础库。
-		* c、请检查父元素或父组件是否用v-if来控制显示，如有请改为v-show，并将v-show的逻辑绑定至组件。
-- `formatter格式化问题`：无论是uCharts还是ECharts，因为组件不能传递function，所有的formatter均需要变成别名format来定义，并在config-ucharts.js或config-echarts.js配置对应的formatter方法，组件会根据format的值自动替换配置文件中的formatter方法。（参考示例项目pages/format/format.vue）
-- `图表抖动问题`：如果开启了animation动画效果，由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
-- `微信小程序报错Maximum call stack size exceeded问题`:由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
-- `Loading状态问题`：如不使用uniClinetDB获取数据源，并且需要展示Loading状态，请先清空series，使组件变更为Loading状态，即this.chartData.series=[]即可展示，然后再从服务端获取数据，拼接完成后再传入this.chartData。如果不需要展示Loading状态，则不需要以上步骤，获取到数据，拼接好标准格式后，直接赋值即可。
-- `微信小程序图表层级过高问题`：因canvas在微信小程序是原生组件，如果使用自定义tabbar或者自定义导航栏，图表则会超出预期，此时需要给组件的canvas2d传值true来使用type='2d'的功能，开启此模式后，<font color=#FF0000>一定要在组件上自定义canvasId，不能为数字，不能动态绑定，要为随机字符串！不能“真机调试”，不能“真机调试”，不能“真机调试”</font>开发者工具显示不正常，图表层级会变高，而正常预览或者发布上线则是正常状态，开发者不必担心，一切以真机预览为准（因微信开发者工具显示不正确，canvas2d这种模式下给调试带来了困难，开发时，可以先用:canvas2d="false"来调试，预览无误后再改成true）。
-- `开启canvas2d后图表不显示问题`：开启canvas2d后，需要手动指定canvasId，并且父元素不能含有v-if，否则会导致获取不到dom节点问题，请将v-if改成v-show，更多开启canvas2d不显示问题，请参考示例项目pages/layout/layout.vue文件，对照示例项目修改您的项目。
-- `MiniPorgramError U.createEvent is ot a function`：此问题一般是微信小程序开启了canvas2d，并点击了“真机调试导致”，参考上面【微信小程序图表层级过高问题】解决办法，开启2d后，不可以真机调试，只能开发者工具调试或者扫二维码“预览”。
-- `在图表上滑动无法使页面滚动问题`：此问题是因为监听了touchstart、touchmove和touchend三个事件，或者开启了disableScroll属性，如果您的图表不需要开启图表内的滚动条功能，请禁用这三个方法的监听，即:ontouch="false"或者:disableScroll="false"即可（此时图表组件默认通过@tap事件来监听点击，可正常显示Tooltip提示窗）。
-- `开启滚动条无法拖动图表问题`：此问题正与以上问题相反，是因为禁用了监听touchstart、touchmove和touchend三个事件，请启用这三个方法的监听，即在组件上加入 :ontouch="true" 即可。注意，不要忘记在opts里需要配置enableScroll:true，另外如果需要显示滚动条，需要在xAxis中配置scrollShow:ture，及itemCount（单屏数据密度）数量的配置。
-- `开启滚动条后图表两侧有白边问题`：此问题是因为组件上的background为none或者没有指定，请在组件上加入background="#000000"(您的背景色)。如果父元素为图片，尽量不要开启滚动条，此时图表是透明色，可以显示父元素背景图片。
-- `开启滚动条后动态打点更新数据滚动条位置问题`：开启滚动条后动态打点，需要把opts中update需要赋值为true，来启用uCharts的updateData方法来更新视图，详见示例项目pages/updata/updata.vue。
-- `地图变形问题`：此问题是因为您引用的geojson地图数据的坐标系可能是地球坐标(WGS84)导致，需要开启【是否进行WGS84转墨卡托投影】功能。开启后因大量的数据运算tooltip可能会不跟手，建议自行转换为墨卡托坐标系，可参照源码内function lonlat2mercator()。其他地图数据下载地址：[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/atlas/)
-- `支付宝（钉钉）小程序无法点击问题`：请检查支付宝小程序开发者工具中，点击【详情】，在弹出的【项目详情】中【取消】启用小程序基础库 2.0 构建，一定不要勾选此项。
-- `uni-simple-router中使用问题`：如果使用uni-simple-router路由插件，H5开启完全路由模式（即h5:{vueRouterDev:true}）时，会导致组件内uni.xxx部分方法失效，引发节点获取不正常报错，请使用普通模式即可。
-- `Y轴刻度标签数字重复问题`：此问题一般是series数据内数值较小，而Y轴网格数量较多，并且Y轴刻度点显示整数导致。解决方法1，Y轴刻度值保留两位小数，组件上传值 :opts="{yAxis:{data:[{tofix:2}]}}"；解决方法2，修改Y轴网格数量为series中的最大值的数量，例如series中最大值为3，那么修改yAxis.splitNumber=3即可；解决方法3，根据Y轴网格数量修改Y轴最大值 :opts="{yAxis:{data:[{max:5}]}}"。
-- `柱状图柱子高度不符合预期问题`：此问题是Y轴最小值未默认为0的问题导致，组件上传值 :opts="{yAxis:{data:[{min:0}]}}"即可解决。
-- `饼图类百分比改其他文案的问题`：参考示例项目pages/format-u/format-u.vue，在chartData的series中使用format。
-
-## [更多常见问题以官方网站【常见问题】为准](http://demo.ucharts.cn)
-
-## QQ群号码
-## <font color=#FF0000> 请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！不看文档不看常见问题进群就问的拒绝回答问题！咨询量太大请理解作者！ </font> 
-- 放在下面是为了让您先看文档，看好群分类，再进群！！
+#### 官方交流群
 - 交流群1：371774600（已满）
-- 交流群2：619841586（不回答本组件问题，只回答uCharts基础库问题）
-- 交流群3：955340127<font color=#FF0000>（优先解答本组件问题，其他问题群友互助）</font>
+- 交流群2：619841586（已满）
+- 交流群3：955340127（已满）
+- 交流群4：641669795
 - 口令`uniapp`
 
+#### 专属VIP会员群
+- 开通会员后详见【账号详情】页面中顶部的滚动通知
+- 口令`您的用户ID`
+
+## 版权信息
+
+uCharts始终坚持开源，遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议，意味着您无需支付任何费用，即可将uCharts应用到您的产品中。
+
+注意：这并不意味着您可以将uCharts应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uCharts相关方及秋云科技不承担任何责任。
+
+## 合作伙伴
+
+[![DIY官网](https://www.ucharts.cn/images/web/guide/links/diy-gw.png)](https://www.diygw.com/)
+[![HasChat](https://www.ucharts.cn/images/web/guide/links/haschat.png)](https://gitee.com/howcode/has-chat)
+[![uViewUI](https://www.ucharts.cn/images/web/guide/links/uView.png)](https://www.uviewui.com/)
+[![图鸟UI](https://www.ucharts.cn/images/web/guide/links/tuniao.png)](https://ext.dcloud.net.cn/plugin?id=7088)
+[![thorui](https://www.ucharts.cn/images/web/guide/links/thorui.png)](https://ext.dcloud.net.cn/publisher?id=202)
+[![FirstUI](https://www.ucharts.cn/images/web/guide/links/first.png)](https://www.firstui.cn/)
+[![nProUI](https://www.ucharts.cn/images/web/guide/links/nPro.png)](https://ext.dcloud.net.cn/plugin?id=5169)
+[![GraceUI](https://www.ucharts.cn/images/web/guide/links/grace.png)](https://www.graceui.com/)
+
+
+## 更新记录
+
+详见官网指南中说明，[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
+
 
 ## 相关链接
-- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
 - [uCharts官网](https://www.ucharts.cn)
-- [uCharts在线生成工具](http://demo.ucharts.cn)<font color=#FF0000>（注：v2.0版本后将不提供配置手册，请通过在线生成工具生成图表配置）</font>
+- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
 - [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
-- [uCharts基础库更新记录](https://gitee.com/uCharts/uCharts/wikis/%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95?sort_id=1535998)
-- [uCharts改造教程](https://gitee.com/uCharts/uCharts/wikis/%E6%94%B9%E9%80%A0uCharts%E6%89%93%E9%80%A0%E4%B8%93%E5%B1%9E%E5%9B%BE%E8%A1%A8?sort_id=1535997)
-- [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) 
+- [uCharts npm开源地址](https://www.ucharts.cn)
 - [ECharts官网](https://echarts.apache.org/zh/index.html)
 - [ECharts配置手册](https://echarts.apache.org/zh/option.html)
-- [`wkiwi`提供的w-loading组件地址](https://ext.dcloud.net.cn/plugin?id=504)
+- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1) 

uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}

uni_modules/uni-scss/styles/setting/_styles.scss

@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */

uni_modules/uni-scss/styles/setting/_text.scss

@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}

uni_modules/uni-scss/styles/setting/_variables.scss

@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

uni_modules/uni-scss/styles/tools/functions.scss

@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};

uni_modules/uni-scss/theme.scss

@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);

uni_modules/uni-scss/variables.scss

@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);

uni_modules/uni-transition/changelog.md

@@ -0,0 +1,20 @@
+## 1.3.1（2021-11-23）
+- 修复 init 方法初始化问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
+## 1.2.1（2021-09-27）
+- 修复 init 方法不生效的 Bug
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.1（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的 Bug
+## 1.1.0（2021-04-22）
+- 新增 通过方法自定义动画
+- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- 优化 动画触发逻辑，使动画更流畅
+- 优化 支持单独的动画类型
+- 优化 文档示例
+## 1.0.2（2021-02-05）
+- 调整为 uni_modules 目录规范

uni_modules/uni-transition/components/uni-transition/createAnimation.js

@@ -0,0 +1,128 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		this.animation = uni.createAnimation(options)
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}

uni_modules/uni-transition/components/uni-transition/uni-transition.vue

@@ -0,0 +1,277 @@
+<template>
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		customClass:{
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			for (let i in obj) {
+				try {
+					if(typeof obj[i] === 'object'){
+						this.animation[i](...obj[i])
+					}else{
+						this.animation[i](obj[i])
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
+			this.animation.step(config)
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 1 : 0,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
+<style></style>

uni_modules/uni-transition/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.3.1",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-transition/readme.md

@@ -0,0 +1,11 @@
+
+
+## Transition 过渡动画
+> **组件名：uni-transition**
+> 代码块： `uTransition`
+
+
+元素过渡动画
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839