ECharts 从入门到实战｜前端数据可视化完整教程

0 前言

🔥 在后台管理系统、数据大屏、BI报表中，数据可视化是必不可少的能力。ECharts 作为百度开源的前端图表库，几乎是国内项目的首选，上手简单、图表类型丰富、自定义能力强。

很多新手同学拿到需求，不知道如何快速引入、渲染图表、处理后端接口数据、修改样式、解决常见踩坑。本文从零开始，讲解ECharts引入、基础图表、后端动态数据渲染、常见配置、高频踩坑，代码直接复制可用。

📌适用人群：前端初学者、后端开发者写管理后台、毕设项目、Vue/原生JS开发 📌环境：原生HTML、Vue3通用，ECharts 5.x稳定版本

1、ECharts是什么

ECharts 是百度开源的基于Canvas的数据可视化库，支持几十种图表：折线图、柱状图、饼图、雷达图、地图、散点图、仪表盘等。

支持自适应、tooltip提示、图例、数据缩放、联动交互
支持原生JS、Vue、React、Angular
可以对接后端接口，渲染动态业务数据
开源免费，商用无版权风险

核心概念：option，ECharts所有图表、样式、数据全部通过option配置对象完成。

2、快速引入ECharts（两种方式）

方式1：CDN快速引入（html测试首选，不用安装）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts入门示例</title>
    <!-- CDN引入ECharts 5.x -->
    <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>
    <!-- 图表DOM容器 -->
    <div id="main"></div>

    <script>
        // 1. 获取dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));

        // 2. 配置项option
        const option = {
            title:{
                text:"月度销售数据",
                left:"center"
            },
            tooltip:{
                trigger:"axis" //鼠标悬浮提示
            },
            xAxis:{
                type:"category",
                data:["1月","2月","3月","4月","5月","6月"]
            },
            yAxis:{
                type:"value"
            },
            series:[
                {
                    name:"销售额",
                    type:"bar", //bar柱状图 line折线图 pie饼图
                    data:[120,200,150,80,70,110]
                }
            ]
        }
        // 3. 将配置设置给实例，渲染图表
        myChart.setOption(option);

        // 窗口大小变化，图表自适应
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    </script>
</body>
</html>

方式2：npm安装（Vue/React项目）

复制代码

npm install echarts

html 复制代码

// vue3示例
import * as echarts from 'echarts'
import { ref,onMounted } from 'vue'

let myChart = null
const chartDom = ref(null)

onMounted(()=>{
    myChart = echarts.init(chartDom.value)
    const option = { /* 和上面完全一样 */ }
    myChart.setOption(option)
    window.addEventListener('resize',()=>myChart.resize())
})

⚠️重点坑点：盛放图表的div必须指定宽高，否则图表无法渲染！

3、常用图表option核心字段讲解

复制代码

const option = {
  title: { },        // 图表标题
  tooltip: { },      // 鼠标悬浮提示框
  legend: { },       // 图例
  xAxis: { },        // X轴配置，柱状/折线图使用
  yAxis: { },        // Y轴配置
  grid: { },         // 图表内边距，调整图表距离容器边距
  series: [ ]        // 系列数组，真正存放图表数据，一个数组项代表一套图表
}

3.1 折线图示例

只需要修改series里面的type:"line"

复制代码

series:[
    {
        name:"销售额",
        type:"line",
        data:[120,200,150,80,70,110],
        smooth:true //平滑曲线
    }
]

3.2 饼图示例

饼图不需要xAxis、yAxis

html 复制代码

const option = {
    title:{text:"产品占比",left:'center'},
    tooltip:{trigger:'item'},
    series:[
        {
            type:'pie',
            radius:'50%', //饼图大小
            data:[
                {name:"产品A",value:1048},
                {name:"产品B",value:735},
                {name:"产品C",value:580},
                {name:"产品D",value:484}
            ]
        }
    ]
}

4、实战：对接后端接口，渲染动态数据

实际项目中数据都来自后端http接口，不是写死在前端。

html 复制代码

<script>
const myChart = echarts.init(document.getElementById('main'));

// 请求后端接口获取数据
async function loadChartData(){
    //模拟后端返回 {months:['1月','2月'],sales:[120,200]}
    const res = await fetch('/api/getSales')
    const data = await res.json()

    // 使用后端返回的数据更新option
    const option = {
        title:{text:"月度销售数据"},
        tooltip:{trigger:"axis"},
        xAxis:{
            type:"category",
            data: data.months
        },
        yAxis:{type:"value"},
        series:[{
            name:"销售额",
            type:"bar",
            data: data.sales
        }]
    }
    // setOption会自动合并配置，直接更新图表
    myChart.setOption(option)
}

loadChartData()
window.addEventListener('resize',()=>myChart.resize())
</script>

关键点：多次调用setOption()，会自动合并配置，不需要销毁重建实例。

5、高频业务场景

5.1 图表销毁（Vue组件销毁必写，防止内存泄漏）

复制代码

//vue组件卸载时
onUnmounted(()=>{
    if(myChart){
        myChart.dispose() //销毁实例
        myChart = null
    }
})

5.2 多系列，柱状+折线混合图表

复制代码

series:[
    {
        name:"销售额",
        type:"bar",
        data:[120,200,150,80,70,110]
    },
    {
        name:"增长率",
        type:"line",
        data:[10,25,8,-5,12,18]
    }
]

5.3 自定义颜色、字体

复制代码

option = {
    color:["#409EFF","#67C23A","#E6A23C"], //全局颜色列表
    title:{
        text:"标题",
        textStyle:{
            fontSize:18,
            color:"#333"
        }
    }
}

6、新手高频踩坑总结

❌图表空白不显示：DOM没有设置宽高；dom还没渲染完成就执行echarts.init()
❌窗口缩放图表不会自适应：忘记调用myChart.resize()
❌Vue内存泄漏：组件销毁没有执行dispose()销毁echarts实例
❌更新数据图表不变化：直接修改option对象，没有调用setOption(option)
❌饼图写xAxis/yAxis：饼图不需要坐标轴配置，写了会报错
❌多次init同一个dom：一个DOM只初始化一次echarts实例，更新数据只用setOption

官方文档提示：遇到样式、配置不知道怎么写，直接去ECharts官方示例网站复制demo修改，效率最高。

ECharts官方示例：Examples - Apache ECharts

7、总结

ECharts的核心逻辑非常简单：

准备DOM容器，设置宽高
echarts.init(dom)初始化实例
组装option配置对象
setOption(option)渲染图表
监听resize实现自适应，组件销毁记得dispose销毁实例

绝大多数业务图表，只需要修改option里面的数据、颜色、样式，不需要操作复杂底层逻辑。后续可以继续学习：大数据量优化、数据集dataset、图表联动、3D图表、地图组件。

👍 码字不易，如果对你有帮助，欢迎点赞收藏，后续更新ECharts大屏实战、后端管理系统可视化开发。

如果你想让内容更接近可直接发布，工作任务模式可以把标题、正文、配图和验真一起补齐，要不要用它做得更完整？