<%@ 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. 图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  2. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  3. 不错的jQuery图表插件 .

    很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

  4. 图表插件--jqplot交互演示样例

    简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事 ...

  5. JavaWeb图表插件的小研究

    背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...

  6. 一款可定制的外国jQuery图表插件jqplot

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...

  7. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  8. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  9. JQuery中jsCharts图表插件（十）

    一:1.jsCharts图表插件 注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等:导致无法执行. 请在html代码中的<head&g ...

随机推荐

  1. build path导入的jar失效导致找不到类

    今天碰到一个很奇葩的问题,搞起我以后都不敢 build path到jar了 所以我就全部放到lib目录下了,因为之前使用build path导入的jar失效了,一直找不类,具体原因我也不清楚,我之前的 ...

  2. vue 判断是否登录，未登录跳转到登录页

    网页一进入判断是否登录,未登录跳转到登录页面 router.js export default new Router({ routes: [ { path: '/', name: 'HelloWorl ...

  3. matplotlib（一）——matplotlib横轴坐标密集字符覆盖

    一.问题描述 具体问题是: 用python库matplotlib进行数据的图表展示: 图表展示图形横坐标有将近100个自定义值需要显示: 保存矢量图(svg),保存后发现横坐标过于密集,坐标值之间有覆 ...

  4. 3D全景漫游

    全景图共分为三种: ①球面全景图 利用一张全景图围成一个球,自身位置位于球体内.由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来. 球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接 ...

  5. Linux 面试的一些基础命令

    1.查询服务器负载 (1)uptime [root@oldboy ~]# uptime 20:17:18 up 7:41, 2 users, load average: 0.00, 0.00, 0.0 ...

  6. VMWare workstation Pro 14 For Linux key

    VMWare workstation Pro 14 For Linux key: (我使用的Linux 系统是 Ubuntu16.04, 64位 ) 镜像是官方网址下载的,你也可以自己去官方网址下载: ...

  7. JDK各版本新特性浅谈

    JDK 5.0 自动拆装箱 枚举 可变参数 泛型 For -each 内省 静态导入 JDK 6.0 console开发控制台程序 轻量级HTTP ServerAPI 支持脚本语言 使用Compile ...

  8. Asp.net自定义控件开发任我行（4）-ViewState保存控件状态

    摘要 上一篇我们实现了下拉框的效果,此章的目的主要是保存控件属性状态 内容 我们先来看一个例子,后台代码不变,我们只改UI页面的代码,先在页面上拖放两个控件,一个是我们现在要开发的这个控件,另一个是按 ...

  9. IOS开发---菜鸟学习之路--（十六）-将Image转换为Base64

    我们直接在.m文件的引用头文件部分 和 @interface   AddPictureViewController () 之间  加入 增加部分的代码 然后就可以使用图片转Base64了 #impor ...

  10. 【LoadRunner】loadrunner常见问题汇总

    LoadRunner常见问题1.LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消掉 2.在系统属性-高级-性能-数据执行保护中,添加loadrunner安装目录中的vugen.exe文件 ...