Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
881defcf by zhangmeng
Options

大屏

1 parent 596aa7c0
Inline Side-by-side
Showing 1 changed file with 161 additions and 33 deletions
src/viewsPc/vip/leftPage.vue
......@@ -2,29 +2,22 @@
<div class="pd20">
<div class="chartCard">
<div class="title">应收款余额</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioA" size="small" @change="radioAChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额与收入</div>
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="全部基地(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="数据因素(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
<div class="po_right">
<el-select v-model="queryParams.select">
<el-option label="全部基地(可多选)" value="month"/>
</el-select>
</div>
<div class="po_right">
<el-select>
<el-option label="数据因素(可多选)" value="month"/>
</el-select>
</div>
</div>
<!-- <div class="po_right">-->
......@@ -67,11 +60,13 @@
<script setup>
import {onMounted, ref, onUnmounted} from 'vue'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const queryParams = ref({
select: ''
})
const zhuRef = ref(null)
const lineRef = ref(null)
const payeeRef = ref(null)
......@@ -138,7 +133,7 @@ const setA = () => {
chartA = echarts.init(zhuRef.value)
const option = {
tooltip: {
trigger: 'item'
trigger: 'item',
},
legend: {
orient: 'vertical',
......@@ -177,7 +172,10 @@ const setA = () => {
emphasis: {
show: false
}
}
},
tooltip: {
trigger: 'axis',
},
},
{
type: 'pie',
......@@ -192,6 +190,9 @@ const setA = () => {
emphasis: {
scale: false
},
tooltip: {
trigger: 'axis',
},
data: [
{value: 12, name: ''},
]
......@@ -204,7 +205,14 @@ const setA = () => {
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 2,
opacity: 0.8,
borderColor: 'rgba(255,0,0,0.05)',
color: function (params) {
// 自定义颜色
let colorList = [
'#8791FD', '#E35E1C', '#E47B75', '#F4AB09', '#F7E10F', '#068EEF', '#1050E4', '#01D7F0', '#46E874'
];
return colorList[params.dataIndex]
}
// borderColor: '#fff',
},
label: {
......@@ -230,7 +238,7 @@ const setA = () => {
{value: 484, name: '合肥'},
{value: 484, name: '武汉'},
{value: 300, name: '新疆'}
]
],
}
]
};
......@@ -248,7 +256,7 @@ const setB = () => {
}
},
legend: {
top: '10%',
top: '3%',
textStyle: {
color: '#FFF'
},
......@@ -262,23 +270,55 @@ const setB = () => {
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
},
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
name: '金额(W)',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
},
}
],
series: [
{
name: '2025年应收账款余额',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(32, 217, 170, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
],
},
borderColor: '#00FFBE',
borderWidth: 1
},
barWidth: '15%'
},
{
name: '2024年应收账款余额',
......@@ -286,7 +326,20 @@ const setB = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(32, 217, 170, .5)'}, // 顶部颜色
{offset: 1, color: 'rgba(8, 130, 160, .5)'} // 底部颜色
],
borderColor: '#00FFBE',
borderWidth: 1
}
},
barWidth: '15%'
},
{
name: '2025年收入',
......@@ -294,7 +347,20 @@ const setB = () => {
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: '#F2C400'}, // 顶部颜色
{offset: 1, color: '#996500'} // 底部颜色
]
},
borderColor: '#F0FF00',
borderWidth: 1
},
barWidth: '15%'
},
{
name: '2024年收入',
......@@ -302,7 +368,20 @@ const setB = () => {
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(242, 196, 0,.5 )'}, // 顶部颜色
{offset: 1, color: 'rgba(153, 101, 0,.5 )'} // 底部颜色
]
},
borderColor: '#F0FF00',
borderWidth: 1
},
barWidth: '15%'
},
]
}
......@@ -334,13 +413,29 @@ const setC = () => {
{
type: 'category',
stack: 'Ad',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
series: [
......@@ -351,7 +446,18 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(17, 201, 104,1 )'}, // 顶部颜色
{offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
]
},
},
barWidth: '40%'
},
{
name: '收费单待签',
......@@ -360,7 +466,18 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(244, 171, 9, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
]
},
},
barWidth: '40%'
},
{
name: '合同待签',
......@@ -369,7 +486,18 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
]
},
},
barWidth: '40%'
},
]
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!