echart 柱形图

最新推荐文章于 2024-04-06 21:02:16 发布

♕时光以北暮南城

最新推荐文章于 2024-04-06 21:02:16 发布

阅读量142

点赞数

分类专栏：前端文章标签： echart

本文链接：https://blog.csdn.net/qq_43742368/article/details/106506444

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>echart</title>
	<style>
		body,html{
			width:100%;
			height:100%;
		}
	</style>
    <script src="./js/jquery-1.10.2.min.js"></script>
	  <script type="text/javascript" src="./js/echarts/echarts-all.js"></script>
  <script type="text/javascript" src="./js/echarts/echarts.js"></script>
</head>

<body>
	<div id="barDiv" style="width:50%;height:30%;"></div>
    <script type="text/javascript">
		$(function(){
			var barDiv = echarts.init(document.getElementById("barDiv"));
			var option = {
				title : {
					text: '某地区蒸发量和降水量', //标题
					subtext: '纯属虚构' //副标题
				},
				
				legend: {//	图例，表述数据和图形的关联
					data:['蒸发量','降水量']
				},
				toolbox: { //辅助工具箱，辅助功能，如添加标线，框选缩放等
					show : true,
					feature : {
						mark : {show: true},//辅助开关线
						dataView : {show: true, readOnly: false},
						//数据视图 //readOnly 刷新
						magicType : {show: true, type: ['line', 'bar']},//切换图形
						restore : {show: true},//还原
						saveAsImage : {show: true}//保存数据图
					}
				},
				calculable : true,//图标计算
				xAxis : [ //x轴
					{
						type : 'category',
						data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
					}
				],
				yAxis : [ //y轴
					{
						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, symbolSize:18},
								{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
							]
						},
						markLine : {
							data : [
								{type : 'average', name : '平均值'}
							]
						}
					}
				]
			};
                    
			 barDiv.setOption(option,true);
		})
    </script>
   
</body>

</html>

在这里插入图片描述

♕时光以北暮南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart 柱形图

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>echart</title> <style> body,html{ width:100%; height:100%; } </style> <sc
复制链接

扫一扫