<%@ 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. deque 用法

    引用博客:https://blog.csdn.net/zyq522376829/article/details/46801973 下面是那位大佬写的的笔记整理~~~~ deque - 双向队列 1.构 ...

  2. 【启发式拆分】bzoj4059: [Cerc2012]Non-boring sequences

    这个做法名字是从武爷爷那里看到的…… Description 我们害怕把这道题题面搞得太无聊了,所以我们决定让这题超短.一个序列被称为是不无聊的,仅当它的每个连续子序列存在一个独一无二的数字,即每个子 ...

  3. 03等待多个线程返回WaitForMultipleObject

    二. WaitForMultipleObject 等待单个线程返回 1. 函数原型 DWORD WINAPI WaitForMultipleObjects( _In_ DWORD nCount, _I ...

  4. Linux菜鸟起飞之路【七】文件合并、归档和压缩

    一.文件合并操作 1.覆盖符号与追加符号 a)“>”代表将左边文件的内容覆盖右边文件的内容,如果右边文件不存在则创建这个文件 b)“>>”代表将左边文件的内容追加到右边文件中,如果右 ...

  5. selenium+phantomjs爬取bilibili

    selenium+phantomjs爬取bilibili 首先我们要下载phantomjs 你可以到 http://phantomjs.org/download.html 这里去下载 下载完之后解压到 ...

  6. POJ：2109-Power of Cryptography（关于double的误差）

    Power of Cryptography Time Limit: 1000MS Memory Limit: 30000K Description Current work in cryptograp ...

  7. JQuery速记

    速记笔记的作用是将一些零碎的点整合在一起,这些点太小并不适合写一篇随笔,将这些点揉合在一起,可能有时候,互相就擦出火花,形成一篇博客. 1,可以用一个变量来表示某一个元素,这样就不用每次都输入$(&q ...

  8. Linux学习-开放源码的软件安装与升级简介

    什么是开放源码.编译程序与可执行文件 我们说过,在 Linux 系统上面,一个文件能不能被执行看的是有没有可执行的那个权限 (具有 x permission),不过,Linux 系统上真 正认识的可执 ...

  9. multiprocessing join与lock区别

    加锁 join方法 join方法会造成阻塞,在上一个进程完成之前不会运行join()后面的代码 lock  仍会执行之后的代码,遇到创建进程,会发向操作系统发出指令,但不会执行,等到上锁的进程结束之后 ...

  10. 文件上传下载，命令之wget / curl / which / sort / uniq / cut / wc /tr /sed

    目录 命令 1.文件的上传下载 2.从外网下载文件wget 3.curl文件下载 4.查找命令which 5.字符处理命令-排序sort 6.字符处理-去重uniq 7.字符处理-截取cut 8.字符 ...