news 2026/9/16 8:41:01

echarts图表的使用方法

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
echarts图表的使用方法

前言

后台管理系统开发中，图表是高频组件，经常需要在多个页面绘制柱状图、折线图。如果每个页面都重复写一遍 ECharts 初始化、销毁、option 配置，会造成大量冗余代码，维护起来很麻烦。

本文封装一个通用draw_echart函数，传入数据源、图表类型、标题，即可渲染图表，自带参数校验、实例销毁，支持柱状图 / 折线图快速切换，开箱即用。

技术栈：原生 JS + ECharts

一、需求分析

  1. 封装独立绘图函数，复用代码，避免重复写初始化逻辑
  2. 增加参数兜底校验，防止传入错误数据导致报错
  3. 每次绘图前销毁旧图表实例，防止多次初始化造成图表异常
  4. 支持传入不同type，切换柱状图 bar / 折线图 line
  5. 内置 tooltip、坐标轴、图例等通用配置，减少重复编写

二、完整代码示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ECharts通用封装</title> <!-- 引入echarts CDN --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> #main { width: 800px; height: 500px; border: 1px solid #eee; } </style> </head> <body> <div id="main"></div> <button id="btnBar">切换柱状图</button> <button id="btnLine">切换折线图</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和系列数据list
  • type：图表类型，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 配置项讲解

  1. title：图表顶部标题
  2. tooltip：悬浮提示框
    • trigger: 'axis'：鼠标悬浮到坐标轴区域就触发提示，适合多系列对比图表
    • axisPointer: {type:'none'}：去掉鼠标悬浮时的竖线虚线，界面更干净
  3. legend：图例，自动根据 series 生成，区分多条数据
  4. xAxis 类目轴：type:category，一般放时间、名称等分类文本
  5. yAxis 数值轴：type:value，放数字指标（游客量、金额等）
    • nameLocation、nameGap、nameTextStyle.padding：用来调整 Y 轴名称位置，解决文字贴边、重叠问题
  6. series：map 动态生成系列
series: data.map(function (item) { return { name: item.name, type: type, data: item.visitor, } })

利用数组map遍历数据源，自动生成多条 series。函数传入的type直接赋值给 series，实现柱状图、折线图一键切换。

四、常见踩坑总结

  1. 忘记 dispose 销毁实例同一个容器多次渲染图表，一定要dispose，否则图表叠加、resize 失效，页面内存持续上涨。
  2. DOM 容器必须先存在，并且设置宽高ECharts 挂载的 DOM，必须预先设置width和height，否则图表渲染不出来。
  3. 数据格式不匹配xAxis.data 和 series.data 的数组长度必须一一对应，否则数据错位。
  4. 异步请求数据渲染时机ajax 请求后端接口，必须拿到返回数据后，再调用 draw_echart；如果提前调用，data 为空会触发校验，图表不渲染。
  5. 窗口大小变化图表自适应补充监听窗口 resize 事件，放在函数外：
window.addEventListener('resize', function () { myChart.resize(); });

五、扩展优化方向

  1. 增加颜色自定义、渐变样式
  2. 增加数据格式化，y 轴增加千分位、百分比
  3. 增加 loading 动画，接口请求等待时显示 loading
  4. 封装 tooltip 自定义提示文字
  5. 增加饼图、雷达图支持，扩展 type 判断分支
  6. 抽离公共 option 为默认配置，支持外部传入自定义配置覆盖默认项

六、结语

在项目中把 ECharts 封装成通用渲染函数，是前端工程化很小但是很实用的实践。 把重复的初始化、销毁、基础配置全部封装，业务页面只需要关心数据源、图表类型、标题，一行代码即可渲染图表，减少大量重复代码，提升开发效率，也方便统一图表样式规范。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/16 8:39:05

BLE低功耗设计-第14章第6题-如何设计温度补偿算法实现功耗优化

蓝牙面试题解析：如何设计温度补偿算法实现功耗优化？ 难度：⭐⭐⭐⭐ 较难 | 场景：社招二面/三面、温度补偿 | 高频：🔥🔥🔥 标准答案 温度补偿算法通过温度传感器实时监测温度、查表/公式调整参数(时钟校准/电压/功率阈值)，在不同温度下保持最优工作点，减少温漂导致…

作者头像 李华
网站建设 2026/9/16 8:37:46

Apache Uniffle统一Shuffle引擎：架构原理、部署调优与生产实践

做大数据平台这些年&#xff0c;我一直觉得Shuffle是分布式计算里最像“隐形加班”的环节——平时没人注意它&#xff0c;但只要集群一上规模、作业一跑多&#xff0c;它保准跳出来给你找事。数据倾斜大家都会排查&#xff0c;但整个集群卡在Shuffle阶段&#xff0c;IO打满、磁…

作者头像 李华
网站建设 2026/9/16 8:37:14

从零搭建避坑：网站打开风险怎么解决，3招稳住服务器

从零搭建避坑：网站打开风险怎么解决，3招稳住服务器 改个需求建站公司拖一周，这种憋屈事谁没遇到过？你以为只是小修小补，对方却以“排期紧”为由一拖再拖，最后急得你跳脚。更扎心的是，有些网站刚上线就崩，用户打不开、数据丢一片，这时候才反应过来， 网站打开风险怎么解决 根本不在前端代码里，而在你…

作者头像 李华
网站建设 2026/9/16 8:36:29

Chrome自动填充问题解决方案与实战技巧

1. Chrome自动填充问题的本质与表现Chrome浏览器的自动填充功能本意是提升用户体验&#xff0c;但经常出现"过度热情"的情况——把用户名信息错误地填充到普通输入框中。这个问题在表单设计领域被称为"autocomplete spillover"&#xff08;自动填充溢出&am…

作者头像 李华
网站建设 2026/9/16 8:31:36

网站打开风险怎么解决完整流程

3步搞定网站打开风险完整流程：告别备案迷茫 备案流程一头雾水？别慌，我见过太多老板因为搞不清“网站打开风险”而踩坑，要么域名被锁，要么页面打不开，急得满头汗。今天不聊虚的，直接拆解 网站打开风险怎么解决 的 完整流程 。 这里的“风险”，不光是指服务器宕机，更包括因为合规问题导致的 强制断网…

作者头像 李华