echars 组件

使用

导入

import { useECharts } from "@/hooks/web/useECharts";
import type { EChartsOption } from "echarts";

使用

<template>
  <div ref="echartsRef" class="w-full h-100"></div>
</template>

<script lang="ts">
...导入

// 拿到实例
const echartsRef = ref<HTMLDivElement>();
const { setOptions } = useECharts(commandRef as any);
onMounted(() => {
  // 设置属性
  const option: EChartsOption = {
    ...
  };
  setOptions(option);
});

</script>

需要更多图表类型(导入)

默认的图表支持在@/utils/lib/echarts.ts

import * as echarts from "echarts/core";

import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  PictorialBarChart,
  RadarChart,
  ScatterChart,
  GaugeChart,
} from "echarts/charts";

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  LegendComponent,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
} from "echarts/components";

import { SVGRenderer } from "echarts/renderers";

echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart,
  SVGRenderer,
  PictorialBarChart,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  ScatterChart,
  GaugeChart,
]);

export default echarts;

要使用别的自己导入就行