前言后台管理系统开发中图表是高频组件经常需要在多个页面绘制柱状图、折线图。如果每个页面都重复写一遍 ECharts 初始化、销毁、option 配置会造成大量冗余代码维护起来很麻烦。本文封装一个通用draw_echart函数传入数据源、图表类型、标题即可渲染图表自带参数校验、实例销毁支持柱状图 / 折线图快速切换开箱即用。技术栈原生 JS ECharts一、需求分析封装独立绘图函数复用代码避免重复写初始化逻辑增加参数兜底校验防止传入错误数据导致报错每次绘图前销毁旧图表实例防止多次初始化造成图表异常支持传入不同type切换柱状图 bar / 折线图 line内置 tooltip、坐标轴、图例等通用配置减少重复编写二、完整代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleECharts通用封装/title !-- 引入echarts CDN -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style #main { width: 800px; height: 500px; border: 1px solid #eee; } /style /head body div idmain/div button idbtnBar切换柱状图/button button idbtnLine切换折线图/button script // 绘制图表 显示柱状图或折线图 // data为数据源 type为图表类型 title为图表标题 function draw_echart(data, type, title) { // 兜底判断校验数据源 if (!Array.isArray(data) || !data || data null || data.length 0) { console.log(数据有误请检查后重试); return; } // 校验图表类型 if (typeof type ! string || type null || type ) { console.log(图表类型有误请检查后重试); return; } // 校验图表标题 if (typeof title ! string || title null || title ) { console.log(图表标题有误请检查后重试); return; } var chartDom document.getElementById(main); // 销毁已有实例防止多次初始化报错 echarts.dispose(chartDom); var myChart echarts.init(chartDom); var option; option { title: { text: title, }, tooltip: { trigger: axis, // 按坐标轴触发鼠标放到柱子上就弹出提示 // 隐藏虚线 axisPointer: { type: none // 鼠标移到柱子时无虚线 } }, // 图例 legend: {}, xAxis: { type: category, // 坐标轴类型为类目 data: data.month, name: 月份 }, yAxis: { nameLocation: end, //调整坐标轴名称的位置 nameGap: 20, nameTextStyle: { //坐标轴名称样式 padding: [0, 0, 0, -45] // 第4个值 左内边距变大 → 文字向右移动负数向左 }, type: value, // 坐标轴类型为数值 name: 游客量 }, series: data.map(function (item) { return { name: item.name, type: type, data: item.visitor, } }) }; option myChart.setOption(option); } // 模拟后端返回数据 const chartData { month: [1月, 2月, 3月, 4月, 5月], list: [ { name: 景区A, visitor: [120, 200, 150, 80, 70] }, { name: 景区B, visitor: [60, 100, 180, 140, 220] } ] } // 按钮切换测试 document.getElementById(btnBar).onclick function(){ draw_echart(chartData, bar, 月度游客量柱状图) } document.getElementById(btnLine).onclick function(){ draw_echart(chartData, line, 月度游客量折线图) } // 默认加载柱状图 draw_echart(chartData, bar, 月度游客量柱状图) /script /body /html三、代码逐段解析1. 函数入参说明draw_echart(data, type, title)data图表数据源包含 x 轴类目month和系列数据listtype图表类型bar柱状图 /line折线图title图表标题字符串2. 参数校验容错重点if (!Array.isArray(data) || !data || data null || data.length 0) { console.log(数据有误请检查后重试); return; }在绘图前做参数校验判断数据是否为数组、是否为空类型和标题是否合法。作用后端返回空、null、undefined时不会直接导致 JS 报错崩溃控制台给出提示方便调试。3. 销毁旧实例避坑核心var chartDom document.getElementById(main); echarts.dispose(chartDom); var myChart echarts.init(chartDom);高频踩坑点同一个 DOM 重复调用echarts.init()会生成多个图表实例出现图表不更新、缩放异常、内存泄漏。 每次渲染前执行dispose()销毁 DOM 上已存在的实例再重新初始化保证每次渲染都是全新图表。4. option 配置项讲解title图表顶部标题tooltip悬浮提示框trigger: axis鼠标悬浮到坐标轴区域就触发提示适合多系列对比图表axisPointer: {type:none}去掉鼠标悬浮时的竖线虚线界面更干净legend图例自动根据 series 生成区分多条数据xAxis 类目轴type:category一般放时间、名称等分类文本yAxis 数值轴type:value放数字指标游客量、金额等nameLocation、nameGap、nameTextStyle.padding用来调整 Y 轴名称位置解决文字贴边、重叠问题seriesmap 动态生成系列series: data.map(function (item) { return { name: item.name, type: type, data: item.visitor, } })利用数组map遍历数据源自动生成多条 series。函数传入的type直接赋值给 series实现柱状图、折线图一键切换。四、常见踩坑总结忘记 dispose 销毁实例同一个容器多次渲染图表一定要dispose否则图表叠加、resize 失效页面内存持续上涨。DOM 容器必须先存在并且设置宽高ECharts 挂载的 DOM必须预先设置width和height否则图表渲染不出来。数据格式不匹配xAxis.data 和 series.data 的数组长度必须一一对应否则数据错位。异步请求数据渲染时机ajax 请求后端接口必须拿到返回数据后再调用 draw_echart如果提前调用data 为空会触发校验图表不渲染。窗口大小变化图表自适应补充监听窗口 resize 事件放在函数外window.addEventListener(resize, function () { myChart.resize(); });五、扩展优化方向增加颜色自定义、渐变样式增加数据格式化y 轴增加千分位、百分比增加 loading 动画接口请求等待时显示 loading封装 tooltip 自定义提示文字增加饼图、雷达图支持扩展 type 判断分支抽离公共 option 为默认配置支持外部传入自定义配置覆盖默认项六、结语在项目中把 ECharts 封装成通用渲染函数是前端工程化很小但是很实用的实践。 把重复的初始化、销毁、基础配置全部封装业务页面只需要关心数据源、图表类型、标题一行代码即可渲染图表减少大量重复代码提升开发效率也方便统一图表样式规范。