ECharts体验

## 数据可视化一、ECharts ### 1、数据可视化 #### （1）数据可视化 - 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。 - 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 ![image-20230330181813399](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e464f74e91384831934376de57bbccae~tplv-k3u1fbpfcp-zoom-1.image) #### （2）数据可视化的场景 - 目前互联网公司通常有这么几大类的可视化需求： ![image-20230330182005521](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ceef55b59784902b71aa438c74ea7e4~tplv-k3u1fbpfcp-zoom-1.image) #### （3）常见的数据可视化库 - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) - ECharts.js 百度出品的一个开源 Javascript 数据可视化库 - Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 - AntV 蚂蚁金服全新一代数据可视化解决方案 - 等等 ### 2、ECharts简介 - ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ![image-20230330182829638](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/921e372626ad4341a07c2939c85f2ea1~tplv-k3u1fbpfcp-zoom-1.image) - 常用地址 - 官网地址：[https://echarts.apache.org/zh/index.html](https://echarts.apache.org/zh/index.html) - 官网下载地址：[https://echarts.apache.org/zh/download.html](https://echarts.apache.org/zh/download.html) - 官网示例代码地址：[https://echarts.apache.org/examples/zh/index.html](https://echarts.apache.org/examples/zh/index.html) - 官网配置项地址：[https://echarts.apache.org/zh/option.html](https://echarts.apache.org/zh/option.html) - 优点 - 丰富的可视化类型 - 多种数据格式支持 - 流数据的支持 - 移动端优化 - 跨平台使用 - 绚丽的特效 - 详细的文档说明 - 常用社区（各种定制图表）如下 - [https://www.isqqw.com/](https://www.isqqw.com/) - [https://www.makeapie.cn/echarts](https://www.makeapie.cn/echarts) - [http://chart.365api.cn/](http://chart.365api.cn/) - [http://chartlib.datains.cn/echarts](http://chartlib.datains.cn/echarts) ### 3、ECharts基本使用 #### （1）使用五步曲 - 步骤1：官网下载并引入echarts.js文件：图表依赖这个js库 - 步骤2：准备一个具备大小的DOM容器：生成的图表会放入这个容器内 - 步骤3：初始化echarts实例对象：实例化echarts对象 - 步骤4：指定配置项和数据(option)：根据具体需求修改配置选项 - 步骤5：将配置项设置给echarts实例对象：让echarts对象根据修改好的配置生效 **案例如下：** ```html ECharts体验

``` ![image-20230505134941292](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4955ea3cb91141f0ae31cad924f52774~tplv-k3u1fbpfcp-zoom-1.image) #### （2）如何下载 - 官网下载地址：[https://echarts.apache.org/zh/download.html](https://echarts.apache.org/zh/download.html) ![image-20230505135201574](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85fdc4067b114d0189116b3dc434ff03~tplv-k3u1fbpfcp-zoom-1.image) - 找到对应版本的代码库，对应的js文件即可，我们这里取压缩的版本 - git相关知识参考：[https://blog.csdn.net/liyou123456789/article/details/121411053](https://blog.csdn.net/liyou123456789/article/details/121411053) ![image-20230505135324511](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30629075f172467b8658f330d3d2d33e~tplv-k3u1fbpfcp-zoom-1.image) #### （3）选择不同图表 - 要展示不同类型的图表，只要更换第四步代码即可，其他部分都是一样的 - 官网示例代码地址：[https://echarts.apache.org/examples/zh/index.html](https://echarts.apache.org/examples/zh/index.html) - 找到你需要的，点进去，直接拷贝代码 ![image-20230505135704971](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/897793ff38a1468bacfc488186d2ea36~tplv-k3u1fbpfcp-zoom-1.image) ![image-20230505135858226](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6ac933556994e6eb09938132990a684~tplv-k3u1fbpfcp-zoom-1.image) **案例如下：** ```html 选择EChart图表

``` ![image-20230505140128988](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cf047fd3a9247c89cfbfee5dd2a153d~tplv-k3u1fbpfcp-zoom-1.image) #### （4）相关配置项 - 官网配置项地址：[https://echarts.apache.org/zh/option.html](https://echarts.apache.org/zh/option.html) - 先了解以下几个主要配置的作用，其余配置还有具体细节我们可以查阅文档：菜单—配置项手册，学echarts关键在于学会查阅文档，根据需求修改配置 ![image-20230505141219980](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/084180960b2e429e957b16199b3f20be~tplv-k3u1fbpfcp-zoom-1.image) - title：标题组件 - tooltip：提示框组件 - legend：图例组件 - toolbox: 工具栏 - grid：直角坐标系内绘图网格 - xAxis：直角坐标系grid 中的 x 轴 - yAxis：直角坐标系 grid 中的 y 轴 - color：调色盘颜色列表 - series: 系列列表 - type: 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等 - name: 系列名称，用于tooltip的显示，legend 的图例筛选变化 - stack: 如果设置相同值，则会数据堆叠。如果指定不同值或者去掉这个属性则不会数据堆叠，数据堆叠就是在页面上的数值是下面的数值叠加上去的，不是直接取数组中的值 ![image-20230330184825292](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57069c50c8c64aa4af56123cc038dcbf~tplv-k3u1fbpfcp-zoom-1.image) **案例如下：** ```html 定制ECharts图表相关配置

``` ![image-20230505151612833](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8128e9d3929e4b1b919a82c853d430f6~tplv-k3u1fbpfcp-zoom-1.image)