介绍:

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. Android selector背景以及透明色

    selector可以设置图片或layout的点击效果: <?xml version="1.0" encoding="utf-8"?> <sel ...

  2. js进阶 9-8 html标签如何实现禁止复制和粘贴

    js进阶 9-8  html标签如何实现禁止复制和粘贴 一.总结 一句话总结: 1.在oncopy方法中return false即可阻止在控件中复制内容 2.在onpaste方法中return fal ...

  3. log4erl Configuration

    https://github.com/ahmednawras/log4erl/blob/master/CONFIGURATION.txt Configuration Guide: ========== ...

  4. AJAX代码格式

    var request; //XMLHttpRequest的创建 function createRequest(url){ if(window.XMLHttpRequest){ request = n ...

  5. SQL表的默认常用数据类型

    分类 字段类型 描述 整数 bit 0或1的整型数字 int 从-2^31(-2,147,483,648)到2^31-1(2,147,483,647)的整型数字 smallint 从-2^15(-32 ...

  6. Linux下用GCC

    Linux下用GCC 前言 离职前对做过的支付系统进行了一番#总结,继续完善我的C服务器. 本想着接下来大概实现一下 CGI 协议,但是实现过程中被一个问题卡住了: C进程与php进程的交互数据类型问 ...

  7. winform - FixedDialog

    可以设置form的属性: 窗口样式: MaximizeBox  :  false       去掉 方法 按钮 MinimizeBox  :  false       去掉 缩小到任务栏 的按钮 禁止 ...

  8. 关于java中继承抽象类和实现接口的区别

    简单来说,继承就是“是不是”,实现就是“有没有”.(一个大神说的,我觉得很生动很形象 海子大神链接http://www.cnblogs.com/dolphin0520/p/3811437.html)

  9. Java反射获取内部类有局限

    这周接触到继承及修改具有包访问权的内部类内容,略梳理了下各种资料,发觉在包外修改内部类内容必须通过实例....... 网上关于这部分的内容比较少,参考了下这位的帖子:http://blog.csdn. ...

  10. OpenCV dll 源码调试—附加到进程

    使用CMake可以生成OpenCV源码的解决方案,然后就可以对OpenCV函数进行修改,功能剪切等操作了,对这部分内容感兴趣的可以浏览一下上一篇文章:CMake生成OpenCV解决方案&&am ...