百度图表echars插件使用案例
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/"; %>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<%=basePath%>/echarts-2.2.7/build/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: '<%=basePath%>/echarts-2.2.7/build/dist'
}
});
// 基于准备好的dom，初始化echarts实例 // 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
); </script>
</body>
</html>
百度图表echars插件使用案例的更多相关文章
- 转：几款免费的图表js插件
1,ichartjs(国产)(http://www.ichartjs.com/) ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- 5个最顶级jQuery图表类库插件-Charting plugin
转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...
- highCharts入门-强大的图表库插件
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...
- opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile
OpenCart(http://www.opencart.com/,http://www.opencartchina.com/)是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者 ...
- cookie.js插件的案例
cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md 文档 api 在这里即可查看用法 ...
- 图表插件echars的使用案例
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 百度图表插件echart简单应用，简单配置一些要显示的样式及种类
从echart官网下载js,然后引入jq即可运行.足够简单应用了 关键词:echart控制:图标标题.数据标题.折线图.柱状图切换按钮.恢复刷新图表按钮.保存为图片按钮.坐标系控制.坐标数据.坐标倾斜 ...
- 百度开源项目插件 - Echarts 图表
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- HTML5<figure>元素
HTML5<figure>元素是用来定义页面文档中独立的流内容(图像,图表,照片,代码块),figure内容与主内容有关,如果被删除,则不影响主文档流的产生. HTML5<figca ...
- 【思维题 费用流 技巧】bzoj5403: marshland
主要还是网络流拆点建图一类技巧吧 Description JudgeOnline/upload/201806/1(4).pdf 题目分析 第一眼看到这题时候只会把每个点拆成4个方向:再强制定向连边防止 ...
- 03大端和小端（Big endian and Little endian）
1.大端和小端的问题 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),而 Little endian 则相反 ...
- Python分布式爬虫开发搜索引擎 Scrapy实战视频教程
点击了解更多Python课程>>> Python分布式爬虫开发搜索引擎 Scrapy实战视频教程 课程目录 |--第01集 教程推介 98.23MB |--第02集 windows下 ...
- 微软与百度合作:win10搜索引擎默认百度
全球最大的中文搜索引擎百度公司与微软公司共同宣布双方展开战略合作.百度并将成为中国市场上Windows 10 Microsoft Edge浏览器的默认主页和搜索引擎.也就是说,将来人们在win10的M ...
- 通过源码编译安装VIM
开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载旧版本的Vim: sudo ...
- Java观察者模式(Observer)
一.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态上发生变化时,会通知所有观察者对象,让他们能够自动更新自己.主要应用在java的AWT事件机制 ...
- HDU 3072 SCC Intelligence System
给出一个带权有向图,要使整个图连通.SCC中的点之间花费为0,所以就先缩点,然后缩点后两点之间的权值为最小边的权值,把这些权值累加起来就是答案. #include <iostream> # ...
- MongoDB学习-->命令行增删改查&JAVA驱动操作Mongodb
MongoDB 是一个基于分布式文件存储的数据库. 由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关 ...
- JS实现——计算两日期之差
在网上找了个js实现的,根据相差天数计算日期和根据两个日期计算相差多少天的示例和代码: 根据相差天数计算日期: 距离: 年 月 日 相差: 天 (输入负数则往前计算) 日期是: 根据日期计算相差天 ...