提醒

只是记录一下,怕忘了了,非常简单.

记录使用Echarts

第一步引入echarts

yarn add echarts
yarn add @types/echarts

// 这里有init方法可以初始化
import * as echarts from "echarts/core";
// 这里引入要使用的图表类型BarChart,以及需要使用的TS类型BarSeriesOption
import { BarChart, BarSeriesOption } from "echarts/charts";
// 这里引入基本的组件和TS类型,GridComponentOption里面有xAxis,yAxis,series类型，TooltipComponent,这里可以设置触碰后的效果。
import {
  GridComponent,
  GridComponentOption,
  TooltipComponent,
  TooltipComponentOption,
} from "echarts/components";
//这里设置渲染器,有SvgRenderer和另外一个渲染器可以选择
import { SVGRenderer } from "echarts/renderers";

//这里定义限定传入options的类型
type ECOption = echarts.ComposeOption<
  BarSeriesOption | GridComponentOption | TooltipComponentOption
>;
// 最后一定要use一下
echarts.use([BarChart, GridComponent, SVGRenderer, TooltipComponent]);

设置容器一定要添加width和height样式属性不让会报找不到宽和高的警告 <div ref="usersChart" :style="{ width: '100%', height: '100%' }"></div>
获取渲染DOM对象获取对象时要将usersChart类型编程HTMLElement,默认是HTMLElement | null const usersChart = ref() as Ref<HTMLElement>;

接下来的操作在onMounted中进行

初始化一下 const chart = echarts.init(usersChart.value);

编写options参数(参数什么意思官网可以查到)

 const options: ECOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        type: "bar",
        color: "#3398DB",
        data: [
          410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150,
        ],
        barWidth: "60%",
      },
    ],
    xAxis: {
      type: "category",
      show: false,
      data: [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
      ],
    },
    yAxis: {
      show: false,
    },
    grid: { top: 0, bottom: 0, left: 0, right: 0 },
  };

最后异步 chart.setOption(options);

完结

图就画完了

记录一下Echarts使用

提醒

记录使用Echarts

接下来的操作在onMounted中进行

完结