<%@ 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. 软工读书笔记 week 9 ——《构建之法》

    软工读书笔记  week 9                 ——<构建之法> 最近的三周我们正式开始我们的项目.然后我也把<构建之法>中的相关章节再拿出来读了一番.以下是一些 ...

  2. C#中的三种timer

    转 https://blog.csdn.net/hoiven/article/details/51362582 如果你需要使用规律的时间间隔重复执行一些方法,最简单的方式是使用定时器(timer). ...

  3. SqlServer触发器实现表的级联插入、级联更新

    首先建立两张表,分别为test1与test2,期望在更改test1的时候,test2的相关记录能够同时做出更改.假定test1与test2的表结构相同,如下表所示 name age     触发器实现 ...

  4. iOS设计模式 - 生成器

    iOS设计模式 - 生成器 原理图 说明 1. 将构建复杂对象的过程拆分成一个一个的模块,通过统一的指导者来指导对象的构建过程称之为生成器模式 2. 生成器模式适合用于构建组合的对象 源码 https ...

  5. terminal 总结

    (1) Mac添加命令别名 切换到用户主目录 (2). 编辑或新建.bash_profile文件 (3). 添加别名 alias ll='ls -Alh' (4). 重载该配置文件 source .b ...

  6. Hadoop HBase概念学习系列之数据模型（七）

    HBase是一个类似BigTable的分布式数据库, 它是一个稀疏的长期存储的(存在硬盘上).多维度的.排序的映射表.这张表(HBase)的索引是行关键字.列关键字和时间戳.    HBase中的数据 ...

  7. Centos7+Mysql80安装+远程链接开启

    CentOS7安装mysql80 下载repo源 在xshell运行命令 # wget http://repo.mysql.com/mysql80-community-release-el7.rpm ...

  8. #001 CSS快速入门讲解

    CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...

  9. RabbitMQ学习以及与Spring的集成(一)

    本文记录RabbitMQ服务的搭建过程. 想要使用RabbitMQ消息中间件服务.首先要安装RabbitMQ,可以在:https://www.rabbitmq.com/download.html根据安 ...

  10. JavaScript基础进阶之常用字符串方法总结

    前面三篇文章简单的把JavaScript基础内容过了一遍,我们已经可以用JavaScript写一些简单的代码了. 今天主要总结一下JavaScript中String对象中自带的一些方法,来帮助我们处理 ...