介绍:

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

效果图:

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

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

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  2. ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  3. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  4. Excel数据可视化图表设计需要注意的几个问题

    ​大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...

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

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  6. JavaScript—数据可视化(ECharts)

    Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...

  7. 数据分析 | 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

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

    ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比較难的知识点,方便理解概念.进而更好的掌握ECharts. (1)1.  一个完整的option包括什么?能 ...

  9. CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析

    ECharts问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...

随机推荐

  1. Erlang中频繁发送远程消息要注意的问题

    http://avindev.iteye.com/blog/76373 注:这篇文章可能会有争议,欢迎提出意见 在Erlang中,如果要实现两个远程节点之间的通信,就需要通过网络来实现,对于消息发送, ...

  2. boost-1.53源代码编译

    1.下载源代码.首先得明确,boost大多数库都仅仅有头文件.链接时不需Lib文件:下面库须要单独编译成库: Boost.Filesystem Boost.GraphParallel Boost.IO ...

  3. 【21.37%】【codeforces 579D】"Or" Game

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  4. 【56.74%】【codeforces 732B】Cormen --- The Best Friend Of a Man

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  5. 【心情】NOIP2014记忆

    无意中又翻到这张表格. 现在看起来真的感慨万分. 如果当时把link多想想,也许就能拿满分了. 如果当时的bird看出来那个傻逼背包模型就好了. 如果equation当时我想到大质数取模就好了; 如果 ...

  6. Linux 网络编程——TCP

    环境:Linux  C   一.协议介绍      TCP是面向连接的协议,提供可靠的数据传输:TCP协议的可靠传输基于三次握手.四次挥手以及确认重传机制实现.下面来具体展示下TCP的三次握手.四次挥 ...

  7. VC++实现Vista和Win7系统低权限程序向高权限程序发消息

    Windows 7已经隆重发布,但是很多程序员已经通过RTM等版本尝到了Windows 7的甜处.那么在Windows 7下用户界面特权隔离,将是本文我们介绍的重点. 我们介绍了操作系统服务的Sess ...

  8. jQuery迭代器

    http://www.imooc.com/code/3417 迭代器 迭代器是一个框架的重要设计.我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代 ...

  9. 升级cocoapods 0.36.0之后,解决更新的部分依赖库,不是最新版本号的问题

    在升级到cocoapods 0.36.0之后,使用原本podfile配置,在又一次运行pod install之后,一些依赖库的版本号,低于github上的最新版本号.可依照下列配置.指定git,强制使 ...

  10. QT环境安装VS2013(系统环境里设置QTDIR,并添加VS2013的BIN目录)

    QT环境安装VS2013 文件名 1.qt5.5.1 qt-opensource-windows-x86-msvc2013-5.5.1.exe 2.qt vs插件 3.qt-vs-addin-1.2. ...