按需引入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';