feat: 修复数据看板无法滚动问题

components/heatmap/heatmap.vue

@@ -6,7 +6,7 @@
 				<view>{{ dataRangeYears }}</view>
 			</view>
 			<view class="controls">
-				<tm-stepper v-model="currentYear" :width="220" :height="48" :min="1999" :max="2099" :shadow="0" :round="2" color="light-blue" @change="changeYear"></tm-stepper>
+				<tm-stepper v-model="currentYear" :width="220" :height="48" :min="0" :max="2099" :shadow="0" :round="2" color="light-blue" @change="changeYear"></tm-stepper>
 			</view>
 		</view>
 
@@ -77,7 +77,8 @@ export default {
 			displayDays: [],
 			showTooltip: null,
 			currentYear: '1900',
-			currentYearData: []
+			currentYearData: [],
+			yearList:[]
 		};
 	},
 	computed: {
@@ -213,9 +214,16 @@ export default {
 		}
 	},
 	created() {
+		this.initYearList()
 		this.filterAndSetCurrentYearData(this.year);
 	},
 	methods: {
+		initYearList(){
+			for (var index = 1900; index < 2099; index++) {
+				 this.yearList.push(index)
+			}
+			this.yearList = this.yearList.reverse();
+		},
 		filterAndSetCurrentYearData(year) {
 			this.currentYear = year;
 			this.currentYearData = this.chartData.filter((x) => x.name.includes(this.currentYear));
@@ -390,6 +398,7 @@ export default {
 	height: 24rpx!important; 
 }
 .heatmap-container {
+	width: 100%;
 	display: flex;
 	padding-bottom: 20rpx;
 }
@@ -427,8 +436,10 @@ export default {
 }
 
 .heatmap-content {
+	width: 100%;
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 	overflow-x: auto;
 }
 

config/uhalo.config.js

@@ -5,6 +5,7 @@ const UHaloBaseConfig = Object.freeze({
     BASE_API: "",
     // 示例：
     // BASE_API: "https://blog.xiaoxiaomo.cn",
+    // BASE_API: "https://www.xhhao.com",
 
     // todo：可能有其他配置
 })

manifest.json

@@ -119,7 +119,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx1bb161867082c72f",
         "setting" : {
             "urlCheck" : false,
             "minified" : true

pagesA/data-visual/data-visual.vue

@@ -46,7 +46,15 @@
 					</view>
 					<view v-show="categoryChart.isExpand" class="card-body flex">
 						<view class="chart-box">
-							<qiun-data-charts :type="categoryChart.type" :opts="categoryChart.opts" :chartData="categoryChart.data" :tooltipFormat="categoryChart.tooltipFormat" />
+							<qiun-data-charts
+								:canvasId="categoryChart.id"
+								:canvas2d="true"
+								:ontouch="true"
+								:type="categoryChart.type"
+								:opts="categoryChart.opts"
+								:chartData="categoryChart.data"
+								:tooltipFormat="categoryChart.tooltipFormat"
+							/>
 						</view>
 					</view>
 				</view>
@@ -63,7 +71,7 @@
 						</view>
 					</view>
 					<view v-show="trandArticleChart.isExpand" class="card-body flex">
-						<heatmap :chartData="trandArticleChart.data"></heatmap>
+						<heatmap style="width: 100%" :chartData="trandArticleChart.data"></heatmap>
 					</view>
 				</view>
 				<!-- 评论活跃用户 -->
@@ -81,6 +89,9 @@
 					<view v-show="userCommentsChart.isExpand" class="card-body flex">
 						<view class="chart-box">
 							<qiun-data-charts
+								:canvasId="userCommentsChart.id"
+								:canvas2d="true"
+								:ontouch="true"
 								:type="userCommentsChart.type"
 								:opts="userCommentsChart.opts"
 								:chartData="userCommentsChart.data"
@@ -101,9 +112,12 @@
 							<tm-icons v-else :size="24" name="icon-angle-up" color="gray"></tm-icons>
 						</view>
 					</view>
-					<view v-show="top10ArticlesChart.isExpand" class="card-body flex">
+					<view class="card-body flex">
 						<view class="chart-box">
 							<qiun-data-charts
+								:canvasId="top10ArticlesChart.id"
+								:canvas2d="true"
+								:ontouch="true"
 								:type="top10ArticlesChart.type"
 								:opts="top10ArticlesChart.opts"
 								:chartData="top10ArticlesChart.data"
@@ -148,6 +162,7 @@ export default {
 			loading: 'loading',
 			statistics: null,
 			tagChart: {
+				id: 'tagChart',
 				isExpand: true,
 				type: 'ring',
 				data: {},
@@ -158,7 +173,6 @@ export default {
 					color: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316', '#ea7ccc', '#0EA5E9'],
 					padding: [5, 5, 5, 5],
 					dataLabel: false,
-					enableScroll: true,
 					legend: {
 						show: false,
 						position: 'right',
@@ -194,6 +208,7 @@ export default {
 				}
 			},
 			categoryChart: {
+				id: 'categoryChart',
 				isExpand: true,
 				type: 'line',
 				data: {},
@@ -201,14 +216,18 @@ export default {
 				opts: {
 					color: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316', '#ea7ccc', '#0EA5E9'],
 					padding: [20, 15, 10, 15],
-					enableScroll: false,
+					touchMoveLimit: 24,
+					enableScroll: true,
 					legend: {
 						show: false
 					},
 					xAxis: {
 						disableGrid: true,
 						fontSize: 11,
-						boundaryGap: 'center'
+						scrollShow: true,
+						itemCount: 6,
+						boundaryGap: 'center',
+						format: 'xAxisCategory'
 					},
 					yAxis: {
 						gridType: 'dash',
@@ -239,6 +258,7 @@ export default {
 				opts: {}
 			},
 			userCommentsChart: {
+				id: 'userCommentsChart',
 				isExpand: true,
 				loading: true,
 				type: 'column',
@@ -290,6 +310,7 @@ export default {
 				}
 			},
 			top10ArticlesChart: {
+				id: 'top10ArticlesChart',
 				isExpand: true,
 				type: 'column',
 				data: {},
@@ -409,7 +430,7 @@ export default {
 		},
 		// 处理分类统计
 		handleCategoriesChart() {
-			const data = this.statistics.categories.sort((a, b) => a.total - b.total);
+			const data = this.statistics.categories.sort((a, b) => b.total - a.total);
 			const seriesItemData = data.map((item) => item.total);
 			if (Math.max(...seriesItemData) < 10) {
 				this.categoryChart.opts.yAxis.data[0].max = 10;

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

@@ -85,8 +85,8 @@ const cfu = {
       }
     },
 	"xAxisTop10Article":function(val, index, opts){
-		if(val.length>4){
+		if(val.length>6){
-			return val.slice(0,4) +'...'
+			return val.slice(0,6) +'...'
 		}
 		return val
 	},
@@ -96,6 +96,12 @@ const cfu = {
 		}
 		return val
 	},
+	"xAxisCategory":function(val, index, opts){
+		if(val.length>6){
+			return val.slice(0,6) +'...'
+		}
+		return val
+	},
   },
   //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
   "demotype":{