ECharts-一个基于js的可视化图表库

目录

一、 ECharts 是什么？

二、ECharts 安装与使用

 ①：下载配置文件

 ②：引入echarts.min.js

③定义了高宽的 DOM 容器： 

④：初始化实例--->指定配置和数据----> setOption 方法显示图表 

⑤练习：

三、如何根据自己的需求调配置（option）?

①title标题组件

②tooltip提示框组件

③legend图例组件

④grid网格组件

⑤toolbox工具箱组件 

⑥xAxis（X轴）组件

⑦yAxis（y轴）组件

⑧series（数据系列）※

⑨color调色板组件

 四、tips

---

一、 ECharts 是什么？

        ECharts (Enterprise Charts) 是一款以 JavaScript 编写的强大数据可视化工具，由国内的 Apache 团队开发并与 Apache Software Foundation 合作完善。提供了多种图表类型，支持动态交互以及大量数据处理，在 Web 可视化实现中非常优秀。

        包括抽象图表（折线图、柱状图、散点图、饼图等），地理图可视化，3D 图表，大规模数据处理等。支持大规模数据传入，在 WebGL 和 Canvas 上高效渲染。支持动态操作（滑动、收缩、选择、动态动画等），实现高级的交互效果。使用便捷，只需几行代码就可以实现处理与渲染图表。支持为自定义图表添加特定图形或动画。

二、ECharts 安装与使用

你会javascript就更好理解了【真的挺好学的】，不会也不碍事

官网： Apache ECharts

 快速上手 - 使用手册 - Apache ECharts  -----博文中的代码均可在这找到哦~

        ①：下载配置文件

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。【像jquery一样】

    

 ②：引入echarts.min.js

③定义了高宽的 DOM 容器： 

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。

④：初始化实例--->指定配置和数据----> setOption 方法显示图表 

 运行：

⑤练习：

点击进入示例商城

        随便进入一个示例copy下他的js代码【官网给出的只有图表的配置项和数据，即option这一项，记得自己加上初始化和setoption显示】

 

站到vscode运行打开网页显示： 

 

三、如何根据自己的需求调配置（option）?

        有时候示例给出的option只能满足我们80%的需求等等，我们该如何调整配置使其100%满足我们的需求呢？？？？？？？ 💪💪💪💪

以这个为例：

将左侧代码折叠起来就能看到配置代码的组成板块，修改的时候也是修改这些板块，本文只介绍常用的几个【其他自行去官网学习就好啦~~💖💖】 

①title标题组件

        这个很简单，就是图表显示的标题，我们打开他的配置项可以查看title的属性

💡其他组件的属性同样也是折磨看滴

我们以padding属性为例：

到这儿，其实只需要根据官方的文档去查询你想实现的功能就行【不用去背，属性太多啦不可能背过放心吧🤣】

②tooltip提示框组件

当用户鼠标悬停在图表上时，显示数据项的详细信息

③legend图例组件

        用于展示图表中不同数据系列的图例，支持点击图例项来控制数据系列的显示与隐藏。以orient属性为例

也可以调位置等等很多功能

④grid网格组件

        针对网格区域设置，框起来的这一块

 

⑤toolbox工具箱组件 

提供数据视图工具、保存为图片等功能，可以通过工具箱对图表进行操作。

⑥xAxis（X轴）组件

        可以设置X轴的名称（通过 name 属性）、数据类型（通过 type 属性，如 category、value 或 time）、刻度（通过 axisTick）、标签（通过 axisLabel）等。

⑦yAxis（y轴）组件

• 类似于X轴，可以设置Y轴的名称、数据类型、刻度、标签等。

⑧series（数据系列）※

   series 表示图表的数据系列，用于定义图表中的数据和对应的展示方式。每个数据系列可以包含一个或多个数据项，每个数据项对应一个数据点。

       正确使用 'series' 的方法如下：在 ECharts 的配置对象中找到 'series' 属性，为 'series' 属性赋值一个数组，数组中的每个元素代表一个数据系列。每个数据系列是一个对象，常用的属性如下

1. name：图表的名称，通常用于图例显示。

2. type：图表类型，如 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）等。

3. data：数据数组，定义图表中的数据点。

4. markPoint：标记点，用于在图表上标记特定的数据点。

5. markLine：标记线，用于在图表上绘制标记线。

6. markArea：标记区域，用于在图表上标记特定的区域。

7. smooth：平滑曲线，用于折线图，使线条平滑。

8. itemStyle：单个数据项的样式，如颜色、边框等。

9. label：标签配置，用于设置数据项的标签样式和位置。

10. areaStyle：区域填充样式，用于设置区域图的填充样式。

11. lineStyle：线条样式，用于设置线条的样式。

12. emphasis：高亮状态样式，用于设置数据项在高亮状态下的样式。

⑨color调色板组件

 四、tips

        借助AI工具，提示词“这是****图的option部分的代码，【复制示例代码】，请你将其中的数据替换为文件的数据【我们的数据，可以直接表excel/csv表当做附件传给ai】（也可以添加自定义风格）”

        写的不是很详细，我感觉主要是看他的官方文档，也可以看看这篇博文 ：【Echarts】一文快速上手Echarts（持续更新）-CSDN博客