按需引入echarts

-

 

 

 

 

 

-

// echarts-config.js
// ECharts按需引入配置文件
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  RadarChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  LegendComponent,
  GraphicComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  LegendComponent,
  GraphicComponent,
  CanvasRenderer
]);

export default echarts;
// ============================================================
// ECharts按需引入指南
// 官方文档：https://echarts.apache.org/zh/option.html#title
// 怎么判断需要引入什么组件???
// 1.图标类型与组件对应关系
// 柱状图/条形图
import { BarChart } from 'echarts/charts';

// 折线图/面积图
import { LineChart } from 'echarts/charts';

// 饼图/环形图
import { PieChart } from 'echarts/charts';

// 散点图/气泡图
import { ScatterChart } from 'echarts/charts';

// 雷达图
import { RadarChart } from 'echarts/charts';

// 仪表盘
import { GaugeChart } from 'echarts/charts';

// 漏斗图
import { FunnelChart } from 'echarts/charts';

// 地图
import { MapChart } from 'echarts/charts';
// 2.通用组件（大部分图表都需要）
import {
  TitleComponent,      // 标题
  TooltipComponent,    // 提示框
  GridComponent,       // 网格
  LegendComponent,     // 图例
  ToolboxComponent,    // 工具箱（下载、刷新等）
  DataZoomComponent,   // 数据区域缩放
} from 'echarts/components';

// 3.根据配置项反推需要什么组件
// 如果您在options中使用了这些配置，就需要引入对应的组件：

// 需要 TitleComponent
title: { text: '图表标题' }

// 需要 TooltipComponent  
tooltip: { trigger: 'axis' }

// 需要 LegendComponent
legend: { data: ['系列1', '系列2'] }

// 需要 GridComponent
grid: { left: '3%', right: '4%', bottom: '3%' }

// 需要 ToolboxComponent
toolbox: { feature: { saveAsImage: {} } }

// 需要 DataZoomComponent
dataZoom: [{ type: 'inside' }]

// 4.根据错误信息判断
// 错误示例：Component seriesType.pie not exists.
// 解决方案：需要引入 PieChart
import { PieChart } from 'echarts/charts';

// 错误示例：Component legend not exists. 
// 解决方案：需要引入 LegendComponent
import { LegendComponent } from 'echarts/components';