数据可视化图表ECharts

介绍:

ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互、个性化的数据可视化图表。

ECharts提供了折线图、柱状图、散点图、饼图、K线图,以及地图、热力图、关系图等多种图表API,并支持多图混搭。

ECharts一直在交互上不断的改进,最新版的ECharts3支持坐标轴、维度上对数据进行过滤、缩放、平移。对于数据的改变,ECharts会找到两组数据的差异,结合动画去表现数据的变化。对于地理数据,加入了酷炫的特效。

使用起来简单、易上手。

还能根据喜好,更换不同的主题

兼容性:

绝大部分浏览器都支持,IE8也支持哦。

使用:

首先要准备一个具备宽高的DOM容器

文件引入方式:

(一)传统的,通过<script>标签引入

(二)也可以使用模块化的方式

首先,可以通过npm安装ECharts

引入js

初始化:

配置文件:

然后就可以写配置文件啦,通过setOption生成所需要的图表。

title:图表标题

xAxis、yAxis:X轴、Y轴

series:系列列表,通过其中的type属性决定图表类型。

更多的参数配置可以参考这里:http://echarts.baidu.com/option.html#title

效果图:

 

时间: 2024-11-09 09:16:56

数据可视化图表ECharts的相关文章

Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&amp;&amp;两个echarts详细教程(柱状图,南丁格尔图)

Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化.   1.npm

CSDN开源夏令营 百度数据可视化实践 ECharts(6) 期中总结

期中总结 (1)首先感谢林峰老师的辛勤指导!! 通过半个多月的培训,林峰老师讲解了ECharts总体框架和其中各个部分:图类.组件.接口.基础库的具有应用方法和应该把握的细节,并通过实际的例子熟悉和掌握各个控件.只有打牢基础才能正正的为下步的工作做好准备,熟练的属性代码的编程技巧,才能做出更好的专题. (2)第一次任务重点总结: 要求:了解ECharts特性中列举的每一项特性,并能找到实例中的例子,并且在实例中操作. 重点问题: 1)ECharts一种支持多少种图表?有多少个组件?列举出中英文名

CSDN开源夏令营 百度数据可视化实践 ECharts(2)

将ECharts引入项目中的几种详细方法讲解 (1)打好基本功 首先感谢林峰老师!给我们的悉心指导.我们之所以学习ECharts和Zrender图表组件,为了就是能够将图表应用到我们的实际情况中 来,进而让图表的战士能给我们一种更加人性化的方式呈现给用户.所有我们必须熟悉ECharts中相关组件.下面的例子都以line为例. (2)将ECharts引入项目共有三种方式 2.1)第一种方式-模块化包引入 模块化包引入模式也可以称为开发模式,是开发时最好的方法,不管是开发echarts还是用echa

CSDN开源夏令营 百度数据可视化实践 ECharts(1)

总体规划 (1)选题: 通过了解林峰老师的专题中国主要城市空气质量实况.中国经济十年时空漫游和中国人口流动大潮,涉及了人口.经济和民生等方面的内容,在这里我选择中国高考,作为我的切入点. 高考,一个永恒的话题,是一场你我都值得经历的一场无硝烟的战争.有人曾说:每个高考的孩子都背负着几代人的希望,每个高考的背后都有众多关注的眼睛.人生能有几回搏?虽然失去了许多,但终究会收获很多. (2)题目 2006-2014高考各省市报名人数及录取人数汇总专题 (3)搜集数据资料 工欲善其事,必先利其器.数据的

跟风舞烟学大数据可视化-Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja

CSDN开源夏令营 百度数据可视化实践 ECharts(4)

ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比较难的知识点,方便理解概念,进而更好的掌握ECharts. (1)1.  一个完整的option包含什么?可以归纳为几类? 下图中颜色已经区分出了三类分别是:公共选项 , 组件选项 , 数据选项 名称 描述 {color}backgroundColor 全图默认背景,(详见backgroundColor),默认为无,透明 {Array} color 数值系列的颜色列表,(详见color),可配数组,eg:

百度数据可视化图表套件echart实战

最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使用了一下echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html).这个echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游,全中文文档

CSDN开源夏令营 百度数据可视化实践 ECharts(5)

Echarts map 谢谢林峰老师的辛勤指导! 本节内容:熟练掌握map和时间轴的搭配 (1)map基本属性 名称 默认值 描述 {boolean | string}selectedMode null 选中模式,默认关闭,可选single,multiple {string} mapType 'china' 地图类型,支持world,china及全国34个省市自治区.省市自治区的mapType直接使用简体中文: 新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南,

CSDN开源夏令营 百度数据可视化实践 ECharts(3)

Echarts  仪表盘 这里主要讲一讲series(仪表盘)的用法,驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据 功能丰富,可以做出很漂亮的东西来. (1)首先讲一下仪表盘的基本属性 其中最常用的属性: center 圆心坐标,支持绝对值(px)和百分比,百分比计算min(width,height)*50%,radius 半径大小,支持绝对值(px),百分比计算. radius:半径属性,可以调控半径的大小,支持绝对路径和百分比. (2)全部属性: 名称 默认值 描述 {Ar