ylj/ccy_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ylj20011123 2025-10-24 16:25:52 +08:00
parent 6c38e982b3
commit 0eb131cda5
2 changed files with 87 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
pages/DigitalIntelligenceDashboard/components/RegionalServiceAreaAnalysis.vue
View File

@ -76,7 +76,20 @@
<view class="chart-content">
<view class="pie-chart-container">
<QiunDataCharts type="pie" :opts="distributionChartOpts" :chartData="distributionChartData" :canvas2d="true"
:inScrollView="true" canvasId="distributionChart" />
:inScrollView="true" canvasId="distributionChart" tooltipFormat="distributionChartData" />
</view>
<!-- 自定义可滚动图例 -->
<view class="custom-region-legend">
<scroll-view class="legend-scroll" scroll-x="true" show-scrollbar="false">
<view class="legend-items">
<view v-for="(item, index) in regionLegendData" :key="index" class="legend-item"
@tap="onLegendTap(index)">
<view class="legend-color" :style="{ backgroundColor: item.color }"></view>
<text class="legend-name">{{ item.name }}</text>
<!-- 只显示名称，不显示百分比 -->
</view>
</view>
</scroll-view>
</view>
</view>
</view>
@ -480,9 +493,11 @@ export default {
// 区域分布饼图数据
distributionChartData() {
// 按服务区数量从大到小排序
const sortedData = [...this.distributionData].sort((a, b) => b.value - a.value);
return {
series: [{
data: this.distributionData.map(item => ({
data: sortedData.map(item => ({
name: item.name,
value: item.value
}))
@ -493,10 +508,11 @@ export default {
// 区域分布饼图配置
distributionChartOpts() {
return {
color: ['#576EFF', '#52C41A', '#FAAD14', '#FF4D4F', '#13C2C2', '#722ED1', '#FA541C', '#EB2F96'],
padding: [5, 5, 5, 5],
dataLabel: true,
dataLabel: false, // 关闭数据标签，避免拥挤
legend: {
show: true
show: false // 关闭原生图例
},
extra: {
pie: {
@ -565,6 +581,18 @@ export default {
}
}
}
},
// 区域分布图例数据
regionLegendData() {
const colors = ['#576EFF', '#52C41A', '#FAAD14', '#FF4D4F', '#13C2C2', '#722ED1', '#FA541C', '#EB2F96'];
// 按服务区数量从大到小排序，确保与饼图顺序一致
const sortedData = [...this.distributionData].sort((a, b) => b.value - a.value);
return sortedData.map((item, index) => ({
name: item.name,
value: item.value,
color: colors[index % colors.length]
}));
}
},
onReady() {
@ -664,6 +692,11 @@ export default {
exportData() {
console.log('导出区域服务区数据');
},
// 图例点击事件
onLegendTap(index) {
console.log('点击图例', index);
}
}
}
@ -913,6 +946,51 @@ export default {
width: 100%;
}
.custom-region-legend {
width: 100%;
margin-top: 16rpx;
.legend-scroll {
width: 100%;
white-space: nowrap;
.legend-items {
display: inline-flex;
padding: 0 8rpx;
gap: 24rpx;
.legend-item {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 12rpx;
background: #f8f9fa;
border-radius: 16rpx;
white-space: nowrap;
transition: all 0.3s ease;
&:active {
background: #e6f7ff;
transform: scale(0.95);
}
.legend-color {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
flex-shrink: 0;
}
.legend-name {
font-size: 24rpx;
color: @text-secondary;
font-weight: 500;
}
}
}
}
}
.type-legend {
display: flex;
justify-content: center;

5
pages/DigitalIntelligenceDashboard/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
View File

@ -95,11 +95,14 @@ const cfu = {
"option": {},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter": {
"regionDistributionData": function (item, category, index, opts) {
"distributionChartData": function (item, category, index, opts) {
console.log('', item);
console.log('', category);
console.log('', index);
console.log('', opts);
return `${item.name}：${item.data}对`
},
"regionDistributionData": function (item, category, index, opts) {
return `${item.name}：${item.data.toLocaleString()}元`
},
"timeDistributionChartData": function (item, category, index, opts) {