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 @@
</view>
</view>
<!-- 图表区域 -->
<!-- 模拟老板对比图表区域 -->
<view class="chart-container">
<view class="chart-header">
<text class="chart-title">模拟老板对比</text>
<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>
<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>
<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>
</view>
</view>
<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>
</view>
......@@ -252,7 +276,8 @@ import { uniIcons } from '@dcloudio/uni-ui'
return {
loading: true,
activeTime: 'today',
myChart: null,
myLeaderChart: null,
myProjectChart: null,
sortType: 'receivable',
// 所有时间维度的数据集合
......@@ -281,7 +306,14 @@ import { uniIcons } from '@dcloudio/uni-ui'
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],
payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
......@@ -368,11 +400,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 3180
}
},
chart: {
leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [220, 350, 280, 320, 290, 310],
payable: [120, 250, 180, 220, 190, 210],
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: [
{
boss: '老板A',
......@@ -455,11 +494,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 2405
}
},
chart: {
leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
receivable: [180, 290, 220, 260, 230, 250],
payable: [80, 190, 120, 160, 130, 150],
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: [
{
boss: '老板A',
......@@ -542,11 +588,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
monthly: 300000
}
},
chart: {
leaderChartData: {
bossNames: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F'],
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]
},
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: [
{
boss: '老板A',
......@@ -625,30 +678,38 @@ import { uniIcons } from '@dcloudio/uni-ui'
}
},
mounted() {
this.initChart()
this.initLeaderChart()
this.initProjectChart()
// 在 Vue 的下一个 DOM 更新循环中执行
this.$nextTick(() => {
// 检查当前数据的表格数据是否存在且长度大于 0
if (this.currentData.tableData && this.currentData.tableData.length > 0) {
// 如果表格数据存在，设置 loading 状态为 false，表示数据已加载完成
this.loading = false
}
this.sortChart('receivable')
// 对领导图表进行排序，按应收数据排序
this.sortChart('receivable', 'myLeaderChart')
// 对项目图表进行排序，按应收数据排序
this.sortChart('receivable', 'myProjectChart')
// 监听窗口的 resize 事件，调用 onResize 方法以适应图表大小
window.addEventListener('resize', this.onResize)
})
},
methods: {
initChart() {
initLeaderChart() {
// 获取数据点数量
const dataCount = this.currentData.chart.receivable.length;
const dataCount = this.currentData.leaderChartData.receivable.length;
// 计算所需的最小宽度（假设每个数据点需要100px）
const minWidth = Math.max(dataCount * 60, 500);
// 设置容器宽度
const wrapper = document.getElementById('myChart');
const wrapper = document.getElementById('myLeaderChart');
if (wrapper) {
wrapper.style.width = `${minWidth}px`;
wrapper.style.padding = '0 0 5px 0';
}
this.myChart = echarts.init(document.getElementById('myChart'))
this.myLeaderChart = echarts.init(document.getElementById('myLeaderChart'))
const option = {
tooltip: {
......@@ -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) {
this.activeTime = time
......@@ -764,19 +948,27 @@ import { uniIcons } from '@dcloudio/uni-ui'
this.updateChartSeries()
},
onResize() {
if (this.myChart) {
this.myChart.resize()
if (this.myLeaderChart) {
this.myLeaderChart.resize()
}
if(this.myProjectChart){
this.myProjectChart.resize()
}
},
sortChart(type) {
sortChart(type,chart) {
this.sortType = type
// 获取要排序的数据
const data = this.currentData.chart
const bossNames = ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F', '老板G', '老板H', '老板I', '老板J']
let data = null
let xAxisNames = null
if(chart === 'myLeaderChart'){
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,
receivable: data.receivable[index],
payable: data.payable[index],
......@@ -790,9 +982,10 @@ import { uniIcons } from '@dcloudio/uni-ui'
})
// 更新图表
this.myChart.setOption({
xAxis: {
data: sortArray.map(item => item.name)
if(chart === 'myLeaderChart'){
this.myLeaderChart.setOption({
xAxis: {
data: sortArray.map(item => item.name)
},
series: [{
name: '应收',
......@@ -803,22 +996,46 @@ import { uniIcons } from '@dcloudio/uni-ui'
}, {
name: '利润率',
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() {
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: [
{ data: this.currentData.chart.receivable },
{ data: this.currentData.chart.payable },
{ data: this.currentData.chart.profitRate }
{ data: this.currentData.projectChartData.receivable },
{ data: this.currentData.projectChartData.payable },
{ data: this.currentData.projectChartData.profitRate }
]
})
}
},
beforeDestroy() {
if (this.myChart) {
this.myChart.dispose()
if (this.myLeaderChart) {
this.myLeaderChart.dispose()
}
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