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;">
<!-- 为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插件的更多相关文章
- 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 在百度上百度了一下,发现了问题所在之处,不得 ...
随机推荐
- 对象的数据属性(Object)
value: 对象属性的默认值,默认值为undefined configurable: 能否使用delete.能否需改属性特性.或能否修改访问器属性.,false为不可重新定义,默认值为true en ...
- Eigen学习之Array类
Eigen 不仅提供了Matrix和Vector结构,还提供了Array结构.区别如下,Matrix和Vector就是线性代数中定义的矩阵和向量,所有的数学运算都和数学上一致.但是存在一个问题是数学上 ...
- ExpressRoute 连接模型
可通过以下三种不同方式,创建本地网络和 Azure 云之间的连接:CloudExchange 归置.点对点以太网连接和任意位置之间的 (IPVPN) 连接.连接服务提供商可以提供一个或多个连接模型.可 ...
- Tomcat性能监控之Probe
目前采用java进行开发的系统居多,这些系统运行在java容器中,通过对容器的监控可以了解到java进程的运行状况,分析java程序问题.目前市面上流行的中间件有很多(Tomcat.jetty.jbo ...
- Shell: extract more from listener.log (分析oracle监听日志)
最近遇到了两起数据库连接数不足的问题, 通常都会预留一些会话增加的情况, 但在一些特殊情况下如连接风暴(logon storm), 如果在监听中没有做rate限流,对数据库来说巨大的冲击可能会导致数据 ...
- Error:Could not find com.android.tools.build:gradle:3.0.0
Error:Could not find com.android.tools.build:gradle:3.0.Searched in the following locations: file ...
- svn回退到具体的版本
svn回退到具体的版本 找到项目的版本号 命令行中输入相关命令 到指定地点找到项目即可
- Java重写&重载
在学习完类和对象后,接下来就要进入面向对象的内容了,先从重写和重载开始吧.重写(Override)和重载(Overload)是两个不同的概念,也是两个容易混淆的概念,下面具体来说说这两者. 重写( ...
- Hello World ! 第一篇随笔
Hello World ! 第一篇随笔 /* * Language: C++ * Code Name: Hello World ! * @author Metak */ #include <io ...
- sqlserver 一个字段分成两个字段 截取,保存
Ma,LeiTo(Ma,lT) 分割后为 姓 名 Ma,LeiTo Ma,lT SELECT LEFT(作者, CHARINDEX('(', 作者) - 1) AS 姓 , repl ...