<%@ 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;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:100%;width：100%;"></div>
<!-- ECharts单文件引入 -->
<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插件的更多相关文章

  1. ECharts插件的使用

    ECharts插件:官网下载echarts.js开发者可以选择源码.下载地址:http://echarts.baidu.com/download.html 下载之后,echarts.js放在js文件夹 ...

  2. angular引用echarts插件

    方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...

  3. 项目中使用ECharts插件实现统计功能

    一.前端界面 // 界面中定义一个div,放图表 <div id="box" style="width: 600px;height:400px;padding: 1 ...

  4. 【React】react项目引入echarts插件 K线图

    参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...

  5. javascript相框echarts插件实现酷立方效果图的人

    最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后.百度发现echarts开源组件非常适合,而加载速度是伟大的.echarts图形主要使用html5这些新功能做,使用can ...

  6. ECharts插件介绍（图表库）

    ECharts是一个非常好用的插件,用于进行 树状图,折线图,饼图,地图等等,系列视图的绘制.(详情看官网) 了解: AMD:模块化开发方式: 引入文件后:console.log(echarts) / ...

  7. Vue2.0+elementUI使用echarts插件

    1.npm安装echarts:     $ npm install echarts -S 2.html代码: <template> <div id="chartColumn ...

  8. 百度echarts插件x轴坐标显示不全决解方法

    X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...

  9. echarts插件-从后台请求的数据在页面显示空白的问题

    最近的项目里面关于统计图方面的问题,有涉及到很多,也在博客里面更新了自己所遇到的问题,开发过程中会遇到很多问题,解决技术问题的方法也有千千万 图片.png 在百度上百度了一下,发现了问题所在之处,不得 ...

随机推荐

  1. ES6-fetch

    fetch 事实标准,并不存在与ES6规范中,基于Promise实现. 目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch. fis3 ...

  2. leetCode题解之Self Dividing Numbers

    1.题目描述 2.题目分析 简单题目,只要挨个判断该数是不是满足条件即可. 3.代码 vector<int> selfDividingNumbers(int left, int right ...

  3. spring boot(14)-pom.xml配置

    继承spring-boot-starter-parent 要成为一个spring boot项目,首先就必须在pom.xml中继承spring-boot-starter-parent,同时指定其版本 & ...

  4. selenium&phantom实战--获取代理数据

    获取快代理网站的数据 注意: #!/usr/bin/env python # _*_ coding: utf-8 _*_ # __author__ ='kong' # 导入模块 from seleni ...

  5. 【Oracle】存储过程写法小例子

    1.存储过程的基本语法: CREATE OR REPLACE PROCEDURE 存储过程名(param1 in type,param2 out type) IS 变量1 类型(值范围); 变量2 类 ...

  6. js过滤HTML标签以及&nbsp;

    function removeHTMLTag(str) { str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag str = str.r ...

  7. Asp.net单点登录解决方案

    原文出处:http://www.cnblogs.com/wu-jian 主站:Passport集中验证服务器,DEMO中为:http://www.passport.com/ 分站:http://www ...

  8. JS获取长度方法总结

    目录: 1length 2size() 3length与size()的区别 4获取元素的索引 - index() 5获取对应的索引 - eq() 概述: 在工作中大家经常需要获取对象的长度,或者要获取 ...

  9. 使用WebViewJavascriptBridge与UIWebView交互

    使用WebViewJavascriptBridge与UIWebView交互 https://github.com/marcuswestin/WebViewJavascriptBridge 核心的地方: ...

  10. Gerrit安装配置

    环境: CentOS 1611 + gerrit-2.11.4 (review.openstack.org) 1. 安装java1.8 (>1.7) [root@review ~]# yum i ...