介绍:
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 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
-
百度数据可视化图表套件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问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...
-
CSDN开源夏令营 百度数据可视化实践 ECharts(8)
(1)前言 首先谢谢林峰老师,继续接着第七篇提到的内容.CSS布局确实非常累,感觉不好看了就的调整,总的看起来的高大上嘛.好了废话不再多说.今天主要就先解说一个页面的内容,对于CSS布局后面讲会具体的 ...
随机推荐
-
17.观察者模式(Observer Pattern)
using System; using System.Collections.Generic; namespace ConsoleApplication10 { /// <summary> ...
-
iOS设计模式之简单工厂模式
简单工厂模式 基本理解 到底要实例化谁,将来会不会增加实例化的对象,比如计算器增加开根运算,这是很容易变化的地方,应该考虑用一个单独的类来做这个创造实例的过程,这就是工厂. 通过使用工厂模式,我们可以 ...
-
iOS edgesForExtendedLayout、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets属性详解
edgesForExtendedLayout: 在IOS7以后 ViewController 开始使用全屏布局的,而且是默认的行为通常涉及到布局,就离不开这个属性 edgesForExtendedLa ...
-
树莓派+qt+opencv
树莓派:Qt开发套件和opencv安装sudo apt-get install qt4-dev-tools libqt4-dev 不用qt core 的话,其实只要按照 qt4-qmake就行了(只做 ...
-
storm启动分析
一个topology的启动包括了三个步骤 1)创建TopologyBuilder,设置输入源,输出源 2)获取config 3)提交topology(这里不考虑LocalCluster本地模式) 以s ...
-
基于FPGA的均值滤波算法的实现
前面实现了基于FPGA的彩色图像转灰度处理,减小了图像的体积,但是其中还是存在许多噪声,会影响图像的边缘检测,所以这一篇就要消除这些噪声,基于灰度图像进行图像的滤波处理,为图像的边缘检测做好夯实基础. ...
-
支持“XXX”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269)。
在Global.asax文件中的Application_Start()方法中加入以下代码 Database.SetInitializer<XXX>(null);
-
代码审查Code Review
代码审查清单 常规项 代码能够工作么?它有没有实现预期的功能,逻辑是否正确等. 所有的代码是否简单易懂? 代码符合你所遵循的编程规范么?这通常包括大括号的位置,变量名和函数名,行的长度,缩进,格式和注 ...
-
pytest.5.参数化的Fixture
From: http://www.testclass.net/pytest/parametrize_fixture/ 背景 继续上一节的测试需求,在上一节里,任何1条测试数据导致断言不通过后测试用例就 ...
-
C# Quartz的配置
1. 介绍 Quartz为后台工作者提供了得便利,我们下面介绍一下它的配置.本文配置主要针对服务程序的配置. 但是在做下面配置之前,要安装包 Install-Package Quartz 2. Qua ...