ECharts作为前端领域中一个强大的数据可视化工具，能够帮助我们快速实现这一目标。本文将带你走进ECharts的世界，从基础开始，一步步教你如何在网页上绘制你的第一张图表
ECharts简介
ECharts是一个由百度团队开发的开源数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，支持大量的数据交互功能，非常适合构建复杂的数据可视化应用。
环境准备
在开始之前，请确保你的开发环境已经具备以下条件：
- 一个代码编辑器（如VSCode）
- 一个现代的浏览器（如Chrome、Firefox）
- 基础的HTML、CSS和JavaScript知识
在原生HTML中使用ECharts
步骤1：引入ECharts库
在你的HTML文件中，通过CDN链接引入ECharts库：
<script src="https://cdn.jsdelivr.net/npm/echarts"></script>
步骤2：准备DOM容器
在HTML中添加一个容器，用于显示图表：
<div id="main" style="width: 600px;height:400px;"></div>
步骤3：编写图表配置
详见options 完整代码中的 option 配置
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/echarts"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['商品A', '商品B', '商品C'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36] }] }; myChart.setOption(option); </script> </body> </html>
四、其他拓展
本文提供了柱状图的图表类型的实现示例，你可以通过修改option对象中的配置，来创建属于你自己的图表。
参考官网
https://echarts.apache.org/examples/zh/index.html
只需变更上述代码option部分， 即可实现效果
