1. 为什么需要实时数据监控仪表盘在数字化转型的浪潮中数据可视化已经成为企业运营的刚需。想象一下如果你是一家电商平台的运维工程师老板突然问今天订单量怎么样用户活跃度如何你总不能打开数据库命令行一条条查数据吧这时候一个实时刷新的数据监控仪表盘就能让你优雅地展示关键指标。我去年接手过一个物流配送系统的优化项目最初团队还在用Excel表格统计配送时效每次开会都要手动刷新数据。后来我们用SpringBootVueECharts搭建了实时监控系统配送延误率下降了23%这就是可视化带来的直接价值。实时监控仪表盘的核心优势在于即时反馈数据变化秒级更新告别手动刷新多维度展示通过折线图、柱状图、仪表盘等多种图表呈现数据决策支持关键指标一目了然帮助快速发现问题异常预警可以设置阈值当数据异常时自动告警2. 技术选型与架构设计2.1 为什么选择SpringBootVueECharts这个技术组合是我经过多个项目验证后的黄金搭档。记得第一次用jQuery直接操作ECharts时代码乱得像意大利面条。后来改用Vue的数据绑定开发效率直接翻倍。后端选择SpringBoot的原因快速开发内嵌Tomcat省去繁琐的服务器配置RESTful支持天然适合前后端分离架构WebSocket集成一行注解就能实现实时推送生态丰富Spring Data JPA、Spring Security等组件开箱即用前端选择Vue的原因响应式编程数据驱动视图自动更新图表组件化开发可以封装可复用的图表组件轻量高效相比React和Angular更易上手ECharts的优势丰富的图表类型从基础折线图到复杂关系图应有尽有动态渲染数据更新时丝滑的过渡动画移动端适配自动响应屏幕尺寸变化2.2 整体架构设计我们的系统架构是这样的[数据源] → [SpringBoot API] ←WebSocket/HTTP→ [Vue前端] → [ECharts渲染]我建议采用两种数据获取方式主动轮询适合数据变化不频繁的场景前端定时调用APIWebSocket推送适合实时性要求高的场景后端主动推送在物流项目中我们混合使用了这两种方式订单状态变化用WebSocket实时推送统计数据每分钟轮询一次。这种混合策略既保证了实时性又不会给服务器造成太大压力。3. 后端实现关键步骤3.1 搭建SpringBoot基础项目首先用Spring Initializr创建项目我习惯用IDEA的创建向导选择Spring Boot 2.7.x添加依赖Web、WebSocket、JPA、Lombok打包方式选Jar方便部署// application.properties关键配置 spring.datasource.urljdbc:mysql://localhost:3306/monitor_db spring.datasource.usernameroot spring.datasource.password123456 spring.jpa.hibernate.ddl-autoupdate # WebSocket配置 server.port8080踩坑提醒记得关闭Thymeleaf缓存否则开发时修改模板不会立即生效spring.thymeleaf.cachefalse3.2 实现数据API接口假设我们要监控服务器CPU和内存使用率先创建实体类Entity Data public class ServerMetric { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String serverName; private Double cpuUsage; // CPU使用率百分比 private Double memoryUsage; // 内存使用率 private LocalDateTime createTime; }实现一个带分页查询的REST接口RestController RequestMapping(/api/metrics) public class MetricController { Autowired private MetricRepository metricRepository; GetMapping public PageServerMetric getMetrics( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size) { return metricRepository.findAll( PageRequest.of(page, size, Sort.by(createTime).descending())); } }3.3 实现WebSocket实时推送这是实时监控的核心配置WebSocketConfiguration EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker(/topic); config.setApplicationDestinationPrefixes(/app); } Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint(/ws-metrics).withSockJS(); } }创建定时任务模拟数据变化并推送Service public class MetricService { Autowired private SimpMessagingTemplate messagingTemplate; Scheduled(fixedRate 3000) public void sendMetrics() { ServerMetric metric new ServerMetric(); metric.setCpuUsage(Math.random() * 100); metric.setMemoryUsage(Math.random() * 100); messagingTemplate.convertAndSend(/topic/metrics, metric); } }4. 前端开发实战4.1 初始化Vue项目推荐用Vite创建项目速度比传统vue-cli快很多npm create vitelatest monitor-dashboard --template vue cd monitor-dashboard npm install axios echarts sockjs-client webstomp-client在main.js中全局引入EChartsimport * as echarts from echarts app.config.globalProperties.$echarts echarts4.2 封装图表组件创建一个可复用的图表组件template div refchart :style{ width, height }/div /template script export default { props: { width: { type: String, default: 100% }, height: { type: String, default: 400px }, option: { type: Object, required: true } }, mounted() { this.initChart() }, methods: { initChart() { this.chart this.$echarts.init(this.$refs.chart) this.chart.setOption(this.option) window.addEventListener(resize, this.resizeHandler) }, resizeHandler() { this.chart.resize() } }, beforeUnmount() { window.removeEventListener(resize, this.resizeHandler) this.chart.dispose() } } /script4.3 实现实时数据绑定对接WebSocket的代码import { over } from webstomp-client export default { data() { return { cpuData: [], memoryData: [], connection: null } }, mounted() { this.connectWebSocket() this.fetchHistoryData() }, methods: { connectWebSocket() { const socket new SockJS(http://localhost:8080/ws-metrics) this.connection over(socket) this.connection.connect({}, () { this.connection.subscribe(/topic/metrics, (message) { const metric JSON.parse(message.body) this.updateChartData(metric) }) }) }, updateChartData(metric) { // 限制数据量不超过100条 if (this.cpuData.length 100) { this.cpuData.shift() this.memoryData.shift() } const time new Date().toLocaleTimeString() this.cpuData.push({ time, value: metric.cpuUsage }) this.memoryData.push({ time, value: metric.memoryUsage }) } } }5. ECharts高级配置技巧5.1 动态仪表盘实现监控系统常用仪表盘展示关键指标const gaugeOption { series: [{ type: gauge, center: [50%, 60%], startAngle: 180, endAngle: 0, min: 0, max: 100, splitNumber: 10, radius: 100%, axisLine: { lineStyle: { width: 30, color: [ [0.3, #67e0e3], [0.7, #37a2da], [1, #fd666d] ] } }, pointer: { show: false }, detail: { formatter: {value}%, fontSize: 30, offsetCenter: [0, -20%] }, data: [{ value: 0 }] }] }5.2 多图表联动交互实现图表间的联动高亮// 在mounted中 this.$echarts.connect([cpuChart, memoryChart]) // 鼠标事件处理 chart.on(highlight, (params) { const seriesIndex params.seriesIndex const dataIndex params.dataIndex // 联动其他图表 })5.3 性能优化建议在大数据量场景下使用dataset管理数据源开启animation: false禁用动画使用dataZoom进行数据缩放对静态数据启用series.silent trueconst optimizedOption { dataset: { source: [] }, animation: false, dataZoom: [{ type: slider, start: 0, end: 100 }], series: { silent: true, type: line, smooth: true } }6. 项目部署与监控6.1 前端打包优化修改vite.config.jsexport default defineConfig({ build: { rollupOptions: { output: { manualChunks(id) { if (id.includes(echarts)) { return echarts } } } } } })6.2 后端性能监控添加Spring Boot Actuatordependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-actuator/artifactId /dependency配置application.propertiesmanagement.endpoints.web.exposure.includehealth,metrics,prometheus management.metrics.export.prometheus.enabledtrue6.3 容器化部署Dockerfile示例# 前端 FROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf # 后端 FROM openjdk:17-jdk-slim COPY target/monitor-backend.jar app.jar ENTRYPOINT [java,-jar,/app.jar]nginx.conf关键配置server { listen 80; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } location /ws { proxy_pass http://backend:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection Upgrade; } }7. 常见问题排查7.1 WebSocket连接失败可能原因及解决方案跨域问题确保后端配置了正确的CORS规则SockJS兼容性现代浏览器建议直接使用WebSocket协议防火墙限制检查服务器8080端口是否开放7.2 图表渲染异常典型问题处理空白图表检查DOM元素宽高是否有效数据不更新确认Vue响应式数据是否正确变更内存泄漏在组件销毁时调用dispose()7.3 性能瓶颈分析使用Chrome DevTools排查性能面板记录操作过程内存面板检查泄漏Network面板查看请求耗时对于大数据量场景可以考虑使用Web Worker处理数据实现数据分片加载开启ECharts的渐进渲染8. 项目扩展方向8.1 移动端适配方案使用rem布局// 在main.js中 function setRem() { const baseSize 16 const scale document.documentElement.clientWidth / 1920 document.documentElement.style.fontSize baseSize * scale px } window.addEventListener(resize, setRem) setRem()ECharts配置响应式const chart echarts.init(dom) const resizeHandler () chart.resize() window.addEventListener(resize, resizeHandler)8.2 多主题切换定义主题配置const themes { light: { backgroundColor: #fff, textColor: #333 }, dark: { backgroundColor: #222, textColor: #eee } } function applyTheme(themeName) { const theme themes[themeName] this.chart.setOption({ backgroundColor: theme.backgroundColor, textStyle: { color: theme.textColor } }) }8.3 接入真实数据源常见数据源集成方式数据库直连适合内部系统API网关通过统一接口聚合多个数据源消息队列处理高并发数据流Kafka集成示例KafkaListener(topics metrics-topic) public void handleMetric(ServerMetric metric) { messagingTemplate.convertAndSend(/topic/metrics, metric); }9. 安全加固措施9.1 API接口保护添加Spring SecurityConfiguration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/**).authenticated() .and() .httpBasic(); } }9.2 WebSocket认证实现ChannelInterceptorOverride public void configureClientInboundChannel(ChannelRegistration registration) { registration.interceptors(new ChannelInterceptor() { Override public Message? preSend(Message? message, MessageChannel channel) { StompHeaderAccessor accessor StompHeaderAccessor.wrap(message); if (StompCommand.CONNECT.equals(accessor.getCommand())) { // 验证token逻辑 } return message; } }); }9.3 前端敏感数据处理对敏感数据做脱敏处理function desensitize(data) { return { ...data, ip: data.ip.replace(/(\d)\.(\d)\.\d\.\d/, $1.$2.***.***) } }10. 项目实战经验分享在最近的一个智能工厂项目中我们为生产线开发了实时监控系统。遇到最棘手的问题是当500设备同时上报数据时前端图表会卡顿。最终通过以下方案解决数据采样后端对高频数据做降采样处理批量更新前端改用requestAnimationFrame批量渲染WebAssembly加速复杂计算用Rust编写后编译成Wasm性能优化前后对比指标优化前优化后渲染帧率12fps60fpsCPU占用85%30%内存使用1.2GB400MB另一个经验是关于错误处理的。我们发现在弱网环境下WebSocket经常断开。最终实现的断线重连机制function connect() { this.connection over(new SockJS(this.endpoint)) this.connection.connect({}, () { this.retryCount 0 this.subscribe() }, (error) { this.retryCount const delay Math.min(1000 * this.retryCount, 10000) setTimeout(() this.connect(), delay) }) }对于想深入学习的开发者我推荐以下进阶方向可视化算法学习D3.js底层原理性能优化掌握Web Workers和OffscreenCanvas数据分析了解Apache Spark等大数据处理工具架构设计研究微服务下的实时数据管道最后分享一个调试小技巧在Chrome的Console中直接调用ECharts实例方法// 获取页面上的第一个图表实例 const chart [...document.querySelectorAll([echarts_instance])] .map(el echarts.getInstanceByDom(el))[0] // 动态修改配置 chart.setOption({ series: [{ type: bar }] })
SpringBoot+Vue+ECharts实战：从零构建一个实时数据监控仪表盘
发布时间：2026/5/18 5:14:17
1. 为什么需要实时数据监控仪表盘在数字化转型的浪潮中数据可视化已经成为企业运营的刚需。想象一下如果你是一家电商平台的运维工程师老板突然问今天订单量怎么样用户活跃度如何你总不能打开数据库命令行一条条查数据吧这时候一个实时刷新的数据监控仪表盘就能让你优雅地展示关键指标。我去年接手过一个物流配送系统的优化项目最初团队还在用Excel表格统计配送时效每次开会都要手动刷新数据。后来我们用SpringBootVueECharts搭建了实时监控系统配送延误率下降了23%这就是可视化带来的直接价值。实时监控仪表盘的核心优势在于即时反馈数据变化秒级更新告别手动刷新多维度展示通过折线图、柱状图、仪表盘等多种图表呈现数据决策支持关键指标一目了然帮助快速发现问题异常预警可以设置阈值当数据异常时自动告警2. 技术选型与架构设计2.1 为什么选择SpringBootVueECharts这个技术组合是我经过多个项目验证后的黄金搭档。记得第一次用jQuery直接操作ECharts时代码乱得像意大利面条。后来改用Vue的数据绑定开发效率直接翻倍。后端选择SpringBoot的原因快速开发内嵌Tomcat省去繁琐的服务器配置RESTful支持天然适合前后端分离架构WebSocket集成一行注解就能实现实时推送生态丰富Spring Data JPA、Spring Security等组件开箱即用前端选择Vue的原因响应式编程数据驱动视图自动更新图表组件化开发可以封装可复用的图表组件轻量高效相比React和Angular更易上手ECharts的优势丰富的图表类型从基础折线图到复杂关系图应有尽有动态渲染数据更新时丝滑的过渡动画移动端适配自动响应屏幕尺寸变化2.2 整体架构设计我们的系统架构是这样的[数据源] → [SpringBoot API] ←WebSocket/HTTP→ [Vue前端] → [ECharts渲染]我建议采用两种数据获取方式主动轮询适合数据变化不频繁的场景前端定时调用APIWebSocket推送适合实时性要求高的场景后端主动推送在物流项目中我们混合使用了这两种方式订单状态变化用WebSocket实时推送统计数据每分钟轮询一次。这种混合策略既保证了实时性又不会给服务器造成太大压力。3. 后端实现关键步骤3.1 搭建SpringBoot基础项目首先用Spring Initializr创建项目我习惯用IDEA的创建向导选择Spring Boot 2.7.x添加依赖Web、WebSocket、JPA、Lombok打包方式选Jar方便部署// application.properties关键配置 spring.datasource.urljdbc:mysql://localhost:3306/monitor_db spring.datasource.usernameroot spring.datasource.password123456 spring.jpa.hibernate.ddl-autoupdate # WebSocket配置 server.port8080踩坑提醒记得关闭Thymeleaf缓存否则开发时修改模板不会立即生效spring.thymeleaf.cachefalse3.2 实现数据API接口假设我们要监控服务器CPU和内存使用率先创建实体类Entity Data public class ServerMetric { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String serverName; private Double cpuUsage; // CPU使用率百分比 private Double memoryUsage; // 内存使用率 private LocalDateTime createTime; }实现一个带分页查询的REST接口RestController RequestMapping(/api/metrics) public class MetricController { Autowired private MetricRepository metricRepository; GetMapping public PageServerMetric getMetrics( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size) { return metricRepository.findAll( PageRequest.of(page, size, Sort.by(createTime).descending())); } }3.3 实现WebSocket实时推送这是实时监控的核心配置WebSocketConfiguration EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker(/topic); config.setApplicationDestinationPrefixes(/app); } Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint(/ws-metrics).withSockJS(); } }创建定时任务模拟数据变化并推送Service public class MetricService { Autowired private SimpMessagingTemplate messagingTemplate; Scheduled(fixedRate 3000) public void sendMetrics() { ServerMetric metric new ServerMetric(); metric.setCpuUsage(Math.random() * 100); metric.setMemoryUsage(Math.random() * 100); messagingTemplate.convertAndSend(/topic/metrics, metric); } }4. 前端开发实战4.1 初始化Vue项目推荐用Vite创建项目速度比传统vue-cli快很多npm create vitelatest monitor-dashboard --template vue cd monitor-dashboard npm install axios echarts sockjs-client webstomp-client在main.js中全局引入EChartsimport * as echarts from echarts app.config.globalProperties.$echarts echarts4.2 封装图表组件创建一个可复用的图表组件template div refchart :style{ width, height }/div /template script export default { props: { width: { type: String, default: 100% }, height: { type: String, default: 400px }, option: { type: Object, required: true } }, mounted() { this.initChart() }, methods: { initChart() { this.chart this.$echarts.init(this.$refs.chart) this.chart.setOption(this.option) window.addEventListener(resize, this.resizeHandler) }, resizeHandler() { this.chart.resize() } }, beforeUnmount() { window.removeEventListener(resize, this.resizeHandler) this.chart.dispose() } } /script4.3 实现实时数据绑定对接WebSocket的代码import { over } from webstomp-client export default { data() { return { cpuData: [], memoryData: [], connection: null } }, mounted() { this.connectWebSocket() this.fetchHistoryData() }, methods: { connectWebSocket() { const socket new SockJS(http://localhost:8080/ws-metrics) this.connection over(socket) this.connection.connect({}, () { this.connection.subscribe(/topic/metrics, (message) { const metric JSON.parse(message.body) this.updateChartData(metric) }) }) }, updateChartData(metric) { // 限制数据量不超过100条 if (this.cpuData.length 100) { this.cpuData.shift() this.memoryData.shift() } const time new Date().toLocaleTimeString() this.cpuData.push({ time, value: metric.cpuUsage }) this.memoryData.push({ time, value: metric.memoryUsage }) } } }5. ECharts高级配置技巧5.1 动态仪表盘实现监控系统常用仪表盘展示关键指标const gaugeOption { series: [{ type: gauge, center: [50%, 60%], startAngle: 180, endAngle: 0, min: 0, max: 100, splitNumber: 10, radius: 100%, axisLine: { lineStyle: { width: 30, color: [ [0.3, #67e0e3], [0.7, #37a2da], [1, #fd666d] ] } }, pointer: { show: false }, detail: { formatter: {value}%, fontSize: 30, offsetCenter: [0, -20%] }, data: [{ value: 0 }] }] }5.2 多图表联动交互实现图表间的联动高亮// 在mounted中 this.$echarts.connect([cpuChart, memoryChart]) // 鼠标事件处理 chart.on(highlight, (params) { const seriesIndex params.seriesIndex const dataIndex params.dataIndex // 联动其他图表 })5.3 性能优化建议在大数据量场景下使用dataset管理数据源开启animation: false禁用动画使用dataZoom进行数据缩放对静态数据启用series.silent trueconst optimizedOption { dataset: { source: [] }, animation: false, dataZoom: [{ type: slider, start: 0, end: 100 }], series: { silent: true, type: line, smooth: true } }6. 项目部署与监控6.1 前端打包优化修改vite.config.jsexport default defineConfig({ build: { rollupOptions: { output: { manualChunks(id) { if (id.includes(echarts)) { return echarts } } } } } })6.2 后端性能监控添加Spring Boot Actuatordependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-actuator/artifactId /dependency配置application.propertiesmanagement.endpoints.web.exposure.includehealth,metrics,prometheus management.metrics.export.prometheus.enabledtrue6.3 容器化部署Dockerfile示例# 前端 FROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf # 后端 FROM openjdk:17-jdk-slim COPY target/monitor-backend.jar app.jar ENTRYPOINT [java,-jar,/app.jar]nginx.conf关键配置server { listen 80; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } location /ws { proxy_pass http://backend:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection Upgrade; } }7. 常见问题排查7.1 WebSocket连接失败可能原因及解决方案跨域问题确保后端配置了正确的CORS规则SockJS兼容性现代浏览器建议直接使用WebSocket协议防火墙限制检查服务器8080端口是否开放7.2 图表渲染异常典型问题处理空白图表检查DOM元素宽高是否有效数据不更新确认Vue响应式数据是否正确变更内存泄漏在组件销毁时调用dispose()7.3 性能瓶颈分析使用Chrome DevTools排查性能面板记录操作过程内存面板检查泄漏Network面板查看请求耗时对于大数据量场景可以考虑使用Web Worker处理数据实现数据分片加载开启ECharts的渐进渲染8. 项目扩展方向8.1 移动端适配方案使用rem布局// 在main.js中 function setRem() { const baseSize 16 const scale document.documentElement.clientWidth / 1920 document.documentElement.style.fontSize baseSize * scale px } window.addEventListener(resize, setRem) setRem()ECharts配置响应式const chart echarts.init(dom) const resizeHandler () chart.resize() window.addEventListener(resize, resizeHandler)8.2 多主题切换定义主题配置const themes { light: { backgroundColor: #fff, textColor: #333 }, dark: { backgroundColor: #222, textColor: #eee } } function applyTheme(themeName) { const theme themes[themeName] this.chart.setOption({ backgroundColor: theme.backgroundColor, textStyle: { color: theme.textColor } }) }8.3 接入真实数据源常见数据源集成方式数据库直连适合内部系统API网关通过统一接口聚合多个数据源消息队列处理高并发数据流Kafka集成示例KafkaListener(topics metrics-topic) public void handleMetric(ServerMetric metric) { messagingTemplate.convertAndSend(/topic/metrics, metric); }9. 安全加固措施9.1 API接口保护添加Spring SecurityConfiguration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/**).authenticated() .and() .httpBasic(); } }9.2 WebSocket认证实现ChannelInterceptorOverride public void configureClientInboundChannel(ChannelRegistration registration) { registration.interceptors(new ChannelInterceptor() { Override public Message? preSend(Message? message, MessageChannel channel) { StompHeaderAccessor accessor StompHeaderAccessor.wrap(message); if (StompCommand.CONNECT.equals(accessor.getCommand())) { // 验证token逻辑 } return message; } }); }9.3 前端敏感数据处理对敏感数据做脱敏处理function desensitize(data) { return { ...data, ip: data.ip.replace(/(\d)\.(\d)\.\d\.\d/, $1.$2.***.***) } }10. 项目实战经验分享在最近的一个智能工厂项目中我们为生产线开发了实时监控系统。遇到最棘手的问题是当500设备同时上报数据时前端图表会卡顿。最终通过以下方案解决数据采样后端对高频数据做降采样处理批量更新前端改用requestAnimationFrame批量渲染WebAssembly加速复杂计算用Rust编写后编译成Wasm性能优化前后对比指标优化前优化后渲染帧率12fps60fpsCPU占用85%30%内存使用1.2GB400MB另一个经验是关于错误处理的。我们发现在弱网环境下WebSocket经常断开。最终实现的断线重连机制function connect() { this.connection over(new SockJS(this.endpoint)) this.connection.connect({}, () { this.retryCount 0 this.subscribe() }, (error) { this.retryCount const delay Math.min(1000 * this.retryCount, 10000) setTimeout(() this.connect(), delay) }) }对于想深入学习的开发者我推荐以下进阶方向可视化算法学习D3.js底层原理性能优化掌握Web Workers和OffscreenCanvas数据分析了解Apache Spark等大数据处理工具架构设计研究微服务下的实时数据管道最后分享一个调试小技巧在Chrome的Console中直接调用ECharts实例方法// 获取页面上的第一个图表实例 const chart [...document.querySelectorAll([echarts_instance])] .map(el echarts.getInstanceByDom(el))[0] // 动态修改配置 chart.setOption({ series: [{ type: bar }] })
