百度图表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 ...
随机推荐
- *运算和&运算
/* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...
- [vijos]P1642 班长的任务
背景 十八居士的毕业典礼(1) 描述 福州时代中学2009届十班同学毕业了,于是班长PRT开始筹办毕业晚会,但是由于条件有限,可能每个同学不能都去,但每个人都有一个权值,PRT希望来的同学们的权值总和 ...
- C# WPF 粘贴板记录器
工作学习中需要搜索很多资料,有建立文档对遇到过的问题进行记录,但是一来麻烦,二来有些当时认为不重要的事情,也许一段时间后认为是重要的,需要记录的,却又一时找不到,浪费时间做重复的事情.正好借着这个机会 ...
- VNC远程登录端使用经验之一
1.vnc/xmanager都是经常用的远程登录软件.vnc有个缺点就是他的进程不会自动退出比如如果开了PID1再去开PID2...PIDn.那么前面的PIDn-1个进程就会一直运行如果不手动kill ...
- Django 惰性机制
惰性机制:Publisher.objects.all()或者.filter()等都只是返回了一个QuerySet(查询结果集对象),它并不会马上执行sql,而是当调用QuerySet的时候才执行sql ...
- Cleaning Shifts POJ - 2376 （贪心题）
Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31194 Accepted: 7677 ...
- Linux和 Mac下git pull/push 免输入密码和账号
linux下面可以直接创建.git-credential文件,命令如下: 创建文件,进入文件,输入内容: cd ~ touch .git-credentials vim .git-credential ...
- Python并发（二）
并发是指一次处理多件事,而并行是指一次做多件事.二者不同,但互相有联系.打个比方:像Python的多线程,就是并发,因为Python的解释器GIL是线程不安全的,一次只允许执行一个线程的Python字 ...
- 使用spyder3调试python程序
Ctrl+F5 以Debug模式运行文件 在debug之前记得用%reset 指令清空一下ipython工作空间中的变量,以免影响debug中变量值的查看 无论你是否打断点,都会在第一行语句执行之前中 ...
- 03-python进阶-爬虫入门-正则
[urllib and urllib2] 这是两个python的网络模块 内置的 提供很好的网络访问的功能. #!coding:utf-8 import urllib2 res = urllib2.u ...