大屏

zhangmeng
Showing 1 changed file with 162 additions and 34 deletions
src/viewsPc/vip/leftPage.vue
--- a/src/viewsPc/vip/leftPage.vue
View file @881defc
+++ b/src/viewsPc/vip/leftPage.vue
View file @881defc
@@ -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">-->
+        <div class="po_right">
-        <!--          <el-select>-->
+          <el-select v-model="queryParams.select">
-        <!--            <el-option label="全部基地(可多选)" value="month"/>-->
+            <el-option label="全部基地(可多选)" value="month"/>
-        <!--          </el-select>-->
+          </el-select>
-        <!--        </div>-->
+        </div>
-        <!--        <div class="title">-->
+        <div class="po_right">
-        <!--          <el-select>-->
+          <el-select>
-        <!--            <el-option label="数据因素(可多选)" value="month"/>-->
+            <el-option label="数据因素(可多选)" value="month"/>
-        <!--          </el-select>-->
+          </el-select>
-        <!--        </div>-->
+        </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%'
      },
    ]
  }