ECharts 的理解和简单应用笔记

一、对 ECharts 的理解

（一）基本概念

ECharts 是一款由百度团队开发的开源可视化图表库，它基于 JavaScript，能够为用户提供丰富多样的图表展示功能，帮助用户将复杂的数据以直观、清晰的图表形式呈现出来。

（二）核心特性

丰富的图表类型：支持折线图、柱状图、饼图、散点图、雷达图、地图等多种常见图表类型，同时还提供了一些特色图表，如漏斗图、仪表盘等，满足不同场景下的数据可视化需求。

强大的交互功能：用户可以与图表进行多种交互操作，如鼠标悬停查看详细数据、点击图例显示或隐藏对应数据系列、拖拽图表进行缩放和平移等，增强了用户对数据的探索能力。

高度的可定制性：允许用户对图表的样式、颜色、字体、坐标轴、图例等各个部分进行自定义设置，使图表能够更好地融入到不同的页面设计和品牌风格中。

良好的兼容性：能够在各种主流浏览器（如 Chrome、Firefox、Safari、IE 等）上稳定运行，保证了图表展示的一致性和可靠性。

轻量级：体积相对较小，加载速度快，不会给页面带来过多的性能负担。

（三）优势

开源免费：用户可以免费使用 ECharts 的全部功能，并且可以根据自己的需求对源代码进行修改和扩展，降低了开发成本。

社区活跃：拥有庞大的用户社区和开发者群体，用户可以在社区中获取丰富的学习资源、解决问题的方案以及各种插件和扩展，方便开发者进行学习和交流。

文档完善：官方提供了详细的文档，包括 API 文档、教程、示例等，帮助开发者快速上手使用 ECharts，减少了学习成本。

二、ECharts 的简单应用

（一）环境搭建

获取 ECharts：可以通过官网（https://echarts.apache.org/）

引入 ECharts

对于下载的文件，在 HTML 页面中通过。

对于使用 npm 安装的，在 JavaScript 文件中通过import echarts from 'echarts'引入。

（二）创建基本图表

准备 DOM 容器：在 HTML 页面中创建一个具有宽高的 DOM 元素作为图表的容器，例如：

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

初始化图表实例：通过echarts.init()方法初始化一个图表实例，参数为 DOM 容器，例如：

var myChart = echarts.init(document.getElementById('myChart'));

配置图表选项：定义图表的配置项，包括图表类型、数据、样式等。以下是一个简单的柱状图配置示例：

var option = {    title: {        text: '简单柱状图示例'    },    tooltip: {},    legend: {        data: ['销量']    },    xAxis: {        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: [5, 20, 36, 10, 10, 20]    }]};

设置图表选项：使用setOption()方法将配置项应用到图表实例中，例如：

myChart.setOption(option);

响应式调整：为了使图表在窗口大小改变时能够自适应调整，可以监听窗口的resize事件，调用图表实例的resize()方法，例如：

window.addEventListener('resize', function() {    myChart.resize();});

（三）常见图表示例

折线图：将配置项中series的type设置为'line'，可用于展示数据随时间或其他连续变量的变化趋势。

饼图：type设置为'pie'，适合展示各部分数据在总体中所占的比例关系。

散点图：type设置为'scatter'，用于研究两个变量之间的关系。