图表插件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的使用案例的更多相关文章
- 图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- 不错的jQuery图表插件 .
很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...
- 图表插件--jqplot交互演示样例
简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事 ...
- JavaWeb图表插件的小研究
背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...
- 一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
- 基于html5 canvas 的强大图表插件【Chart.js】
名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- JQuery中jsCharts图表插件（十）
一:1.jsCharts图表插件 注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等:导致无法执行. 请在html代码中的<head&g ...
随机推荐
- 华为liteos了解（一）
我来补充一下,从@華仔答案的提供的wiki中看,随便翻了一下,内核部分和协议栈的接口部分代码风格完全不一致.协议栈和相关的代码应该是直接使用或者修改了uIP (micro IP)的实现,所以整体感觉应 ...
- CSAPP 缓冲区溢出试验
缓冲区溢出试验是CSAPP课后试验之一,目的是: 更好的理解什么是缓冲区溢出 如何攻击带有缓冲区溢出漏洞的程序 如何编写出更加安全的代码 了解并理解编译器和操作系统为了让程序更加安全而提供的几种特性 ...
- Debug调试文件
在debug.h中设置g_debug_switch即可控制调试级别. /* debug.c */ #include "debug.h" const char *get_log_le ...
- 图学java基础篇之IO
java io体系 如图可以看出,java的io按照包来划分的话可以分为三大块:io.nio.aio,但是从使用角度来看,这三块其实揉杂在一起的,下边我们先来概述下这三块: io:主要包含字符流和字节 ...
- Windows下如何用CMD命令跳转到指定的目录下
以Window7为例说明,想要跳转到I:\adt-bundle-windows-x86-20130219\sdk\platform-tools目录下. 1.在运行中打开CMD命令窗口如下图所示: 2. ...
- c++实验4
1. 车辆基本信息管理 #include <iostream> using namespace std; #include <string> #include "c ...
- Google Authenticator(谷歌身份验证器)C#版
摘要:Google Authenticator(谷歌身份验证器),是谷歌公司推出的一款动态令牌工具,解决账户使用时遭到的一些不安全的操作进行的"二次验证",认证器基于RFC文档中的 ...
- SparkStreaming和Kafka的整合
当我们正确地部署好Spark Streaming,我们就可以使用Spark Streaming提供的零数据丢失机制.需要满足以下几个先决条件: 1.输入的数据来自可靠的数据源和可靠的接收器: 2.应用 ...
- 线性回归、逻辑回归（LR）
线性回归 回归是一种极易理解的模型,就相当于y=f(x),表明自变量 x 和因变量 y 的关系.最常见问题有如 医生治病时的望.闻.问.切之后判定病人是否生了什么病,其中的望闻问切就是获得自变量x,即 ...
- 测试环境docker化（一）—基于ndp部署模式的docker基础镜像制作
本文来自网易云社区 作者:孙婷婷 背景 我所在测试项目组目前的测试环境只有一套,在项目版本迭代过程中,开发或产品偶尔会在测试环境进行数据校验,QA人数在不断增加,各个人员在负责不同模块工作时也会产生脏 ...