echarts图表的使用方法

前言

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

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

技术栈：原生 JS + ECharts

一、需求分析

封装独立绘图函数，复用代码，避免重复写初始化逻辑
增加参数兜底校验，防止传入错误数据导致报错
每次绘图前销毁旧图表实例，防止多次初始化造成图表异常
支持传入不同type，切换柱状图 bar / 折线图 line
内置 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 配置项讲解

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

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