使用ECharts实现各种数据统计图(饼图,柱状图,折线图)在javaWeb中的应用
来源:互联网 发布:b站发展史知乎 编辑:程序博客网 时间:2024/05/22 08:29
具体的资源及页面代码可下载 http://download.csdn.net/download/dll322/9912507
准备工作:要下载ECharts的源文件
第一步:在web端既新建一个jsp页面
第二步:引入ECharts的js
第三步:为ECharts准备一个具备大小(宽高)的容器
第四部:为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
第五步:动态加载echarts然后在回调函数中开始使用
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
效果图如下:
饼图与柱状图类似,ECharts有很多样式,按需加载就行,柱状图是bar,饼图是pie,这些图是line
步骤同上:动态加载的数据不一样
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
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:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
效果图如下:
- 使用ECharts实现各种数据统计图(饼图,柱状图,折线图)在javaWeb中的应用
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- java实现各种数据统计图(柱形图,饼图,折线图)
- C# 绘制统计图(折线,柱状图,饼图)
- JFreeChart 实现各种数据统计图(柱形图,饼状图,折线图)
- Echarts统计图插件在php中的应用
- (转)Android自定义统计图(柱状图,折线图,饼状图)
- ECHARTS的基本使用:柱状图、折线图、饼图等
- Echarts柱状图与折线图的基本使用
- 常用sql语句及案例(oracle)
- css基础之块级与行级元素
- 测试遇到的那些奇葩问题
- Eclipse-运行node时候控制台输出的中文乱码解决
- base64格式图片转换成二进制流并生成图片文件
- 使用ECharts实现各种数据统计图(饼图,柱状图,折线图)在javaWeb中的应用
- php-socket通信演示
- Strictly Positive Matrix CodeForces
- VPN的安装配置
- 基本类型的转换如:int,double,long,string,Date,Calendar之间的转换
- 一些linux常用命令和功能
- POJ3422: Kaka's Matrix Travel 题解
- Windows技巧
- (N)Telephony分析(一)之zygote进程启动