零基础入门：5分钟用ECharts创建第一个图表

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个最简单的ECharts入门示例，要求：1. 只需一个基础的柱状图 2. 使用最简化的配置项 3. 包含step-by-step的代码解释 4. 添加'试试修改'区域让用户可以实时调整参数 5. 提供常见问题解答。使用纯HTML+JS实现，无需构建工具。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近想给项目加个数据可视化功能，发现ECharts这个库特别适合新手，花5分钟就能做出专业图表。下面记录我的学习过程，用最简化的方式实现一个基础柱状图。

一、为什么选择ECharts

1. 配置简单：通过JSON格式的option对象就能定义图表，比直接操作DOM更直观
2. 响应式设计：图表会自动适应容器大小，手机电脑都能看
3. 丰富示例：官网有几百种图表模板可以直接复用

二、5分钟快速上手

1. 首先创建一个空白HTML文件，在引入CDN（不需要下载文件）：

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

2. 准备一个固定宽高的div作为图表容器：

   <div id="myChart" style="width:600px;height:400px"></div>

3. 用最简单的配置生成柱状图，核心代码不到10行：

   // 初始化图表实例 var chart = echarts.init(document.getElementById('myChart')); // 指定配置项 var option = { xAxis: { data: ['衬衫','羊毛衫','雪纺衫'] }, yAxis: {}, series: [{ type: 'bar', data: [15, 22, 8] }] }; // 应用配置 chart.setOption(option);

三、关键配置项解析

• xAxis/yAxis：定义坐标轴，最简单的场景只需要指定data数组
• series：核心数据系列，type设为'bar'表示柱状图
• data：每个系列对应的数值数组，长度需与xAxis的data一致

四、试试修改（实时互动区）

在实际项目中，你可能会需要：

1. 修改柱子的颜色：在series中添加itemStyle配置

   itemStyle: { color: '#c23531' }

2. 添加标题和提示框：在option顶层增加

   title: { text: '销量统计' }, tooltip: {}

3. 调整间距：通过grid控制图表边距

   grid: { left: '10%', right: '10%' }

五、常见问题解决

1. 图表不显示：检查div的宽高是否有效，确保echarts.js加载完成
2. 数据更新无效：修改option后要重新调用chart.setOption()
3. 移动端显示不全：监听resize事件并调用chart.resize()
4. 需要更多图表类型：在官网示例库里搜索对应的type名称（如pie/line）

---

整个过程在InsCode(快马)平台上测试非常顺畅，不用配环境直接写代码就能看到效果。他们的在线编辑器支持实时预览，调试ECharts这种需要渲染的库特别方便。

对于想快速验证想法的同学，这种免配置的云端开发体验确实能省去不少麻烦。点击页面右上角的运行按钮，马上就能看到自己修改后的图表效果，比本地搭建环境快多了。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个最简单的ECharts入门示例，要求：1. 只需一个基础的柱状图 2. 使用最简化的配置项 3. 包含step-by-step的代码解释 4. 添加'试试修改'区域让用户可以实时调整参数 5. 提供常见问题解答。使用纯HTML+JS实现，无需构建工具。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果