ECharts初体验
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
代码:
ECharts下载地址:http://echarts.baidu.com/download.html
html:
<div id="main" style="width: 100%; height:100%; min-height: 300px;"></div>
引入插件:
<script type="text/javascript" src="../js/echarts.common.min.js"></script>
javascript:
// 初始化echarts
//var myChart = echarts.init($('#main'));
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: '流量统计'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['PV','UV','IP']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'PV',
type:'line',
stack: '总量',
areaStyle: {},
data:[20, 132, 101, 134, 100, 230, 250]
},
{
name:'UV',
type:'line',
stack: '总量',
areaStyle: {},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'IP',
type:'line',
stack: '总量',
areaStyle: {},
data:[150, 232, 201, 154, 190, 330, 410]
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//手机兼容
window.addEventListener("resize", function () {
myChart.resize(); //窗口变化重新渲染统计图
});
ECharts初体验的更多相关文章
- ECharts 初体验
缘起 ECharts,缩写来自Enterprise Charts,商业级数据图表,它最初是为了满足公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表需求.以前这些系统的图表需求我们都是使用fla ...
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
随机推荐
- JS购物车编辑
实现了:第一件商品的加减实现了:全选/全不选(使用prop而不是attr)实现了:删除(遮罩层) 未实现:第二件商品的删除未实现:小计及应付款额的初始化(写死的) 计算小数乘法时,要先乘100 < ...
- 深入了解scanf()/getchar()和gets()/cin等函数
转:http://www.cnblogs.com/FCWORLD/archive/2010/12/04/1896511.html 转:问题描述一:(分析scanf()和getchar()读取字符) s ...
- Error importing tensorflow. Unless you are using bazel version `CXXABI_1.3.8' not found
I have re-installed Anaconda2. And I got the following error when 'python -c 'import tensorflow'' &g ...
- 2019.3.28 S21 day02pyth笔记总结
昨日内容补充: 1.字符串:'中国' 'Hello' 字符:中是一个字符,e是一个字符 字节:中是3个字节,e是1个字节 位:01010101是8位,其中0或1分别是1位 unicode用于内存 ...
- 数据库类型空间效率探索(五)- decimal/float/double/varchar
以下测试为userinfo增加一列,列类型分别为decimal.float.double.varchar.由于innodb不支持optimize,所以每次测试,都会删除表test.userinfo,重 ...
- 织梦会员 Warning: preg_replace(): The /e modifier is no longer supported, us...
http://php.net/manual/zh/reference.pcre.pattern.modifiers.php#reference.pcre.pattern.modifiers.eval ...
- 508. Most Frequent Subtree Sum 最频繁的子树和
[抄题]: Given the root of a tree, you are asked to find the most frequent subtree sum. The subtree sum ...
- WordPress 自动初始化数据库
背景 自动化搭建开发环境.测试.部署如通过网页操作(访问 /wp-admin/install.php)相对比较麻烦且在有的场景无法实现. 步骤 修改 wp-config.php 配置 wordpres ...
- java_18 Collection接口
1.Collection接口 Collection 层次结构 中的根接口.Collection 表示一组对象,这些对象也称为 collection 的元素.一些 collection 允许有重复的元素 ...
- ubuntu系统安装微信小程序开发工具
在ubuntu系统中安装微信小程序开发工具之前,先要安装wine与git 一.安装wine 1.如果您的系统是64位,启用32位架构(如果您还没有) sudo dpkg --add-architect ...