ECharts 是一个由百度开源的基于 JavaScript 的数据可视化图表库，它提供了丰富的图表类型、交互功能和主题样式，方便用户快速创建各种数据可视化图表，并在商业和开源项目中广泛应用。
本文内容根据 ECharts 官方文档 整理。
下面将介绍如何使用 ECharts 创建最常用的几种图表：柱状图、折线图、饼图和散点图。
1. 引入 ECharts
在使用 ECharts 之前，首先需要在 HTML 文件中引入 ECharts 的 JavaScript 文件。
可以选择通过 CDN 引入或者下载 ECharts 文件并在本地引入。
使用 CDN：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div> <!-- 定义一个用于显示图表的容器 -->
<script>
// 在这里编写您的 ECharts 代码
</script>
</body>
</html>
2. 初始化 ECharts 实例
在 HTML 中创建一个容器，然后在 JavaScript 中初始化 ECharts 实例。
<div id="main" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示图表的 div 容器 -->
<script>
var chart = echarts.init(document.getElementById('main')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
</script>
3. 配置图表选项
定义图表的配置和数据。
ECharts 的配置项非常丰富，以下是一个简单的示例：
var option = {
title: {
text: 'ECharts 示例图表' <!-- 图表标题 -->
},
tooltip: {}, <!-- 提示框组件，显示数据详细信息 -->
legend: {
data: ['销量'] <!-- 图例数据，展示在图表上方的标签 -->
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] <!-- X 轴数据 -->
},
yAxis: {}, <!-- Y 轴配置 -->
series: [{
name: '销量', <!-- 系列名称 -->
type: 'bar', <!-- 图表类型：柱状图 -->
data: [5, 20, 36, 10, 10, 20] <!-- 数据项 -->
}]
};
4. 使用配置项生成图表
将配置项设置给 ECharts 实例以生成图表。
chart.setOption(option); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
5. 最常用的几种图形
5.1 柱状图（Bar Chart）
柱状图是一种非常常用的图表类型，适用于比较不同类别的数据。
下面是一个完整的柱状图示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
<div id="barChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示柱状图的 div 容器 -->
<script>
var barChart = echarts.init(document.getElementById('barChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
var barOption = {
title: {
text: '柱状图示例' <!-- 图表标题 -->
},
tooltip: {}, <!-- 提示框组件，显示数据详细信息 -->
legend: {
data: ['销量'] <!-- 图例数据，展示在图表上方的标签 -->
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] <!-- X 轴数据 -->
},
yAxis: {}, <!-- Y 轴配置 -->
series: [{
name: '销量', <!-- 系列名称 -->
type: 'bar', <!-- 图表类型：柱状图 -->
data: [5, 20, 36, 10, 10, 20] <!-- 数据项 -->
}]
};
barChart.setOption(barOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
</script>
</body>
</html>
5.2 折线图（Line Chart）
折线图用于显示数据的变化趋势，特别适合展示时间序列数据。
以下是一个折线图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
<div id="lineChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示折线图的 div 容器 -->
<script>
var lineChart = echarts.init(document.getElementById('lineChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
var lineOption = {
title: {
text: '折线图示例' <!-- 图表标题 -->
},
tooltip: {}, <!-- 提示框组件，显示数据详细信息 -->
legend: {
data: ['温度'] <!-- 图例数据，展示在图表上方的标签 -->
},
xAxis: {
type: 'category', <!-- X 轴类型：类目轴 -->
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] <!-- X 轴数据 -->
},
yAxis: {
type: 'value' <!-- Y 轴类型：数值轴 -->
},
series: [{
name: '温度', <!-- 系列名称 -->
type: 'line', <!-- 图表类型：折线图 -->
data: [11, 11, 15, 13, 12, 13, 10] <!-- 数据项 -->
}]
};
lineChart.setOption(lineOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
</script>
</body>
</html>
5.3 饼图（Pie Chart）
饼图用于显示各部分在总量中的占比情况。
以下是一个饼图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
<div id="pieChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示饼图的 div 容器 -->
<script>
var pieChart = echarts.init(document.getElementById('pieChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
var pieOption = {
title: {
text: '饼图示例', <!-- 图表标题 -->
left: 'center' <!-- 标题位置：居中 -->
},
tooltip: {
trigger: 'item' <!-- 提示框触发类型：数据项触发 -->
},
legend: {
orient: 'vertical', <!-- 图例布局方式：垂直 -->
left: 'left' <!-- 图例位置：左侧 -->
},
series: [{
name: '访问来源', <!-- 系列名称 -->
type: 'pie', <!-- 图表类型：饼图 -->
radius: '50%', <!-- 饼图半径：50% -->
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
], <!-- 数据项 -->
emphasis: {
itemStyle: {
shadowBlur: 10, <!-- 高亮样式：阴影模糊大小 -->
shadowOffsetX: 0, <!-- 阴影水平方向偏移 -->
shadowColor: 'rgba(0, 0, 0, 0.5)' <!-- 阴影颜色 -->
}
}
}]
};
pieChart.setOption(pieOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
</script>
</body>
</html>
5.4 散点图（Scatter Chart）
散点图用于显示两个变量之间的关系。
以下是一个散点图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>散点图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
<div id="scatterChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示散点图的 div 容器 -->
<script>
var scatterChart = echarts.init(document.getElementById('scatterChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
var scatterOption = {
title: {
text: '散点图示例' <!-- 图表标题 -->
},
tooltip: {}, <!-- 提示框组件，显示数据详细信息 -->
xAxis: {}, <!-- X 轴配置 -->
yAxis: {}, <!-- Y 轴配置 -->
series: [{
symbolSize: 20, <!-- 数据点大小 -->
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
], <!-- 数据项 -->
type: 'scatter' <!-- 图表类型：散点图 -->
}]
};
scatterChart.setOption(scatterOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
</script>
</body>
</html>
6. 更多配置项
ECharts 提供了丰富的配置项来定制图表。
以下是一些常见配置项的示例：
6.1 颜色主题
通过 color 属性可以自定义图表的颜色主题：
var option = {
color: ['#3398DB'], <!-- 自定义颜色主题 -->
...
};
6.2 数据缩放
通过 dataZoom 可以实现图表的数据缩放功能：
var option = {
dataZoom: [{
type: 'slider', <!-- 缩放类型：滑动条 -->
start: 10, <!-- 缩放起始位置 -->
end: 60 <!-- 缩放结束位置 -->
}],
...
};
6.3 工具栏
通过 toolbox 可以添加工具栏，包括导出图片等功能：
var option = {
toolbox: {
feature: {
saveAsImage: {} <!-- 保存为图片的工具 -->
}
},
...
};
7. 参考文档
本文涵盖了 ECharts 的基本使用方法和常见图表类型的创建。
想要了解更多关于 ECharts 的详细配置和高级功能，请访问 ECharts 官方文档。
标签：入门,示例,快速,图表,var,data,ECharts,name From： https://blog.csdn.net/DaPiCaoMin/article/details/140097530