Echart - 最好最强大效果最丰富的可视化图表插件
# 官网
http://echarts.baidu.com/ # demo
http://echarts.baidu.com/gallery/index.html
Echart
npm install echarts --save
demo1 : 从简单的柱状图开始
核心知识点【setOption参数介绍】:http://echarts.baidu.com/option.html#title
var echarts = require('echarts'); var myChart = echarts.init(document.getElementById('main')); myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
demo2 : 异步数据加载和更新
ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得十分简单。
var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
setTimeout(function () {
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: [5, 20, 36, 10, 10, 20]
}]
});
},2000);
Echart - 最好最强大效果最丰富的可视化图表插件的更多相关文章
- 超强可视化图表工具:Smartbi!!
要制作出专业的可视化图表,还是需要一定的学习成本的,并且需要大量的时间.并且即使是制作出来,配色也是一大难题,对于一般人而言,通常会通过两种方式实现可视化大屏的制作: 1.写代码 大部分人可能会选择大 ...
- JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表
本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上. 对 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
- vue-cli+v-charts实现移动端可视化图表
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个 ...
- 可视化图表库--goJS
GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯java ...
- 数据可视化-gojs插件使用技巧总结
随着云计算时代的到来,由于Web技术的快速革新以及为了提供高质量的用户体验,数据可视化成为了前端技术发展的一大方向.为了解决这个问题,现如今涌现了很多优秀的第三方的javascript图形库,比如hi ...
- Excel数据可视化图表设计需要注意的几个问题
大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...
- PPT绝对不能没有它!精美酷炫的可视化图表来啦!
从我们上学到工作,PPT我们见得多了,也做得多了.上学的时候最怕老师布置的作业是以PPT形式上交,工作中项目汇报.工作总结.年终汇报等,哪哪都需要用到PPT.PPT中文字太多,被批判不够简炼:图片太多 ...
随机推荐
- 树链剖分【p4114】Qtree-Query on a tree I
Description 给定一棵n个节点的树,有两个操作: CHANGE i ti 把第i条边的边权变成ti QUERY a b 输出从a到b的路径中最大的边权,当a=b的时候,输出0 Input 第 ...
- 素数路(prime) (BFS)
问题 C: 素数路(prime) 时间限制: 1 Sec 内存限制: 64 MB提交: 8 解决: 5[提交][状态][讨论版] 题目描述 已知一个四位的素数,要求每次修改其中的一位,并且要保证修 ...
- 9、Django实战第9天:用户注册功能
今天完成的是用户注册功能... 首先把注册页面的前端文件register.html复制到templates目录下 编辑users.views.py,创建一个注册的类 class RegisterVie ...
- SQL*Loader-605: Non-data dependent ORACLE error occurred — load discontinued
It seems the tablespace is full.
- Xamarin XAML语言教程基本页面ContentPage占用面积(二)
Xamarin XAML语言教程基本页面ContentPage占用面积(二) Xamarin XAML语言教程基本页面ContentPage占用面积(二)内容页面的添加 为了方便用户添加Content ...
- luogu P1855 榨取kkksc03
题目描述 以下皆为真实的故事. 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本的搭建oj并高效率的完成训练计划. 为什么说是搭建oj呢?为什么高 ...
- 找出分数最高的前两个学生 Exercise05_09
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出分数最高的前两个学生 * */ public class Exerci ...
- Android Studio 生成aar包多Module引用问题
问题描述: 有个arr文件被放到Module A中引用,现在Module B又依赖了Module A,则在编译过程中会发生错误,Module B找不到aar文件. 解决办法: 使用相对路径来找到这个a ...
- 网络抓包工具Wireshark和Fidder
http://fangxin.blog.51cto.com/1125131/735178 http://blog.csdn.net/jiangwei0910410003/article/details ...
- CASJAVA一些理解
如果不用锁机制如何实现共享数据访问.(不要用锁,不要 用sychronized 块或者方法,也不要直接使用 jdk 提供的线程安全的数据结构,需要自己实现一个类来保证多个线程同时读写这个类中的共享 ...