<%@ 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插件使用案例的更多相关文章

  1. 转:几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

  2. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  3. 5个最顶级jQuery图表类库插件-Charting plugin

    转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...

  4. highCharts入门-强大的图表库插件

    简介         Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...

  5. opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile

    OpenCart(http://www.opencart.com/,http://www.opencartchina.com/)是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者 ...

  6. cookie.js插件的案例

    cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md    文档  api   在这里即可查看用法 ...

  7. 图表插件echars的使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  8. 百度图表插件echart简单应用,简单配置一些要显示的样式及种类

    从echart官网下载js,然后引入jq即可运行.足够简单应用了 关键词:echart控制:图标标题.数据标题.折线图.柱状图切换按钮.恢复刷新图表按钮.保存为图片按钮.坐标系控制.坐标数据.坐标倾斜 ...

  9. 百度开源项目插件 - Echarts 图表

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 【状态压缩dp】1195: [HNOI2006]最短母串

    一个清晰的思路就是状压dp:不过也有AC自动机+BFS的做法 Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T ...

  2. ubuntu系统普通用户密码忘记之重置

    当我们在使用ubuntu系统忘记普通用户登录密码的时候,会被系统在登录界面拒之门外而不得入,这时候只好需要我们去重新设置密码,具体做法如下: 系统重启,在GRUB模式下选择Advanced Optio ...

  3. python源码剖析学习记录-01

    学习<Python源码剖析-深度探索动态语言核心技术>教程         Python总体架构,运行流程   File Group: 1.Core Modules 内部模块,例如:imp ...

  4. k8s Pod的自动水平伸缩(HPA)

    我们知道,当访问量或资源需求过高时,使用:kubectl scale命令可以实现对pod的快速伸缩功能 但是我们平时工作中我们并不能提前预知访问量有多少,资源需求多少. 这就很麻烦了,总不能为了需求总 ...

  5. 【python】python安装和运行报错汇总

    本文主要用于汇总在python开发过程中遇到的各种环境.工具相关问题,便于后续遇到相关问题,及时搞定,持续更新. 一.安装pip失败,具体如下: 错误信息: python setup.py insta ...

  6. C与C++接口相互调用

    转载于:http://blog.csdn.net/lincoln_2012/article/details/50801080 项目中经常使用C和C++混合编程,那么,在调用对方接口时,总是不可避免地出 ...

  7. navigationcontroller和navigationbar和navigationitem之间的区别以及不用nib实现点击屏幕关闭虚拟键盘20130911

    1.UIViewController UIView的关系. UIView是视图,UIViewController是视图控制器,两者之间是从属关系,当创建一个UIViewController的时候,一般 ...

  8. TM1637驱动程序

    /***************************************************************************** *版权信息:深圳天微电子有限公司 *文 件 ...

  9. 新线程 handler

    class CalculateThread extends Thread { private Handler handler; @Override public void run() { super. ...

  10. Selenium WebDriver-通过页面标题切换窗口

    selenium webdriver可以通过获取页面标题,再跟据标题去切换浏览器窗口,代码如下: #encoding=utf-8 import unittest import time import ...