Skip to content

Z
zc-qiyewx-app
Commit e2ce1829 authored by 杨勇飞's avatar 杨勇飞
Browse files
Options

增加前10项目柱状图

parent 61077df7
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 38 deletions
pages/index/index.vue
View file @ e2ce1829
...@@ -177,27 +177,51 @@ ...@@ -177,27 +177,51 @@
</view> </view>
</view> </view>
<!-- 图表区域 --> <!-- 模拟老板对比图表区域 -->
<view class="chart-container"> <view class="chart-container">
<view class="chart-header"> <view class="chart-header">
<text class="chart-title">模拟老板对比</text> <text class="chart-title">模拟老板对比</text>
<view class="sort-buttons"> <view class="sort-buttons">
<text class="sort-btn" :class="{active: sortType === 'receivable'}" @click="sortChart('receivable')"> <text class="sort-btn" :class="{active: sortType === 'receivable'}" @click="sortChart('receivable','myLeaderChart')">
<text class="sort-icon"></text> <text class="sort-icon"></text>
应收 应收
</text> </text>
<text class="sort-btn" :class="{active: sortType === 'payable'}" @click="sortChart('payable')"> <text class="sort-btn" :class="{active: sortType === 'payable'}" @click="sortChart('payable','myLeaderChart')">
<text class="sort-icon"></text> <text class="sort-icon"></text>
应付 应付
</text> </text>
<text class="sort-btn" :class="{active: sortType === 'profitRate'}" @click="sortChart('profitRate')"> <text class="sort-btn" :class="{active: sortType === 'profitRate'}" @click="sortChart('profitRate','myLeaderChart')">
<text class="sort-icon"></text> <text class="sort-icon"></text>
利润 利润
</text> </text>
</view> </view>
</view> </view>
<scroll-view class="chart-scroll" scroll-x> <scroll-view class="chart-scroll" scroll-x>
<view class="chart-wrapper" id="myChart"></view> <view class="chart-wrapper" id="myLeaderChart"></view>
</scroll-view>
</view>
<!-- 项目对比图表区域 -->
<view class="chart-container">
<view class="chart-header">
<text class="chart-title">项目对比(前10)</text>
<view class="sort-buttons">
<text class="sort-btn" :class="{active: sortType === 'receivable'}" @click="sortChart('receivable','myProjectChart')">
<text class="sort-icon"></text>
应收
</text>
<text class="sort-btn" :class="{active: sortType === 'payable'}" @click="sortChart('payable','myProjectChart')">
<text class="sort-icon"></text>
应付
</text>
<text class="sort-btn" :class="{active: sortType === 'profitRate'}" @click="sortChart('profitRate','myProjectChart')">
<text class="sort-icon"></text>
利润
</text>
</view>
</view>
<scroll-view class="chart-scroll" scroll-x>
<view class="chart-wrapper" id="myProjectChart"></view>
</scroll-view> </scroll-view>
</view> </view>
...@@ -252,7 +276,8 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -252,7 +276,8 @@ import { uniIcons } from '@dcloudio/uni-ui'
return { return {
loading: true, loading: true,
activeTime: 'today', activeTime: 'today',
myChart: null, myLeaderChart: null,
myProjectChart: null,
sortType: 'receivable', sortType: 'receivable',
// 所有时间维度的数据集合 // 所有时间维度的数据集合
...@@ -281,7 +306,14 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -281,7 +306,14 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 5340 monthly: 5340
} }
}, },
chart: { leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
},
projectChartData: {
projectNames: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F'],
receivable: [320, 450, 380, 420, 390, 410], receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 350, 280, 320, 290, 310], payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2] profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
...@@ -368,11 +400,18 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -368,11 +400,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 3180 monthly: 3180
} }
}, },
chart: { leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [220, 350, 280, 320, 290, 310], receivable: [220, 350, 280, 320, 290, 310],
payable: [120, 250, 180, 220, 190, 210], payable: [120, 250, 180, 220, 190, 210],
profitRate: [42.5, 35.2, 39.8, 32.6, 45.9, 37.2] profitRate: [42.5, 35.2, 39.8, 32.6, 45.9, 37.2]
}, },
projectChartData: {
projectNames: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F'],
receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
},
tableData: [ tableData: [
{ {
boss: '老板A', boss: '老板A',
...@@ -455,11 +494,18 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -455,11 +494,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 2405 monthly: 2405
} }
}, },
chart: { leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [180, 290, 220, 260, 230, 250], receivable: [180, 290, 220, 260, 230, 250],
payable: [80, 190, 120, 160, 130, 150], payable: [80, 190, 120, 160, 130, 150],
profitRate: [40.5, 33.2, 37.8, 30.6, 43.9, 35.2] profitRate: [40.5, 33.2, 37.8, 30.6, 43.9, 35.2]
}, },
projectChartData: {
projectNames: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F'],
receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
},
tableData: [ tableData: [
{ {
boss: '老板A', boss: '老板A',
...@@ -542,11 +588,18 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -542,11 +588,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 300000 monthly: 300000
} }
}, },
chart: { leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [150, 260, 190, 230, 200, 220, 180, 240, 210, 170], receivable: [150, 260, 190, 230, 200, 220, 180, 240, 210, 170],
payable: [50, 160, 90, 130, 100, 120, 80, 140, 110, 70], payable: [250, 160, 90, 310, 100, 120, 80, 140, 110, 70],
profitRate: [38.5, 31.2, 35.8, 28.6, 41.9, 33.2, 36.5, 29.8, 34.5, 32.1] profitRate: [38.5, 31.2, 35.8, 28.6, 41.9, 33.2, 36.5, 29.8, 34.5, 32.1]
}, },
projectChartData: {
projectNames: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F'],
receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 150, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
},
tableData: [ tableData: [
{ {
boss: '老板A', boss: '老板A',
...@@ -625,30 +678,38 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -625,30 +678,38 @@ import { uniIcons } from '@dcloudio/uni-ui'
} }
}, },
mounted() { mounted() {
this.initChart() this.initLeaderChart()
this.initProjectChart()
// 在 Vue 的下一个 DOM 更新循环中执行
this.$nextTick(() => { this.$nextTick(() => {
// 检查当前数据的表格数据是否存在且长度大于 0
if (this.currentData.tableData && this.currentData.tableData.length > 0) { if (this.currentData.tableData && this.currentData.tableData.length > 0) {
// 如果表格数据存在，设置 loading 状态为 false，表示数据已加载完成
this.loading = false this.loading = false
} }
this.sortChart('receivable') // 对领导图表进行排序，按应收数据排序
this.sortChart('receivable', 'myLeaderChart')
// 对项目图表进行排序，按应收数据排序
this.sortChart('receivable', 'myProjectChart')
// 监听窗口的 resize 事件，调用 onResize 方法以适应图表大小
window.addEventListener('resize', this.onResize) window.addEventListener('resize', this.onResize)
}) })
}, },
methods: { methods: {
initChart() { initLeaderChart() {
// 获取数据点数量 // 获取数据点数量
const dataCount = this.currentData.chart.receivable.length; const dataCount = this.currentData.leaderChartData.receivable.length;
// 计算所需的最小宽度（假设每个数据点需要100px） // 计算所需的最小宽度（假设每个数据点需要100px）
const minWidth = Math.max(dataCount * 60, 500); const minWidth = Math.max(dataCount * 60, 500);
// 设置容器宽度 // 设置容器宽度
const wrapper = document.getElementById('myChart'); const wrapper = document.getElementById('myLeaderChart');
if (wrapper) { if (wrapper) {
wrapper.style.width = `${minWidth}px`; wrapper.style.width = `${minWidth}px`;
wrapper.style.padding = '0 0 5px 0'; wrapper.style.padding = '0 0 5px 0';
} }
this.myChart = echarts.init(document.getElementById('myChart')) this.myLeaderChart = echarts.init(document.getElementById('myLeaderChart'))
const option = { const option = {
tooltip: { tooltip: {
...@@ -756,7 +817,130 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -756,7 +817,130 @@ import { uniIcons } from '@dcloudio/uni-ui'
] ]
} }
this.myChart.setOption(option) this.myLeaderChart.setOption(option)
},
initProjectChart() {
// 获取数据点数量
const dataCount = this.currentData.projectChartData.receivable.length;
// 计算所需的最小宽度（假设每个数据点需要100px）
const minWidth = Math.max(dataCount * 60, 500);
// 设置容器宽度
const wrapper = document.getElementById('myProjectChart');
if (wrapper) {
wrapper.style.width = `${minWidth}px`;
wrapper.style.padding = '0 0 5px 0';
}
this.myProjectChart = echarts.init(document.getElementById('myProjectChart'))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return params.map(item => {
if (item.seriesName === '利润率') {
return `${item.seriesName}: ${item.value}%`
}
return `${item.seriesName}: ${item.value}万元`
}).join('<br/>')
}
},
legend: {
data: ['应收', '应付', '利润率'],
bottom: 0,
// itemGap: 20
},
grid: {
left: '3%',
right: '4%',
top: '5%',
bottom: '12%',
width: 'auto',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: { color: '#E8E8E8' }
},
axisLabel: {
interval: 0,
color: '#666',
fontSize: 12
}
},
yAxis: [
{
type: 'value',
name: '金额(万元)',
position: 'left',
axisLine: {
show: true
},
splitLine: {
show: false
},
nameTextStyle: { color: '#666' },
axisLabel: { color: '#666' }
},
{
type: 'value',
name: '利润率(%)',
position: 'right',
min: 0,
max: 100,
axisLine: {
show: true
},
splitLine: {
show: false
},
nameTextStyle: { color: '#666' },
axisLabel: { color: '#666' }
}
],
series: [
{
name: '应收',
type: 'bar',
barGap: '0%',
barWidth: '35%',
itemStyle: {
color: '#52C41A',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '应付',
type: 'bar',
barWidth: '35%',
itemStyle: {
color: '#FF4D4F',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '利润率',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: '#1890FF'
},
lineStyle: {
width: 2
}
}
]
}
this.myProjectChart.setOption(option)
}, },
switchTime(time) { switchTime(time) {
this.activeTime = time this.activeTime = time
...@@ -764,19 +948,27 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -764,19 +948,27 @@ import { uniIcons } from '@dcloudio/uni-ui'
this.updateChartSeries() this.updateChartSeries()
}, },
onResize() { onResize() {
if (this.myChart) { if (this.myLeaderChart) {
this.myChart.resize() this.myLeaderChart.resize()
}
if(this.myProjectChart){
this.myProjectChart.resize()
} }
}, },
sortChart(type) { sortChart(type,chart) {
this.sortType = type this.sortType = type
let data = null
// 获取要排序的数据 let xAxisNames = null
const data = this.currentData.chart if(chart === 'myLeaderChart'){
const bossNames = ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F', '老板G', '老板H', '老板I', '老板J'] data = this.currentData.leaderChartData
xAxisNames = this.currentData.leaderChartData.bossNames
}else if(chart === 'myProjectChart'){
data = this.currentData.projectChartData
xAxisNames = this.currentData.projectChartData.projectNames
}
// 创建排序用的数组 // 创建排序用的数组
const sortArray = bossNames.map((name, index) => ({ const sortArray = xAxisNames.map((name, index) => ({
name, name,
receivable: data.receivable[index], receivable: data.receivable[index],
payable: data.payable[index], payable: data.payable[index],
...@@ -790,9 +982,10 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -790,9 +982,10 @@ import { uniIcons } from '@dcloudio/uni-ui'
}) })
// 更新图表 // 更新图表
this.myChart.setOption({ if(chart === 'myLeaderChart'){
xAxis: { this.myLeaderChart.setOption({
data: sortArray.map(item => item.name) xAxis: {
data: sortArray.map(item => item.name)
}, },
series: [{ series: [{
name: '应收', name: '应收',
...@@ -803,22 +996,46 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -803,22 +996,46 @@ import { uniIcons } from '@dcloudio/uni-ui'
}, { }, {
name: '利润率', name: '利润率',
data: sortArray.map(item => item.profitRate) data: sortArray.map(item => item.profitRate)
}] }]
}) })
}else if(chart === 'myProjectChart'){
this.myProjectChart.setOption({
xAxis: {
data: sortArray.map(item => item.name)
},
series: [{
name: '应收',
data: sortArray.map(item => item.receivable)
}, {
name: '应付',
data: sortArray.map(item => item.payable)
}, {
name: '利润率',
data: sortArray.map(item => item.profitRate)
}]
})
}
}, },
updateChartSeries() { updateChartSeries() {
this.myChart.setOption({ this.myLeaderChart.setOption({
series: [
{ data: this.currentData.leaderChartData.receivable },
{ data: this.currentData.leaderChartData.payable },
{ data: this.currentData.leaderChartData.profitRate }
]
})
this.myProjectChart.setOption({
series: [ series: [
{ data: this.currentData.chart.receivable }, { data: this.currentData.projectChartData.receivable },
{ data: this.currentData.chart.payable }, { data: this.currentData.projectChartData.payable },
{ data: this.currentData.chart.profitRate } { data: this.currentData.projectChartData.profitRate }
] ]
}) })
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.myChart) { if (this.myLeaderChart) {
this.myChart.dispose() this.myLeaderChart.dispose()
} }
window.removeEventListener('resize', this.onResize) window.removeEventListener('resize', this.onResize)
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment