ECharts 柱状图示例及讲解本文档提供ECharts入门柱状图示例介绍，采用HTML直接引入本地echarts.

一、说明

本文档提供ECharts入门柱状图示例介绍，采用HTML直接引入本地echarts.min.js方式实现，步骤清晰、代码可直接复制运行。 ECharts优势：无需安装任何依赖，代码注释详细，可直接修改为折线图、饼图等其他图表类型。

二、准备

下载echarts.min.js到本地，并且命名为echarts.min.js。下载地址可选择：

三、完整柱状图示例

新建一个后缀为.html的文件，复制以下完整代码，用浏览器（Chrome、Firefox、Edge等）打开，即可看到ECharts图表效果。代码：

ECharts 柱状图 /* 2. 给图表容器设置宽高（必须配置！否则图表无法显示） */ #main { width: 600px; /* 图表宽度 */ height: 400px; /* 图表高度 */ margin: 20px auto; /* 居中显示，可选 */ }

<script>
    // 4. 初始化ECharts实例：将容器DOM传入echarts.init()方法
    const myChart = echarts.init(document.getElementById('main'));

    // 5. 配置图表的选项（核心部分：标题、轴、数据等都在这里设置）
    const option = {
        // 图表标题（可修改文字、样式）
        title: {
            text: 'ECharts 柱状图' // 标题内容
        },
        // 提示框：鼠标悬停在图表上时，显示对应的数据详情（开启更友好）
        tooltip: {},
        // 图例：区分不同系列的数据（单系列可省略，多系列必选）
        legend: {
            data: ['销量']
        },
        // x轴配置：横向坐标轴，这里设置商品类别
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        // y轴配置：纵向坐标轴（数值轴，空对象即可，ECharts自动适配数据）
        yAxis: {},
        // 系列数据（图表核心数据，type指定图表类型）
        series: [
            {
                name: '销量', // 与图例data对应
                type: 'bar', // 图表类型：bar=柱状图（可修改为line、pie等）
                data: [5, 20, 36, 10, 10, 20] // 具体数据
            }
        ]
    };

    // 6. 将配置项应用到ECharts实例，渲染图表（必写步骤）
    myChart.setOption(option);

    // 可选配置：适配窗口大小变化，浏览器缩放时图表自动调整尺寸
    window.addEventListener('resize', () => {
        myChart.resize();
    });
</script>

四、运行效果

五、核心步骤拆解

ECharts 示例核心分为6步，可对照步骤理解代码：

引入ECharts：通过CDN链接引入压缩后的ECharts核心文件，无需本地下载，一行代码即可完成；
定义图表容器：用
标签作为图表的渲染载体，必须设置宽高（行内样式、外部样式均可），否则图表会渲染为0×0大小，无法显示；
初始化ECharts实例：调用echarts.init()方法，传入图表容器的DOM元素，创建ECharts实例，后续所有配置都基于该实例；
配置图表选项（option）：ECharts的核心，所有图表的样式、数据、交互效果都写在option对象中，是整个案例的核心；
渲染图表：调用ECharts实例的setOption()方法，将配置好的option对象传入，完成图表渲染；
可选适配（窗口缩放）：监听浏览器窗口的resize事件，调用实例的resize()方法，实现图表自适应窗口大小。

六、快速修改为其他图表类型

本案例默认是柱状图，修改图表类型只需调整series中的type属性，无需修改其他核心代码，以下是两种常用图表的修改方法：

6.1 改为折线图

只需将series中的type: 'bar'改为type: 'line'，其余代码不变，修改后的series部分如下： javascript: series: [ { name: '销量', type: 'line', // 改为折线图 data: [5, 20, 36, 10, 10, 20] } ]

6.2 改为饼图

饼图无x轴、y轴，需稍微调整option配置，替换原option对象即可，完整修改后的option如下：

javascript:

const option = { title: { text: 'ECharts 饼图 Hello World' }, // 可修改标题 tooltip: {}, legend: { data: ['销量'] }, series: [ { name: '销量', type: 'pie', // 改为饼图 radius: '50%', // 饼图半径（控制大小） data: [ { name: '衬衫', value: 5 }, { name: '羊毛衫', value: 20 }, { name: '雪纺衫', value: 36 }, { name: '裤子', value: 10 }, { name: '高跟鞋', value: 10 }, { name: '袜子', value: 20 } ] } ] };

七、注意事项（避坑指南）

CDN稳定性：示例使用jsdelivr的ECharts CDN，若访问缓慢，可替换为阿里云CDN，替换代码如下： cdn.aliyuncs.com/echarts/5.4…
容器宽高必设：这是新手最容易踩的坑，若未给#main设置width和height，图表将无法显示，建议设置固定宽高（如600px×400px）或百分比宽高；
ECharts版本：示例使用5.4.3稳定版，兼容IE11+、Chrome、Firefox等主流浏览器，最新版本可访问ECharts官网（echarts.apache.org/zh/download…查看；
代码复制注意：复制代码时，确保完整复制，不要遗漏标签（如），否则会导致代码报错；
浏览器运行：保存为.html文件后，直接双击打开即可运行，无需搭建服务器，新手可直接操作。

ECharts 柱状图 示例及讲解