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

最新推荐文章于 2024-04-10 12:54:18 发布

Keep forward upup

最新推荐文章于 2024-04-10 12:54:18 发布

阅读量1.1k

点赞数

分类专栏：编程工具前端web 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45594172/article/details/134535240

版权

编程工具同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端web

8 篇文章 0 订阅

订阅专栏

一、基本介绍

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>
  <!-- 引入 ECharts 文件 -->
  <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>

在这个示例中，通过引入 ECharts 库，创建一个包含图表的容器，并使用 JavaScript 配置项和数据来初始化和绘制折线图。

以下是一个 ECharts 的简单示例代码，创建一个柱状图，并展示一些基本配置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts 柱状图示例</title>
  <!-- 引入 ECharts 文件 -->
  <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>

在这个示例中，我们创建了一个柱状图，通过配置项 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：

三、使用步骤：

引入 ECharts： 在 HTML 文件中，引入 ECharts 库。可以通过 CDN 或下载库文件引入。

<!-- 使用 CDN 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

创建图表容器： 在 HTML 中创建一个 <div> 元素，用于容纳图表。
```
<div id="myChart" style="width: 600px; height: 400px;"></div>
```
这个 <div> 元素的 id 属性为 "myChart"，这将在 JavaScript 中用于初始化 ECharts 图表。

编写 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>