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

<script setup lang="ts">
import { ElMessage } from "element-plus";

const option = ref({});
const getData = () => {
  let dateList = ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', "2022-04"]
  let numList = [1, 5, 2, 4, 9, 6]
  let numList2 = [6, 5, 4, 3, 2, 1]
  setOption(dateList, numList, numList2)
};
const setOption = async (xData: any[], yData: any[], yData2: 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",
      },
    },
    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: "0px",
      top: "100px",
      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",
                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>
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss"></style>