echarts4 统计图表几种样板

最新推荐文章于 2022-09-20 20:19:12 发布
最新推荐文章于 2022-09-20 20:19:12 发布
阅读量606 收藏
点赞数
分类专栏： 前端 文章标签： echarts4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianeng_love_it/article/details/103477758
版权

先看效果图！

 

直接上代码！

 
<!DOCTYPE html">
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 

 <script type="text/javascript" src=" F:\hlzs\sfpt\HolyCore\WebRoot\js\jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="E:\Download\incubator-echarts-4.5.0\dist\echarts.min.js"></script>
	<style>
#root {
	width: 900px;
}

#navigation {
	height: 41px;;
	width: 60%
}

#navigation div {
	float: left;
	margin-right: 10px;
	background-color: BBBBBB;
	height: 40px;
	width: 100px;
	line-height: 40px;
	font-size: 16px;
	text-align: center;
	border: 1px solid;
	border-radius: 5px 5px 0 0;
	font-weight: 400;
	border-bottom: #FFFFFF;
}

#content {
	width: 60%;
	height: 350px;
}

#content div {
	width: 950px;
	height: 350px;
	background-color: #FFFFFF;
	/* display:none;		 */
}
</style>
</head>
<body>
	<div id="root">
		<div id="navigation">
			<div id="sstb">收税同比</div>
			<div id="sszb">税收占比</div>
			<div id="sffx">税负分析</div>
			<div id="wnqs">五年趋势</div>
		</div>
		<div id="content">
			<div id="c_sstb">1</div>
			<div id="c_sszb">2</div>
			<div id="c_sffx">3</div>
			<div id="c_wnqs">4</div>
		</div>
	</div>
</body>
<script>
	/* var msgObj = ${msg};
	holycore.message(msgObj); */

	$(function() {
		var pre = "c_sstb";
		var c = "#c_sstb";
		$("#navigation>div").each(function() {
			chart(this.id);
			$(this).bind("click", function() {
				debugger;
				if (pre == null) {
					$(this).css("background", "#FFFFFF");
					pre = "#" + this.id;
					c = "#" + "c_" + this.id;
					$(c).toggle();
				} else if (pre != ('#' + this.id)) {
					$(this).css("background", "#FFFFFF");
					$(c).toggle();
					c = "#" + "c_" + this.id;
					$(c).toggle();
					$(pre).css("background", "#BBBBBB");
					pre = "#" + this.id;
				}
			});
		});

	});
	/* 	$("#navigation>div").each(function(){
	 chart("#c_"+this.id);
	 }); */
	//chart("c_sstb");
	function chart(id) {
		id = "c_" + id;
		if (id == "c_sstb") {
			chart1(id);
		} else if (id == "c_sszb") {
			chart3(id);
		} else if (id == "c_sffx") {
			chart2(id);
		} else if (id == "c_wnqs") {
			chart4(id);
		}
		if (id != "c_sstb") {
			$("#" + id).toggle();
		}
	}
	function chart1(id) {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById(id));
		// 指定图表的配置项和数据
		var option = {
			title : {
				text : 'ECharts 入门示例'
			},
			tooltip : {},
			legend : {
				data : [ '销量' ]
			},
			xAxis : {
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			},
			yAxis : {},
			series : [ {
				name : '销量',
				type : 'bar',
				data : [ 5, 20, 36, 10, 10, 20 ]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}

	function chart2(id) {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById(id));
		option = {
			/* legend : {
				data : [ '2018', '2019' ]
			}, */
			tooltip : {
				trigger : 'axis',
				extraCssText : 'width:150px;height:300px;',
				position : function(point, params, dom) {
					var posDis = window.innerWidth - dom.offsetWidth;
					return posDis < point[0] ? [ posDis, '10%' ] : [ point[0],
							'10%' ];
				},
				formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}'
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				top : '8%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				data : [ '贵阳市', '遵义市', '六盘水市', '毕节市' ]
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '2018年',
				type : 'bar',
				barGap : '0',//柱图间距
				data : [ 320, 332, 301, 334 ],
				itemStyle : {
					normal : {
						color:'#1E90FF',
						label : {
							show : false,
							position : 'top',
							formatter : "{a}: {c}",
							textStyle : {
								color : 'blue'
							}
						}
					}
				}
			}, {
				name : '2019年',
				type : 'bar',
				stack : '广告',
				barGap : '0',//柱图间距
				data : [ 120, 132, 101, 134 ],
				itemStyle : {
					normal : {
						color: '#00FF00',
						label : {
							show : false,
							position : 'top',
							formatter : "{a}: {c}",
							textStyle : {
								color : 'blue'
							}
						}
					}
				}
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}

	function chart3(id) {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById(id));
		option = {
				tooltip : {
					trigger : 'item',
					extraCssText : 'width:150px;height:300px;',
					position : function(point, params, dom) {
						var posDis = window.innerWidth - dom.offsetWidth;
						return posDis < point[0] ? [ posDis, '10%' ] : [ point[0],
								'10%' ];
					}
				},
			legend : {
				bottom : 0,
				x : 'center',
				data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				top : '8%',
				containLabel : true
			},
			series : [ {
				name : '访问来源',
				type : 'pie',
				radius : [ '50%', '70%' ],
				avoidLabelOverlap : false,
				label : {
					normal : {
						show : true,
						formatter : '{b}: {d}%'
					}
				},
				data : [ {
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				} ]
			} ]
		};
		myChart.setOption(option);
	}

	function chart4(id) {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById(id));
		option = {
			/* 			title : {
			 text : '折线图堆叠'
			 },
			 */tooltip : {
				trigger : 'axis',
				extraCssText : 'width:150px;height:300px;',
				position : function(point, params, dom) {
					var posDis = window.innerWidth - dom.offsetWidth;
					return posDis < point[0] ? [ posDis, '10%' ] : [ point[0],
							'10%' ];
				}
			},
			legend : {
				data : [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				top : '8%',
				containLabel : true
			},
			/* 		toolbox : {
						feature : {
							saveAsImage : {}
						}
					}, */
			xAxis : {
				type : 'category',
				boundaryGap : false,
				data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
			},
			yAxis : {
				type : 'value'
			},
			series : [ {
				name : '邮件营销',
				type : 'line',
				stack : '总量',
				data : [ 120, 132, 101, 134, 90, 230, 210 ]
			}, {
				name : '联盟广告',
				type : 'line',
				stack : '总量',
				data : [ 220, 182, 191, 234, 290, 330, 310 ]
			}, {
				name : '视频广告',
				type : 'line',
				stack : '总量',
				data : [ 150, 232, 201, 154, 190, 330, 410 ]
			}, {
				name : '直接访问',
				type : 'line',
				stack : '总量',
				data : [ 320, 332, 301, 334, 390, 330, 320 ]
			}, {
				name : '搜索引擎',
				type : 'line',
				stack : '总量',
				data : [ 820, 932, 901, 934, 1290, 1330, 1320 ]
			} ]
		};
		myChart.setOption(option);
	}
</script>
</html>

 

jianeng_Love_IT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用 ECharts 做出漂亮的数据统计图
GTH07399的博客
03-07 3769
在没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是可以实现，只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！ 官方介绍 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 获取 ECharts 1、下载地址 http
【Echarts教科书】Echarts数据统计图表教学（详细）
奈何的人生
05-27 5002
强大的数据统计图表非Echarts莫属，如果你还不会使用，我来教你！
Echarts-4.0.4-官方实例-常用图表
04-02
最新版Echarts-4.0.4的官方实例，包含折线图、柱状图、饼图、雷达图、散点图、树形图等常用2D图表的所有已公布官方实例。
基于Echarts实现可视化数据大屏物流大数据统计平台HTML模板
HTML网页设计
08-17 756
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ......
echarts统计图表
weixin_49107940的博客
09-20 1238
ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
全面详解ECharts4数据可视化，让你的数据穿上漂亮的新衣吧
m0_57249797的博客
05-21 2307
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。让我们一起使数据穿上漂亮的衣服吧。
供应商4M变更申请书样板
03-26
供应商4M变更申请书样板
m4-blog:M4博客的样板
05-03
我现在已经开始在几个不同的博客中使用这种结构，所以我认为自己会做一个样板，以防其他人发现它有用。 它对包含和宏使用m4，对markdown-> HTML转换使用pandoc。 优点： 您可能不需要安装任何东西即可开始 使用m4...
rw4:React 16 Webpack 4样板
05-18
React 16 Webpack 4样板安装 npm i怎么跑 npm start部署 npm build$ ./build.sh [PORT] [install]执照麻省理工学院
react-ReactReduxSagaReactRouter4样板
08-15
React, Redux/ Saga, React-Router 4 样板
Revit 2018 项目样板
05-03
Revit 2018 项目样板，供各位缺少revit2018项目样板的BIMER下载学习研究。
如何使用echarts做出一个动态统计图
不知名博客
12-21 1693
文章目录后端部分后端系统效果图使用到的数据库表结构关于传给后台控制器的过滤参数操作前的一些讲解显示数据页面之控制器部分业务层方法使用到的sql部分后台显示数据效果图开搞动态统计图效果图js部分代码统计图控制器部分 这里需要用到一个插件echarts,可在我博客资源中寻找并免费下载 官网地址(选择想要的统计图形效果):https://echarts.apache.org/zh/index.html 首先要先在后台部分显示出数据(一个控制器) 然后再考虑将这些数据统计图形式图形化处理(一个控制器
数据图表与分析图_数据可视化之常见12种图表类型分析
weixin_39568706的博客
11-29 9695
数据可视化有众多展现方式，不同的数据类型要选择适合的展现方法，今天友创云天就整理分析了几种常见的类型，给大家提供参考。1.饼图饼图是一个划分为几个扇形的圆形统计图表。每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例，且这些扇形合在一起刚好是一个完全的圆形，饼图最显著的功能在于表现“占比”。图片来源https://www.bookstack.cn/read/ucharts/51a779...
第三方Charts绘制图表四种形式:饼状图，雷达图，柱状图，直线图
hbblzjy的博客
07-27 1万+
对于第三方框架Charts(Swift版本，在OC项目中需要添加桥接头文件)，首先要解决在项目中集成的问题，集成步骤： 一、下载Charts框架 下载地址：https://github.com/danielgindi/Charts. 解压后的文件夹里面的内容是这个样子的，如下图： 解压后的文件夹里面的内容 下载完成后，仔细看一下所需环境，很重要！如下图： 所需的配置
Echarts中热力图改成列表表格
weixin_45656956的博客
04-16 616
Echarts 中的热力图修改为列表表格： <!DOCTYPE html> <html style="height: 100%; width: 100%"> <head> <meta charset="UTF-8"> <!-- 去除该行 <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewport" conte
初识echarts（3）：柱状图示例
小R.的博客
09-03 292
一、npm安装 echarts 、echarts-for-react： npm install echarts --save npm install --save echarts-for-react 二、引入模块（这里最好按需引入）： //按需导入 import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块 import 'echarts/lib/chart/bar'; //引入柱状图 折线图是line,饼图改为pie,柱形图改为bar imp
Echarts 图表统计
weixin_34255055的博客
05-10 177
Echarts 图表统计 概述: 　　echarts.js 是百度一款开源项目, EChats, 全称 Enterprise Charts 企业级数据图表 　　一个纯 JavaScript 的图表库, 可以流畅的运行在 PC 和 移动设备上, 兼容大部分浏览器 　　底层依赖轻量级的 Canvas类库 ZRender, 提供直观, 生动, 可交互, 可高度个性化定制的数据 　　可视化图标, 创新的...
ECharts制作报表模板
热门推荐
一直在奋起，一直在路上
10-20 2万+
最近公司的问题汇总平台差不多接近尾声，回顾前段时间领导任命做的报表真是别有一番成长波折；在这之前以为问题汇总平台就差不多完结了，结果原来压轴的在后面呢，报表的设计涵盖了本平台80%的核心内容，既然这么重要就更得放上十足的精神干了O(∩_∩)O~
Echarts绘制图表
weixin_44541467的博客
05-08 1138
在碰到需要分析数据并展现的项目的时候，用图表是一个非常好的方法。而Echarts就是一个专业制图的插件，能够轻松的制作出优质的图表。 这里我用学生成绩来制作三种常用的图表（饼状图、柱状图、折线图）。 例： 上图主要由A：提示框组件、B：图例组件、C：标题组件、D：系列列表四个组成。 1、提示框组件：tooltip: { trigger: ...
stm32f4 样板工程
最新发布
04-28
您可以通过以下步骤创建一个基本的STM32F4样板工程： 1. 打开STM32CubeMX软件，选择对应的STM32F4型号，然后创建一个新项目。 2. 在“Pinout”选项卡中配置您的GPIO引脚。 3. 在“Clock Configuration”选项卡中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值