-
-
// 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';