vva-cli/templates/ssr/src/pages/overview/hooks/useTotalChart.ts

A CLI of Vue 3 and Typescript and Element-plus in Vite

import http from "helper/http";
import * as echarts from "echarts";
import { reactive } from "vue";

declare interface ChartData {
  name: string;
  value: number;
}

export default function useTotalChart(domID: string, color: string[]) {
  const total = reactive({
    views: 0,
    contents: 0,
    registers: 0,
  });
  // 拉取数据
  async function fetchDatas() {
    const datas = await http.get("/statistics/total");
    const {
      visits = 0,
      tourist = 0,
      men,
      women,
      secreat,
      articles,
      resources,
    } = datas as any;
    total.views = visits + tourist;
    total.contents = articles + resources;
    total.registers = men + women + secreat;
    return [
      [
        {
          value: visits,
          name: "注册用户",
        },
        {
          value: tourist,
          name: "游客",
        },
      ],
      [
        {
          value: articles,
          name: "专栏",
        },
        {
          value: resources,
          name: "资源",
        },
      ],
      [
        {
          value: men,
          name: "男",
        },
        {
          value: women,
          name: "女",
        },
        {
          value: secreat,
          name: "保密",
        },
      ],
    ];
  }
  // 图表
  function getOption(datas: Array<Array<ChartData>>) {
    const series = datas.map((ele, index) => ({
      type: "pie",
      center: [`${15 + index * 35}%`, "50%"],
      radius: [50, 66],
      label: {
        normal: {
          show: false,
          position: "center",
          formatter: "{value|{c}}\n{label|{b}}",
          rich: {
            value: {
              padding: 5,
              align: "center",
              verticalAlign: "middle",
              fontSize: 20,
            },
            label: {
              align: "center",
              verticalAlign: "middle",
              fontSize: 14,
            },
          },
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: "12",
          },
        },
      },
      data: ele,
    }));
    return {
      color,
      series,
    };
  }
  function render() {
    const chart = echarts.init(document.getElementById(domID));
    chart.showLoading();
    fetchDatas().then((datas) => {
      chart.hideLoading();
      chart.setOption(getOption(datas));
      chart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1, 2],
        dataIndex: 0,
      });
      let dataIndex = 0;
      chart.on("mouseover", (e) => {
        if (e.dataIndex !== dataIndex) {
          [0, 1, 2].forEach((seriesIndex) => {
            if (seriesIndex === e.seriesIndex) {
              chart.dispatchAction({
                type: "downplay",
                seriesIndex,
                dataIndex: dataIndex,
              });
            }
          });
        }
      });
      chart.on("mouseout", (e) => {
        dataIndex = e.dataIndex;
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: e.seriesIndex,
          dataIndex: e.dataIndex,
        });
      });
    });
  }
  return {
    render,
    fetchDatas,
    total,
  };
}