AIzhushou-screen/src/views/index/right-center.vue

<script setup lang="ts">
import { ElMessage } from "element-plus";
const activeTab = ref(0);
const tabs = [
  { title: '本科', value: 3900, dateList: ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"], numList: [1, 5, 2, 4, 9, 6] },
  { title: '专科', value: 4500, dateList: ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"], numList: [4, 9, 6, 1, 5, 2] },
  { title: '专升本', value: 6000, dateList: ['2-6', '2-7', '2-8', '2-9', '2-10', "2-11"], numList: [1, 6, 5, 2, 4, 9,] },
];

const changeTab = (index: number) => {
  activeTab.value = index;
  setOption(tabs[index].dateList, tabs[index].numList)
};

const option = ref({});
const getData = () => {
  let dateList = ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"]
  let numList = [1, 5, 2, 4, 9, 6]
  setOption(dateList, numList)
};
const setOption = async (xData: any[], yData: any[]) => {
  option.value = {
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        // show: false,
        // lineStyle: {
        //   color: "rgba(31,99,163,.2)",
        // },
      },
      axisLine: {
        show: false, // 去除轴线
        // lineStyle: {
        //   color: "rgba(31,99,163,.1)",
        // },
      },
      axisLabel: {
        color: "#fff",
        fontWeight: "500",
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgb(0, 148, 168)',
          type: 'solid',
          extraCssText: 'height:0;',
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false, // 去除网格线
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#fff", // 轴标文字颜色
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: false,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "30px",
      containLabel: true,
      // borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: false,
        symbol: "circle", // 拐点样式 -- 这里是个圆
        symbolSize: 7, // 拐点大小
        name: "当日缴费人数",
        // color: "rgba(9,202,243,.7)",
        color: '#fff',
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#09CAF3",
                fontSize: '16',
                // backgroundColor: "rgba(9,202,243,0.1)",
                // borderRadius: 6,
                // borderColor: "rgba(9,202,243,.5)",
                // padding: [7, 14],
                // formatter: "报警2：{c}",
                // borderWidth: 0.5,
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#09CAF3",
                shadowColor: "#09CAF3",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
        lineStyle: {
          width: 4, // 线条宽度  
          color: {
            type: 'linear', // 线性渐变  
            x: 0, // 渐变方向为从左到右  
            y: 0,
            x2: 0,
            y2: 1, // 渐变方向也可以设置为从下到上，调整 x2 和 y2 的值  
            colorStops: [
              // { offset: 0, color: 'rgba(0, 254, 157, 1)' }, // 0% 处的颜色  
              { offset: 0, color: 'rgba(2, 221, 241, 1)' }, // 50% 处的颜色  
              { offset: 1, color: 'rgba(0, 254, 157, 1)' } // 100% 处的颜色  -- 顶点处颜色
            ],
            global: false // 缺省为 false  
          },
        },
      }
    ],
  };
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="tabs">
    <div class="no-tab">
      <p>当日缴费总人数</p>
      <p> 12,000 </p>
    </div>
    <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
      <p>{{ tab.title }}</p>
      <p>{{ tab.value }}</p>
    </div>
  </div>
  <!-- <div class="tab-content"> -->
  <!-- <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index"> -->
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
  <!-- </div> -->
  <!-- </div> -->
</template>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: space-between;

  div {
    width: 80px;
    padding: 10px;
    cursor: pointer;
    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(145, 175, 207, 0.4) 100%);
    border-top: 2px solid rgb(152, 194, 221);
    box-shadow: 0px -10px 5px rgba(145, 175, 207, 0.2);
  }

  div.active {
    // background-color: #ccc;
    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(0, 155, 228, 0.6) 100%);
    border-top: 2px solid #00A2FF;
    box-shadow: 0px -10px 5px rgba(0, 162, 255, 0.2);

  }

  .no-tab {
    width: 160px;
    height: 80px;
    cursor: default;
  }
}

.chart {
  height: 250px;
}
</style>