echarts入门图表可视化（基本介绍+示例代码） - 码农知识堂 - 文章详情页

echarts入门图表可视化（基本介绍+示例代码）
一、基本介绍

ECharts（百度 ECharts）是一个开源的可视化库，用于在网页上创建丰富、交互式的图表和数据可视化。它由百度前端团队开发和维护，采用 JavaScript 编写，提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、雷达图等，以及支持地理坐标系和时间坐标系的地图和时间轴。

以下是 ECharts 的一些主要特点和功能：

1. 丰富的图表类型：
- 折线图、柱状图、散点图、饼图、雷达图、热力图等。
- 支持堆叠、多系列、动画等效果。
2. 多维数据展示：
- 支持多维度数据的可视化展示，适用于复杂数据分析。
3. 地理坐标系和时间坐标系：
- 提供地理坐标系支持地图可视化。
- 时间轴功能，可以展示时间序列数据。
4. 交互性：
- 支持图表的点击、拖拽、缩放等交互操作。
- 可以通过配置实现数据的动态更新。
5. 主题和样式：
- 提供多种主题和样式，方便定制图表外观。
- 用户可以自定义图表的颜色、字体等样式。
6. 移动端适配：
- 兼容移动端设备，支持响应式设计。
7. 插件系统：
- 支持插件系统，用户可以根据需要扩展功能。
8. 大数据量渲染：
- 对于大规模数据集，提供了数据的聚合和抽样机制，以提高性能。
9. 支持多语言：
- 提供了多种语言的支持，包括中文、英文等。
10. 开源和社区支持：
- ECharts 是开源项目，有强大的社区支持。
- 提供详细的文档和示例，方便开发者使用和学习。
11. 可嵌入性：
- ECharts 可以嵌入到各种 Web 应用中，适用于数据大屏、仪表盘、报表等场景。
二、示例代码：

以下是一个简单的 ECharts 示例代码，用于创建一个折线图：
```
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts 折线图示例title>
  
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js">script>
head>
<body>


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

<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));

// 配置项和数据
var option = {
  title: {
    text: '折线图示例'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [150, 230, 224, 218, 135, 147, 260]
  }]
};

// 使用配置项和数据绘制图表
myChart.setOption(option);
script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
```
在这个示例中，通过引入 ECharts 库，创建一个包含图表的容器，并使用 JavaScript 配置项和数据来初始化和绘制折线图。

以下是一个 ECharts 的简单示例代码，创建一个柱状图，并展示一些基本配置：
```
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts 柱状图示例title>
  
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js">script>
head>
<body>


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

<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));

// 配置项和数据
var option = {
  title: {
    text: '柱状图示例'
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '数值',
    type: 'bar',
    data: [150, 230, 124, 318, 135]
  }]
};

// 使用配置项和数据绘制图表
myChart.setOption(option);
script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
```
在这个示例中，我们创建了一个柱状图，通过配置项 option 设置了图表的标题、X 轴、Y 轴和数据系列。具体解释如下：
- title: 设置图表的标题，文本内容为 '柱状图示例'。
- xAxis: 设置 X 轴的类型为 'category'，表示横轴为类别型数据。通过 data 属性设置了 X 轴的具体数据，这里是 ['A', 'B', 'C', 'D', 'E']。
- yAxis: 设置 Y 轴的类型为 'value'，表示纵轴为数值型数据。
- series: 设置数据系列，这里使用了 'bar' 表示柱状图。通过 data 属性设置了具体的数值数据，这里是 [150, 230, 124, 318, 135]。
- myChart.setOption(option): 使用配置项和数据绘制图表。
可以通过调整 option 中的配置项来改变图表的样式和展示效果。ECharts 提供了丰富的配置选项，支持各种图表类型和交互效果。

你可能指的是"怎么使用 ECharts"。下面是一些简单的步骤来帮助你在网页中使用 ECharts：

三、使用步骤：
1. 引入 ECharts： 在 HTML 文件中，引入 ECharts 库。可以通过 CDN 或下载库文件引入。
```
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js">script>
1
2
```
2. 创建图表容器： 在 HTML 中创建一个
  元素，用于容纳图表。
  
  <div id="myChart" style="width: 600px; height: 400px;">div>
  1
  
  这个
  元素的 id 属性为 "myChart"，这将在 JavaScript 中用于初始化 ECharts 图表。
3. 编写 JavaScript 代码： 使用 JavaScript 来配置和绘制图表。
```
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));

// 配置项和数据
var option = {
  title: {
    text: '柱状图示例'
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '数值',
    type: 'bar',
    data: [150, 230, 124, 318, 135]
  }]
};

// 使用配置项和数据绘制图表
myChart.setOption(option);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
```
  这个示例代码创建了一个简单的柱状图，你可以根据需要修改配置项。
4. 查看结果： 打开 HTML 文件，将看到 ECharts 图表在页面上显示出来。
补充说明：
- ECharts 提供了详细的官方文档，其中包含丰富的示例、配置项和 API 文档，帮助你更深入地了解和使用 ECharts。
- 如果在使用 ECharts 过程中遇到问题，可以查看控制台（浏览器的开发者工具）中的错误信息，以便更好地定位问题。
- ECharts 支持多种图表类型和配置选项，你可以根据你的需求进行深入的定制和开发。
相关阅读:
实测有效：Win11右键默认显示更多设置教程！
拆分整数为2的幂次项和 → 理解多重背包问题二进制优化的核心思想
 卷积神经网络权重是什么,卷积神经网络卷积过程
 Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
 23考研倒计时！这些证件照的上传要求你必须知道，填错就会被打回！
《机器人学一(Robotics(1))》_台大林沛群第 4 周【机械臂逆运动学】 Quiz 4
等保设备是什么，等保设备有哪些
 B站崩了，如果我们是那晚负责修复的开发人员
 Python的基础语法
 【LVGL(重要)】样式属性API函数及其参数
原文地址：https://blog.csdn.net/weixin_45594172/article/details/134535240