问题描述：

封装的echarts组件多次被调用，id重复，导致页面不渲染、数据覆盖等一系列问题

解决方法：

1、把id改成动态传参（这里就不作代码展示了）

2、把id换成ref

//修改前 
<div id="vcharts" style="width: 100%; height: 500px"></div>
//修改后
<div ref="vcharts" style="width: 100%; height: 500px"></div>



//修改前
let myChart = this.$echarts.init(document.getElementById("vcharts"));
//修改后
let myChart = this.$echarts.init(this.$refs.vcharts);

# 前端 # vue.js # echarts
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

avatar MCP技术社区

npm 与 npx 区别详解。以及mcp中npx加载原理。

场景推荐工具原因项目必需依赖（如 React）npm需要长期存在 node_modules构建工具/脚手架npx偶尔执行且需最新版本命令行工具npx避免全局安装造成版本冲突💡黄金法则npm用于管理依赖，npx用于执行命令！当遇到mcp这类工具时，大胆使用 npx 吧！

avatar MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】

avatar MCP技术社区