ECharts 快速入门，我先冲了！

介绍

ECharts（百度ECharts，全称Enterprise Charts）是一个由百度开发的开源的JavaScript图表库，用于在Web页面上创建丰富、交互性的数据可视化图表。ECharts支持多种常见的图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等，以及复杂的组合图表。

如何使用

1. 获取安装ECharts

官网给出了四种安装方式

从 npm 获取

如果你的开发环境使用了 npm 或者 yarn 等包管理工具，可以使用如下命令安装。
```
npm install echarts
```

从 CDN 获取

可以从以下免费 CDN 中获取和引用。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"</script>

从 GitHub 获取

我们可以直接到GitHub上下载对应源码。apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。然后在自己的项目中引入即可。
在线定制

如果只想引入部分模块以减少包体积，可以使用 ECharts 在线定制功能。

根据自己的需求选择一种安装方式即可，这里我采用CDN引入的方式给大家展示

<!DOCTYPE html>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</body>
</html>

2. 准备一个具备大小的DOM容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
</body>
</html>

这里定义了一个类名为box，宽高为400px的盒子。

注意：一定要有宽高，不然我们的图表无法显示。

3. 初始化echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
    </script>
</body>
</html>

这里我们通过document.querySelector('.box')选中这个盒子，如何通过ECharts提供的 echarts.init 方法初始化一个 echarts 实例。

4. 指定配置项和数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
        
        //指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
    </script>
</body>
</html>

这里的配置项和数据是从官网 copy 来的，先给大家看下效果，后面我们会针对常用的配置项进行介绍。

5. 将配置项传echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
        
        //指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        //将配置项传echarts实例对象
        myEchart.setOption(option);
    </script>
</body>
</html>

这里我们使用官方提供的 setOption 方法生成一个简单的柱状图

在前面option 对象定义了一个简单的柱状图的配置，接着我们通过调用官方提供的setOption方法，将这个配置应用到已经初始化的图表实例 myEchart 中。

效果展示

走完上面的五部曲，那么可以恭喜你，你的第一个图表诞生了！

配置项

对于配置项的学习，我们可以在官方实例中找到一个自己喜欢的图表，然后通过修改配置项数据，右侧的图表也会随之变化，数形结合的方式更有助于学习！

ECharts 快速入门，我先冲了！

这里我们就拿这个折线图举例

title： 设置图表标题，包含主标题和副标题

ECharts 快速入门，我先冲了！

tooltip： 提示框组件
- trigger触发类型可选：'axis'和'item'
- 'axis'坐标轴触发：
- 'item'数据项图形触发：
legend： 图例组件，通过点击图例控制哪些系列不显示

ECharts 快速入门，我先冲了！

grid： 直角坐标系内绘图网格
- grid代表直角坐标系而不是整个DOM容器，left、right、bottom表示grid组件离容器左侧、右侧、底部的距离。
- containLabel代表grid区域是否显示坐标轴的刻度值。如果值为true，那我们在计算grid距离左侧的距离时要把刻度值也要当做容器的一部分。
toolbox： 工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

ECharts 快速入门，我先冲了！

xAxis： 设置x轴的相关配置
- type：坐标轴的类型，可选类型：'value'数值轴、'category'类目轴、'time'时间轴、'log' 对数轴。
- boundaryGap：坐标轴两边是否留白。
- data：所有类目名称列表。

ECharts 快速入门，我先冲了！

yAxis： 设置x轴的相关配置

ECharts 快速入门，我先冲了！

series： 系列图标配置，它决定了显示哪种类型的图表
- series是一个数组，数组中有几个对象就有条数据，这里是折线图，五个对象就有五条线，如果是柱状图就有五个柱子。
- name：系列名称，用于tooltip的显示，legend的图例筛选，在setOption更新数据和配置项时用于指定对应的系列。
- type：图表的类型。
- stack：数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。下图中我们发现第五条折线的数据跟data中不匹配，这是因为这五条数据配置了相同的 stack 值，导致数据堆叠，数值为前五项相加，这样可以避免折线图重叠的情况。

最后

看到这里，希望你已经对ECharts已经有了初步的认识，以上的介绍只是ECharts功能中的冰山一角。还是建议你阅读官方文档，探索更多的配置和功能，以便更好地适应不同的数据可视化场景。如果你有任何关于 ECharts 的问题，也可以随时提问。

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞收藏+关注” ，感谢支持！！

原文链接：https://juejin.cn/post/7340486547274711078 作者：阳阳羊

ECharts 快速入门，我先冲了！

介绍

如何使用

1. 获取安装ECharts

2. 准备一个具备大小的DOM容器

3. 初始化echarts实例对象

4. 指定配置项和数据

5. 将配置项传echarts实例对象

效果展示

配置项

最后

相关推荐

发表回复