数据可视化图表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
效果图:

数据可视化图表ECharts的更多相关文章
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- Python调用matplotlib实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
- Excel数据可视化图表设计需要注意的几个问题
大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- JavaScript—数据可视化(ECharts)
Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...
- 数据分析 | 数据可视化图表,BI工具构建逻辑
本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...
- CSDN开源夏令营 百度数据可视化实践 ECharts(4)
ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比較难的知识点,方便理解概念.进而更好的掌握ECharts. (1)1. 一个完整的option包括什么?能 ...
- CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析
ECharts问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...
随机推荐
- 剑指Offer面试题10(Java版):二进制中的1的个数
题目:请实现一个函数,输入一个整数.输出该数二进制表示中1的个数. 比如把9表示成二进制是1001,有2位是1.因此假设输入9.该函数输出2. 1.可能引起死循环的解法 这是一道非常主要的考察二进制和 ...
- 【vs调试】PDB 文件:每个开发人员都必须知道的
[vs调试]PDB文件:每个开发人员都必须知道的 GDB:The GNU Project Debugger, 将会包含代码中符号(自定义变量, 数据类型), 还有函数调用或类引用的关联性, 有了pdb ...
- BZOJ 2783 树 - 树上倍增 + 二分
传送门 分析: 对每个点都进行一次二分:将该点作为链的底端,二分链顶端所在的深度,然后倍增找到此点,通过前缀和相减求出链的权值,并更新l,r. code #include<bits/stdc++ ...
- 【BZOJ 1012】 [JSOI2008]最大数maxnumber(单调队列做法)
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 [题意] [题解] 后加入的元素,如果比之前的元素大, 那么之前的元素比它小的元 ...
- scala 主从构造器
package cn.scala_base.oop.scalaclass /** * 构造器分为两种,一种是主构造器,另一种是从构造器,所有的从构造器必须在其方法体 * 的第一行调用主构造器 * * ...
- ice框架应用记录-框架说明
ice框架是一个解决分布式问题的框架,包括应用与管理工具两部分, 应用部分主要包括: 1,注册服务,用来管理所有节点:为了可靠性,一般会开启两个注册服务,一个主注册服务一个从注册服务 2,节点,就是开 ...
- hexo从零配置next全纪录
1.按照官网按照hexo: 2.下载next(目前使用的是最新发布版本6.4.1),解压后重命名为next,放在hexo工程themes目录下: 3.网站配置文件_config.yml中,改成them ...
- 使用dom4j来处理xml的一些常用方法
要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/ 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就 ...
- WPF 使用不安全代码快速从数组转 WriteableBitmap
原文:WPF 使用不安全代码快速从数组转 WriteableBitmap 本文告诉大家一个快速的方法,直接把数组转 WriteableBitmap 先来说下以前的方法,以前使用的是 BitmapSou ...
- 【MySQL案例】error.log的Warning:If a crash happens thisconfiguration does not guarantee that the relay lo
1.1.1. If a crash happens thisconfiguration does not guarantee that the relay log info will be consi ...