line-charts

<template>
  <div class="pie-box" :id="chartIds"></div>
</template>
<script lang="ts">
/**
 * set:(配置项){
 **************legend:(){type:,top:,left:,right:,bottom:,}
 **************series:(){top:,left:,right:,bottom:,}
 * }
 * data:(图表数据)
 * xData:X轴数据
 * chartId:(表格ID:'String')
 * title:表格头部名称
 */
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import echarts from "@/plugins/echarts";
const UseCharts = (chartIds, titles) => {
  const _chartsData: any = reactive({
    data: [],
    dataNum: [],
    legendData: [],
  });
  let myChart: any = null;
  const chartsRender = () => {
    //@ts-ignore
    myChart = echarts.getInstanceByDom(document.getElementById(chartIds));
    if (myChart == null) {
      //@ts-ignore
      myChart = echarts.init(document.getElementById(chartIds));
    }

    let option = {
      legend: {
        show: true,
        top: "auto",
        right: "0",
        itemGap: 10,
        itemWidth: 8,
        itemHeight: 8,
        pageButtonItemGap: 5,
        orient: "horizontal",
        icon: "rect",
        textStyle: {
          fontSize: 12,
          color: "#313233",
        },
      },
      grid: {
        left: "0",
        right: "3%",
        bottom: "0",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          name: "IP",
          type: "line",
          data: _chartsData.data.ips,
          smooth: true,
        },
        {
          name: "访问次数",
          type: "line",
          data: _chartsData.data.access,
          smooth: true,
        },
      ],
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: _chartsData.data.date,
        nameGap: 22,
      },
      yAxis: {
        type: "value",
        nameLocation: "start",
        nameTextStyle: {
          color: "#2c3542",
          align: "right",
          verticalAlign: "top",
        },
        nameGap: 22,
      },
    };
    myChart.setOption(option);
  };
  window.onresize = function (ec) {
    myChart.resize(); // 自适应大小变化
  };
  return {
    _chartsData,
    chartsRender,
    myChart,
  };
};
export default defineComponent({
  props: {
    set: {
      type: Array,
      default: () => {
        return [];
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    chartId: { type: String, default: "" },
    title: { type: String, default: "" },
  },
  setup(props: any) {
    //表格相关
    let chartIds: any = reactive(props.chartId);
    let titles: any = reactive(props.title);

    const { _chartsData, chartsRender, myChart } = UseCharts(chartIds, titles);
    //生命周期
    onMounted(() => {
      chartsRender();
    });
    watch(
      () => props.data,
      () => {
        _chartsData.data = props.data;
        chartsRender();
      }
    );

    return {
      ...toRefs(_chartsData),
      chartIds,
    };
  },
});
</script>
<style lang="scss" scoped>
.pie-box {
  width: 100%;
  height: 100%;
}
</style>

import type { App } from "vue";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent,
} from "echarts/components";

const { use } = echarts;
// const { use, registerTheme } = echarts;

use([
  PieChart,
  BarChart,
  LineChart,
  CanvasRenderer,
  GridComponent,
  TitleComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent,
]);

/**
 * @description 自定义主题
 * @see {@link https://echarts.apache.org/zh/download-theme.html}
 */
// import theme from "./theme.json";
// registerTheme("ovilia-green", theme);

/**
 * @description 按需引入echarts
 * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
 * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，为了配合 https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html 使用
 */
export function useEcharts(app: App) {
  app.config.globalProperties.$echarts = echarts;
}

export default echarts;