cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 13:19:31 +08:00
Code Issues Activity

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

Browse Source
This commit is contained in:
小莫唐尼
2025-11-28 01:19:52 +08:00
parent 7ba35ffd5d
commit 72dc278a2b
5 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/heatmap/heatmap.vue
+14 -3
View File
@@ -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>
@@ -52,7 +52,7 @@ import tmStepper from '@/tm-vuetify/components/tm-stepper/tm-stepper.vue';
export default {
name: 'Heatmap',
components: {
tmStepper
tmStepper
},
props: {
year: {
@@ -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
+1
View File
@@ -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
+1 -1
View File
@@ -119,7 +119,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"appid" : "wx1bb161867082c72f",
"setting" : {
"urlCheck" : false,
"minified" : true
pagesA/data-visual/data-visual.vue
+28 -7
View File
@@ -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
+8 -2
View File
@@ -85,8 +85,8 @@ const cfu = {
}
},
"xAxisTop10Article":function(val, index, opts){
if(val.length>4){
return val.slice(0,4) +'...'
if(val.length>6){
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":{