文章目录
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>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var chart = echarts.init(document.getElementById('main'));
</script>
3. 配置图表选项
定义图表的配置和数据。
ECharts 的配置项非常丰富，以下是一个简单的示例：
var option = {
// 图表的标题配置
title: {
text: 'ECharts 示例图表' // 设置图表的标题文本
},
// 提示框组件配置，用于显示数据详细信息
tooltip: {}, // 默认配置，启用提示框组件
// 图例组件配置，用于显示图例数据
legend: {
data: ['销量'] // 图例数据，显示在图表上方的标签
},
// X 轴配置
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴的数据项
},
// Y 轴配置，使用默认配置
yAxis: {},
// 数据系列配置
series: [{
name: '销量', // 系列的名称
type: 'bar', // 图表类型为柱状图
data: [5, 20, 36, 10, 10, 20] // 数据项，对应于 X 轴上的各个类别
}]
};
4. 使用配置项生成图表
将配置项设置给 ECharts 实例以生成图表。
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
chart.setOption(option);
5. 最常用的几种图形
5.1 柱状图（Bar Chart）
柱状图是一种非常常用的图表类型，适用于比较不同类别的数据。
下面是一个完整的柱状图示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个用于显示柱状图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="barChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var barChart = echarts.init(document.getElementById('barChart'));
// 定义柱状图的配置选项
var barOption = {
// 配置图表的标题
title: {
text: '柱状图示例' // 设置标题文本为“柱状图示例”
},
// 配置提示框组件，默认配置即可显示数据详细信息
tooltip: {},
// 配置图例
legend: {
data: ['销量'] // 图例数据，显示为“销量”
},
// 配置 X 轴
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据，表示不同种类的商品
},
// 配置 Y 轴，默认配置
yAxis: {},
// 配置数据系列
series: [{
name: '销量', // 系列名称为“销量”
type: 'bar', // 图表类型为柱状图
data: [5, 20, 36, 10, 10, 20] // 数据项，表示不同商品的销量
}]
};
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
barChart.setOption(barOption);
</script>
</body>
</html>
5.2 折线图（Line Chart）
折线图用于显示数据的变化趋势，特别适合展示时间序列数据。
以下是一个折线图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个用于显示折线图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="lineChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var lineChart = echarts.init(document.getElementById('lineChart'));
// 定义折线图的配置选项
var lineOption = {
// 配置图表的标题
title: {
text: '折线图示例' // 设置标题文本为“折线图示例”
},
// 配置提示框组件，默认配置即可显示数据详细信息
tooltip: {},
// 配置图例
legend: {
data: ['温度'] // 图例数据，显示为“温度”
},
// 配置 X 轴
xAxis: {
type: 'category', // X 轴类型：类目轴
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // X 轴数据，表示一周中的七天
},
// 配置 Y 轴
yAxis: {
type: 'value' // Y 轴类型：数值轴
},
// 配置数据系列
series: [{
name: '温度', // 系列名称为“温度”
type: 'line', // 图表类型为折线图
data: [11, 11, 15, 13, 12, 13, 10] // 数据项，表示一周中每天的温度
}]
};
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
lineChart.setOption(lineOption);
</script>
</body>
</html>
5.3 饼图（Pie Chart）
饼图用于显示各部分在总量中的占比情况。
以下是一个饼图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个用于显示饼图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="pieChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var pieChart = echarts.init(document.getElementById('pieChart'));
// 定义饼图的配置选项
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)' // 阴影颜色
}
}
}]
};
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
pieChart.setOption(pieOption);
</script>
</body>
</html>
5.4 散点图（Scatter Chart）
散点图用于显示两个变量之间的关系。
以下是一个散点图的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>散点图</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个用于显示散点图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="scatterChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var scatterChart = echarts.init(document.getElementById('scatterChart'));
// 定义散点图的配置选项
var scatterOption = {
// 配置图表的标题
title: {
text: '散点图示例' // 设置标题文本为“散点图示例”
},
// 配置提示框组件，默认配置即可显示数据详细信息
tooltip: {},
// 配置 X 轴
xAxis: {},
// 配置 Y 轴
yAxis: {},
// 配置数据系列
series: [{
symbolSize: 20, // 数据点大小设置为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' // 图表类型为散点图
}]
};
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
scatterChart.setOption(scatterOption);
</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 官方文档。
4280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
