echart柱状图下钻

最新推荐文章于 2024-06-01 16:37:49 发布

dongsdh

最新推荐文章于 2024-06-01 16:37:49 发布

阅读量2.1k

点赞数 1

分类专栏：第三方-echarts

本文链接：https://blog.csdn.net/dongsdh/article/details/85094873

版权

第三方-echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言：举个列子，显示一周每天营业额

要知道每天都具体卖了哪些东西

所以还可以点击具体的哪一天，下钻查看具体卖出物品

现在只能点击星期一

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		#box{
			width: 400px;
			height: 400px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<button>返回</button>
	<script src="js/common/jquery.min.js"></script>
	<script src="js/common/echarts.js"></script>
	<script>
			show1();
			function show1(){
				var box = echarts.init($("#box")[0]);
				option = {
				color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'营业额',
				            type:'bar',
				            barWidth: '60%',
				            data:[490, 400, 450, 300, 200, 100, 50]
				        }
				    ],
				};
				box.setOption(option, true);
				box.on('click',function(params){
					console.log(params.name);
//					box.clear();清除画布
					if(params.name == "星期一"){
						option.xAxis[0].data= ['桌子', '椅子','塑料凳']
						option.series[0].data= ['300', '100','90']
					}
					box.setOption(option, true);
				})
				
			}
			
			$("body").on("click","button",function(){
				show1();
			})
	</script>
</body>
</html>

效果：

点击星期一的柱状图后：

结束：返回回到初始状态

dongsdh

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
echart柱状图下钻

前言：举个列子，显示一周每天营业额要知道每天都具体卖了哪些东西所以还可以点击具体的哪一天，下钻查看具体卖出物品现在只能点击星期一&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;
复制链接

扫一扫