Echarts 第二阶段

175 阅读3分钟

授⼈以渔04_Echarts图表标准配置图示技巧

一、数据可视化概述

​ 广义上来说,数据可视化本身是一种泛称,它统一了较成熟的科学可视化和较年轻的信息可视化。而在大数据时代,除了包含这两种以外还囊括了在他们基础上发展起来的知识可视化以及结合了数据分析的可视化分析。

​ 从字面意义来说,数据可视化,顾名思义:就是能够以视觉上的一些展现方式来展现我们想要让用户看到的数据

二、Echarts概述

​ ECharts是一个商业级数据图表,纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器。

​ 它是由百度的技术部门所开发,最早是用在百度旗下的一些项目上的,后来其他应用觉得挺不错,也都逐渐使用,后来百度就进行了开源,只是现在已经托管到阿帕奇( Apache)组织了,目前已经更新到4.x版本。

​ 官网也有着详细使用介绍,不过还是建议用2.x版本的,能够让我们初学者遇到问题能够在网上很快找到解决方案。毕竟2.x相对来说更稳定一些,而且以后想再去使用3.x以上版本,也更能理解

三、Echarts特性介绍

百度官方是这样说的:

​ 浏览Echarts所输出的图标,你不在只是个“读者”,你可以参与其中,这就是Echarts,我们正在打造的一个拥有互动图形用户界面(GUI)的数据可视化工具

事实上,它也确实做到了这一点,这也就是为什么Echarts这么多人使用的原因,相比其他js图标库来说,它打破了单纯的视觉呈现,允许用户对所呈现的数据进行挖掘、整合,让可视化成为辅助用户来进行视觉化思考的方式

详细的特性,官网也有教程,这里就不一一叙述了,上链接: echarts.apache.org/zh/feature.…

四、Echarts学习必备基础知识

想要学习Echarts,最起码对html,css,javascript,有一定的了解,不了解的也没关系,只要简单会用html就可以。

使用Echarts,基本这四大项得掌握一下:

接口(enterprise charts 图标库) 图表类型(常用的有:柱状图,折线图,散点图,饼图,雷达图,等等) 组件(熟练使用组件中的每个属性对象,比如坐标轴(Axis),标题(Title),图例(Legend)等等) 基础库(canvas类库)

ECharts学习总结(二)-----图表组件漏斗图(funnel)

今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下:

首先我们需要这样做

1、拷贝出两个js文件:esl.js 和echarts.js ;

2、准备一个html页面进行图表容器配备和模块化加载js和创建图表

1)、引入esl.js文件

1

之所以要引入esl.js 文件,因为它内部封装了很多模块化加载js文件和创建图表的回调函数方法,