1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2.     pageEncoding="utf-8"%>
  3.   <%
  4. 	String path = request.getContextPath();
  5. 	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  6. 			+ path + "/";
  7.  
  8. %>
  9. <!DOCTYPE html >
  10. <html>
  11. <head>
  12. <base href="<%=basePath%>">
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  14. <script src="<%=basePath%>/echarts-2.2.7/build/dist/echarts.js"></script>
  15. </head>
  16. <body>
  17.   <div id="main" style="width: 600px;height:400px;"></div>
  18.     <script type="text/javascript">
  19.     require.config({
  20.         paths: {
  21.             echarts: '<%=basePath%>/echarts-2.2.7/build/dist'
  22.         }
  23.     });
  24.         // 基于准备好的dom，初始化echarts实例
  25.  
  26.          // 使用
  27.         require(
  28.                 [
  29.                     'echarts',
  30.                     'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
  31.                 ],
  32.                 function (ec) {
  33.                     // 基于准备好的dom，初始化echarts图表
  34.                     var myChart = ec.init(document.getElementById('main')); 
  35.  
  36.                     option = {
  37.                     	    title : {
  38.                     	        text: '某站点用户访问来源',
  39.                     	        subtext: '纯属虚构',
  40.                     	        x:'center'
  41.                     	    },
  42.                     	    tooltip : {
  43.                     	        trigger: 'item',
  44.                     	        formatter: "{a} <br/>{b} : {c} ({d}%)"
  45.                     	    },
  46.                     	    legend: {
  47.                     	        orient : 'vertical',
  48.                     	        x : 'left',
  49.                     	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  50.                     	    },
  51.                     	    toolbox: {
  52.                     	        show : true,
  53.                     	        feature : {
  54.                     	            mark : {show: true},
  55.                     	            dataView : {show: true, readOnly: false},
  56.                     	            magicType : {
  57.                     	                show: true,
  58.                     	                type: ['pie', 'funnel'],
  59.                     	                option: {
  60.                     	                    funnel: {
  61.                     	                        x: '25%',
  62.                     	                        width: '50%',
  63.                     	                        funnelAlign: 'left',
  64.                     	                        max: 1548
  65.                     	                    }
  66.                     	                }
  67.                     	            },
  68.                     	            restore : {show: true},
  69.                     	            saveAsImage : {show: true}
  70.                     	        }
  71.                     	    },
  72.                     	    calculable : true,
  73.                     	    series : [
  74.                     	        {
  75.                     	            name:'访问来源',
  76.                     	            type:'pie',
  77.                     	            radius : '55%',
  78.                     	            center: ['50%', '60%'],
  79.                     	            data:[
  80.                     	                {value:335, name:'直接访问'},
  81.                     	                {value:310, name:'邮件营销'},
  82.                     	                {value:234, name:'联盟广告'},
  83.                     	                {value:135, name:'视频广告'},
  84.                     	                {value:1548, name:'搜索引擎'}
  85.                     	            ]
  86.                     	        }
  87.                     	    ]
  88.                     	};
  89.  
  90.                     // 为echarts对象加载数据
  91.                     myChart.setOption(option);
  92.                 }
  93.             );
  94.  
  95.     </script>
  96. </body>
  97. </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. Linux系统故障分析与排查--日志分析

    处理Linux系统出现的各种故障时,故障的症状是最先发现的,而导致这以故障的原因才是最终排除故障的关键.熟悉Linux系统的日志管理,了解常见故障的分析与解决办法,将有助于管理员快速定位故障点,“对症 ...

  2. Linux下重要日志及查看方式

    1.Linux下重要日志文件介绍 /var/log/boot.log 该文件记录了系统在引导过程中发生的事件,就是Linux系统开机自检过程显示的信息,如图1所示: 图1 /var/log/boot. ...

  3. content is king – Bill Gates (1/3/1996) 内容为王 - 比尔盖茨

    以下中文版本由谷歌翻译 内容为王 - 比尔盖茨(1/3/1996) 内容是我期望在互联网上赚取大部分真钱的地方,就像在广播中一样. 半个世纪前开始的电视革命催生了许多行业,包括制造电视机,但长期的赢家 ...

  4. Nginx 如何处理一个请求

    基于名字的虚拟主机 Nginx首先选定由哪一个虚拟主机来处理请求.让我们从一个简单的配置(其中全部3个虚拟主机都在端口*:80上监听)开始: server { listen 80; server_na ...

  5. 小技巧之padding-bottom实现等比例图片缩放

    1.padding-bottom 如果用%来表示的话,计算是根据父元素的width的值进行计算的. 例:父元素.wrapper的width是100px,height设置为0, padding-bott ...

  6. Python中的set

    set_lst = [ ('集合容器不可哈希',), ('集合中的元素必须可哈希',), ('集合是无序的',), ('集合自动去重',), ('增',), ('删',), ('查',), ('集合运 ...

  7. Codeforces Round #464 (Div. 2) A Determined Cleanup

    A. Love Triangle time limit per test1 second memory limit per test256 megabytes Problem Description ...

  8. 使用FileSystem类进行文件读写及查看文件信息

    使用FileSystem类进行文件读写及查看文件信息   在这一节我们要深入了解Hadoop的FileSystem类——这是与与hadoop的文件系统交互的重要接口.虽然我们只是着重于HDFS的实现, ...

  9. Spring---浅谈IOC

    概念 IOC(Inversion of Control 控制反转)是spring的核心,贯穿始终.所谓IOC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系. 传统 ...

  10. Python 命令总结

    本章内容 pip pip install -r requirement.py(里面写入需要安装的包的名字) pip install django==1.9            #需要安装那个版本 P ...