ECharts 快速入门

文章目录

- 1. 引入 ECharts
- 2. 初始化 ECharts 实例
- 3. 配置图表选项
- 4. 使用配置项生成图表
- 5. 最常用的几种图形
- - 5.1 柱状图（Bar Chart）
  - 5.2 折线图（Line Chart）
  - 5.3 饼图（Pie Chart）
  - 5.4 散点图（Scatter Chart）
- 6. 更多配置项
- - 6.1 颜色主题
  - 6.2 数据缩放
  - 6.3 工具栏
- 7. 参考文档

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,  // 数据点大小设置为20data: [  // 数据项[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 官方文档。