当前位置: 首页 > news >正文

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

 

http://www.hskmm.com/?act=detail&tid=17081

相关文章:

  • 软件构造的用户交互设计 4章
  • 自定义制作docker容器自动自愈容器镜像
  • 如何利用海外 NetNut 网络代理与 AICoding 实战获取 iPhone 17 新品用户评论数据?
  • 第一次编码器测试
  • 04-FreeRTOS的概述及编程规范
  • 10_ select/poll/epoll实现服务端的io多路复用
  • 模拟实战配置实验
  • 国标GB28181公网直播EasyGBS如何构建全域覆盖的应急管理与安全生产解决方案?
  • Serilog.AspNetCore与Serilog的区别
  • 基于MATLAB S函数实现多智能体间歇通信仿真
  • 我天,前端岗要消亡了吗?
  • 闲话
  • java8的集合新API - --
  • 基于MATLAB/Simulink的500kW三相光伏逆变器仿真
  • Docker Compose启动多个镜像实例
  • 卫星时间同步平台:助力分布式测控系统同步工作
  • mkfx 对磁盘设置标签
  • C# Avalonia 15- Animation- Easing
  • 安卓编译重点记录
  • kubelet源码阅读(二)——device plugin 的ListAndWatch过程
  • CyberLink ColorDirector Ultra 2026 14.0.5712.0 视频后期调色
  • CF 1053 Div.2
  • vi编辑器
  • 豆油
  • MQTT
  • 源码安装fail2ban
  • 类的继承与继承的覆盖
  • linux shell awk 中括号 方括号 分割 []
  • springboot配置文件关系及加载顺序
  • 绩效面谈中的优质提问(一)