使用ECharts实现各种数据统计图（饼图，柱状图，折线图）在javaWeb中的应用

具体的资源及页面代码可下载 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中的应用相关推荐

QT绘制饼图+柱状图+折线图
项目需要使用到不同的统计图案的方法来显示统计数据包括:饼图.柱状图.折线图. 饼图的实现具体实现代码如下: 首先需要一个QChartView来存放饼图,实现如下: 拖拽一个QGraphicsVie ...
origin 删除一列数据后，柱状图折线图如何对应修改
目标: 将图1变成图2 图1 图2 问题 :如果直接删除这一列数据,如图3所示,只会把原来的地方变成空白. 图3 步骤如下: 双击图中图形,出现以下"绘图细节->绘图属性" ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
使用java实现各种数据统计图（柱形图，饼图，折线图）
用Jfree实现条形柱状图表,java代码实现.可经常用于报表的制作,代码自动生成后可以自由查看.可以自由配置图表的各个属性,用来达到自己的要求和目的.本文给大家介绍使用java实现各种数据统计图(柱 ...
echarts 其他样式折线重叠_echarts 同一div同时显示饼图和折线图且两图联动望大佬赐教...
需求是一个div同时显示饼图和折线图我在echarts官网找到了这样得模板但是问题是他的数据都是写死得而我的是异步获取不知道怎么弄请各位大佬赐教下为代码和需求图片 setTimeout( ...
Excel柱状图，饼图，折线图
1. 打开文件用Excel打开"Test1"文件 2. 选择数据按住鼠标左键,选中指定数据区域 3. 数据选中之后,点击EXCEL菜单的"INSERT"选项 ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Axure经典案例高保真交互下载（数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表、统计分析+用户画像分析）
Axure原型作品内容包括:数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表.统计分析+用户画像分析+认证监控预警以下是Axure部分作品图片截图展示,想看交互效果的请 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...

使用ECharts实现各种数据统计图（饼图，柱状图，折线图）在javaWeb中的应用

使用ECharts实现各种数据统计图（饼图，柱状图，折线图）在javaWeb中的应用相关推荐

最新文章

热门文章