写一个简单的ECharts图例：准备工具和配置（一）

1、准备工具

使用Vue、Ts、Apache ECharts技术，Apache ECharts相关文档可查看链接

Apache EChartshttps://echarts.apache.org/zh/index.html

2、加载依赖

npm install echarts

或者

yarn add echarts

3、添加配置

当我们正式编写一个ECharts图例的时候，最好按需引入组件，这样可以减少页面加载的时长；同时可以把引入的代码单独成一个文件ts，将配置好的EChartsOption、echarts导出使用，方便后续维护。如下参考：可以在 src/utils 文件夹下创建 echarts.ts 文件，将代码写入文件里面。

import * as echarts from "echarts/core";

import {

  TitleComponent,

  TitleComponentOption,

  TooltipComponent,

  TooltipComponentOption,

  GridComponent,

  GridComponentOption,

  LegendComponent,

  LegendComponentOption,

  DatasetComponent,

  DatasetComponentOption,

  DataZoomComponent,

  MarkLineComponent,

  MarkLineComponentOption,

} from "echarts/components";

import {

  PieChart,

  PieSeriesOption,

  BarChart,

  BarSeriesOption,

  LineChart,

  LineSeriesOption,

  FunnelChart,

  FunnelSeriesOption,

  PictorialBarChart,

  PictorialBarSeriesOption,

  GaugeChart,

  GaugeSeriesOption

} from "echarts/charts";

import { LabelLayout, UniversalTransition } from "echarts/features";

import { CanvasRenderer } from "echarts/renderers";


/** 按需引入组件 */
echarts.use([

  TitleComponent,

  TooltipComponent,

  GridComponent,

  LegendComponent,

  PieChart,

  BarChart,

  CanvasRenderer,

  LabelLayout,

  DatasetComponent,

  LineChart,

  FunnelChart,

  PictorialBarChart,

  UniversalTransition,

  GaugeChart,

  MarkLineComponent,

  DataZoomComponent

]);

/** 配置可选项 */

export type EChartsOption = echarts.ComposeOption<

  | TitleComponentOption

  | TooltipComponentOption

  | GridComponentOption

  | LegendComponentOption

  | PieSeriesOption

  | BarSeriesOption

  | DatasetComponentOption

  | LineSeriesOption

  | FunnelSeriesOption

  | PictorialBarSeriesOption

  | GaugeSeriesOption

  | MarkLineComponentOption

>;

export default echarts