ECharts 是百度开发的一款强大的开源数据可视化库，支持多种图表类型，使用 JavaScript 编写，非常适合在网页中展示各类数据图表。下面是一个基础的 ECharts 使用教程：
1. 引入 ECharts首先需要在你的 HTML 页面中引入 ECharts 库，可以通过 CDN 或本地文件引入：
代码语言：html复制
2. 准备一个 DOM 容器需要一个有宽度和高度的 DOM 元素作为图表的容器：
代码语言：html复制
3. 初始化图表实例通过 ECharts 提供的 init 方法初始化一个图表实例：代码语言：javascript复制// 获取 DOM 元素
const chartDom = document.getElementById('chartContainer');
// 初始化图表实例
const myChart = echarts.init(chartDom);4. 配置图表选项ECharts 的核心是配置项（option），通过配置不同的属性可以实现各种图表效果：
代码语言：javascript复制const option = {
title: {
text: 'ECharts 基础示例',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量'],
bottom: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
color: '#3b82f6'
},
emphasis: {
itemStyle: {
color: '#1d4ed8'
}
}
}
]
};5. 设置图表选项并渲染将配置项设置到图表实例中，图表就会被渲染出来：
代码语言：javascript复制myChart.setOption(option);6. 响应窗口大小变化为了让图表在窗口大小改变时能够自适应，可以添加窗口大小监听：
代码语言：javascript复制window.addEventListener('resize', function() {
myChart.resize();
});完整示例下面是一个完整的 ECharts 示例代码，包含了上述所有步骤：
常用图表类型ECharts 支持多种图表类型，只需要修改配置项中的 series.type 即可切换：
'bar' - 柱状图'line' - 折线图'pie' - 饼图'scatter' - 散点图'radar' - 雷达图'map' - 地图'graph' - 关系图'gauge' - 仪表盘学习资源ECharts 官方文档 - 包含详细的 API 说明和示例ECharts 示例库 - 丰富的图表示例，可直接查看代码ECharts 配置项手册 - 详细的配置项说明通过修改配置项，你可以自定义图表的样式、交互方式和数据展示，创建出符合需求的各类数据可视化图表。