hotline-bs/src/views/index/center-bottom.vue

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { currentGET } from "@/api";
import { graphic } from "echarts/core";
import signalR from "@/utils/signalR";
const option = ref({});
const getData = () => {
  currentGET("centerBottom", {}).then((res) => {
    console.log("工单类型统计", res);
    if (res.success) {
      setOption(res.data);
    } else {
      window["$message"]({
        text: res.msg,
        type: "warning",
      });
    }
  });
  const setOption = async (newData: any) => {
    option.value = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.6)",
        borderColor: "rgba(147, 235, 248, .8)",
        textStyle: {
          color: "#FFF",
        },
        formatter: function (params: any) {
          // 添加单位
          var result = params[0].name + "<br>";
          params.forEach(function (item: any) {
            if (item.value) {
              if (item.seriesName == "安装率") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "%</br>";
              } else {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "个</br>";
              }
            } else {
              result += item.marker + " " + item.seriesName + " :  - </br>";
            }
          });
          return result;
        },
      },
      legend: {
        data: ["已安装", "计划安装", "安装率"],
        textStyle: {
          color: "#B4B4B4",
        },
        top: "0",
      },
      grid: {
        left: "50px",
        right: "40px",
        bottom: "30px",
        top: "20px",
      },
      xAxis: {
        data: newData.category,
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },

          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisLabel: {
            formatter: "{value}% ",
          },
        },
      ],
      series: [
        {
          name: "已安装",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#956FD4" },
              { offset: 1, color: "#3EACE5" },
            ]),
          },
          data: newData.barData,
        },
        {
          name: "计划安装",
          type: "bar",
          barGap: "-100%",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(156,107,211,0.8)" },
              { offset: 0.2, color: "rgba(156,107,211,0.5)" },
              { offset: 1, color: "rgba(156,107,211,0.2)" },
            ]),
          },
          z: -12,
          data: newData.lineData,
        },
        {
          name: "安装率",
          type: "line",
          smooth: true,
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            color: "#F02FC2",
          },
          data: newData.rateData,
        },
      ],
    };
  };
};
onMounted(() => {
  getData();
  signalR.joinGroup("BsDataShowArea5");
});
</script>
<style scoped lang="scss"></style>