Echarts插件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>2011-2014取得备案公示/持证影视制作机构数量变化</title>
</head>
<body style="background-color: #000000;">

<div id="main" style="height:100%;width：100%;"></div>

<script src="<%=basePath%>/echarts/echarts-2.2.4/doc/asset/js/jquery.min.js"></script>
<script src="<%=basePath%>/echarts/echarts-2.2.4/build/dist/echarts.js"></script>
<script src="<%=basePath%>/echarts/echarts-2.2.4/build/dist/chart/dark.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '<%=basePath%>/echarts/echarts-2.2.4/build/dist'
}
});

// 使用
require(
[
'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'),dark);

var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'horizontal',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : ['10%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '10',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>

Echarts插件的更多相关文章

ECharts插件的使用
ECharts插件:官网下载echarts.js开发者可以选择源码.下载地址:http://echarts.baidu.com/download.html 下载之后,echarts.js放在js文件夹 ...
angular引用echarts插件
方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...
项目中使用ECharts插件实现统计功能
一.前端界面 // 界面中定义一个div,放图表 <div id="box" style="width: 600px;height:400px;padding: 1 ...
【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步: ...
javascript相框echarts插件实现酷立方效果图的人
最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后.百度发现echarts开源组件非常适合,而加载速度是伟大的.echarts图形主要使用html5这些新功能做,使用can ...
ECharts插件介绍（图表库）
ECharts是一个非常好用的插件,用于进行树状图,折线图,饼图,地图等等,系列视图的绘制.(详情看官网) 了解: AMD:模块化开发方式: 引入文件后:console.log(echarts) / ...
Vue2.0+elementUI使用echarts插件
1.npm安装echarts: $ npm install echarts -S 2.html代码: <template> <div id="chartColumn ...
百度echarts插件x轴坐标显示不全决解方法
X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...
echarts插件-从后台请求的数据在页面显示空白的问题
最近的项目里面关于统计图方面的问题,有涉及到很多,也在博客里面更新了自己所遇到的问题,开发过程中会遇到很多问题,解决技术问题的方法也有千千万图片.png 在百度上百度了一下,发现了问题所在之处,不得 ...

随机推荐

ES6-let & const
let和const命令 let 它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for(let i = 0; i < arr.length; i++){} 用let命 ...
Ext根据条件显示隐藏列
Ext根据条件显示隐藏列写在ExtonReady函数里面,并在表格成功渲染之后,可以添加判断是否隐藏或者显示某一列 /* 判断是否显示版本号一列 */ var showVersionFlag = ' ...
Datastage重启服务
使用DS开发job时,偶尔一个Job出现卡死现象,导致工作不能进展下去,有时候需要重启datastage服务才可以. DataStage在正常运行时候有以下两个主要的进程: (1)dsrpcd(DS的 ...
nginx 的socket 选项处理--TCP_DEFER_ACCEPT
在nginx listen配置项的说明中有一个选项: deferred -- indicates to use that postponed accept(2) on Linux with. the ...
winform messagebox自动关闭
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
flask 的管理模块的功能add_template_global、send_from_directory
add_template_global方法全局模板函数 add_template_global 装饰器直接将函数注册为模板全局函数. add_template_global 这个方式是自定义的全局函 ...
测试TextKit渲染大文本的效率
测试TextKit渲染大文本的效率 TextKit可以用来做精美的电子书,而电子书通常都是txt格式的,那么渲染txt格式的文本的效率如何呢? 以下来进行测试. #import "RootV ...
windows：nginx配置http、https反向代理
一.下载 Windows 版本的 nginx nnginx下载:http://nginx.org/en/download.html 推荐稳定版本.下载完成后,解压得到 nginx-1.14.0 ,我把 ...
matlab中关于函数句柄、feval函数以及inline函数的解析（转）
http://blog.sina.com.cn/s/blog_7bff755b010180l3.html MATLAB函数句柄函数句柄(Function handle)是MATLAB的一种数据类型. ...
(1)I/O流 (2)线程
1.I/O流1.1 ObjectOutputStream类(重点)(1)基本概念 java.io.ObjectOutputStream类主要用于将Java对象整体写入到输出流中. 只能将支持 java ...

Echarts插件

Echarts插件的更多相关文章

随机推荐

热门专题