数据可视化图表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问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...
随机推荐
- spring+aspectJ的实现
AspectJ:(Java社区里最完整最流行的AOP框架) spring自身也有一套AOP框架,但相比较于AspectJ,更推荐AspectJ 在Spring2.0以上版本中,可以使用基于Aspect ...
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- 【dotnet跨平台】Asp.net 正在经历的变革
[dotnet跨平台]Asp.net 正在经历的变革 Asp.net 正在经历一场变革.从官网:https://get.asp.net/ 我们能够看到多个版本号的字眼例如以下: ASP.NET ...
- 【t033】单位unit
Time Limit: 1 second Memory Limit: 64 MB [问题描述] 某星球上有很多计量系统,之间的计量单位的转换很繁琐.希望你能编程解决这个问题. 现有N (1 <= ...
- hbase 配置高可用hmaster
1.先停掉hbase bin/stop-hbase.sh 2.在hbase的conf目录下创建 backup-masters 添加hadoop003 3.分发 4.重新启动hbase并查看 bin/s ...
- mingw-w64线程模型:posix vs win32(posix允许使用c++11的std:: thread,但要带一个winpthreads,可能需要额外dll)
我正在安装 mingw-w64 on Windows,有两个选项: win32线程和posix线程. 我知道win32线程和pthreads之间的区别,但是我不明白这两个选项之间的区别. 我怀疑如果我 ...
- JackSon fasterxml学习
概述 Jackson框架是基于Java平台的一套数据处理工具,被称为"最好的JavaJson解析器". Jackson框架包含了3个核心库:streaming,databind, ...
- Sleep(0)的妙用
在线程中,调用sleep(0)可以释放cpu时间,让线程马上重新回到就绪队列而非等待队列,sleep(0)释放当前线程所剩余的时间片(如果有剩余的话),这样可以让操作系统切换其他线程来执行,提升效率. ...
- Java网络编程注意事项1
网络编程的基础知识 什么是计算机网络,就是把分布在不同地理区域的计算机与专门的外部设备通信线路互连成一个规模大.功能强的网络系统. 计算机网络主要能做些下面功能: 1)资源共享 2)信息传输与集中处理 ...
- 使用Apache Tiles3.x构建界面布局
Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...