echarts堆叠柱状图柱子之间间隔开具体实现代码

 更新时间:2024年11月25日 11:25:03   作者:533_  
ECharts是一个强大的数据可视化库,它的堆叠柱状图通常用于比较各个分类的数据总量,这篇文章主要给大家介绍了echarts堆叠柱状图柱子之间间隔开具体实现的相关资料,需要的朋友可以参考下

https://echarts.zhangmuchen.top/#/detail?cid=85095-9454-8a93-b33d7-999a76a3

itemStyle: { //柱子颜色
	normal: {
		color: '#4e73de',
		borderColor: "#fff",// 用border做
		borderWidth: 10,
	}
},

具体:

    option = {
    	backgroundColor: '#fff',
    	title: {
    		text: "策略变更",
    		top: 10,
    		left: 15,
    		textStyle: {
    			color: "#35598d",
    			fontSize: 16,
    			fontWeight: 'normal'
    		}
    	},
    	tooltip: {
    		trigger: 'axis',
    	},
    	grid: {
    		left: '5%',
    		right: '6%',
    		bottom: '3%',
    		top: '20%',
    		containLabel: true
    	},
    	legend: {
    		icon: 'rect',
    		right: "3%",
    		top: 13,
    		itemWidth: 20,
    		itemHeight: 10,
    		textStyle: {
    			color: '#555'
    		},
    		data: ['新增', '修改', '删除']
    	},
    	xAxis: {
    		type: 'category',
    		data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    		axisLabel: { //坐标轴字体颜色
    			textStyle: {
    				color: '#9eaaba'
    			}
    		},
    		axisLine: {
    			lineStyle: {
    				color: "#e5e5e5"
    			}
    		},
    		axisTick: { //y轴刻度线
    			show: false
    		},
    		splitLine: { //网格
    			show: false,

    		}
    	},
    	yAxis: {
    		type: 'value',
    		axisLabel: { //坐标轴字体颜色
    			textStyle: {
    				color: '#9eaaba'
    			}
    		},
    		axisLine: {
    			show: false,
    		},
    		axisTick: { //y轴刻度线
    			show: false
    		},
    		splitLine: { //网格
    			show: true,
    			lineStyle: {
    				color: '#dadde4',
    				type: "dashed"
    			}
    		}
    	},
    	series: [{
    		name: '新增',
    		type: 'bar',
    		stack: '策略变更',
    		barWidth: '40%', //柱子宽度
    		itemStyle: { //柱子颜色
    			normal: {
    				color: '#4e73de',
    				borderColor: "#fff",
    				borderWidth: 10,
    			}
    		},
    		data: [232, 193, 240, 214, 239, 223, 202]
    	}, {
    		name: '修改',
    		type: 'bar',
    		stack: '策略变更',
    		barWidth: '40%', //柱子宽度
    		itemStyle: { //柱子颜色
    			normal: {
    				color: '#2dafeb',
    				borderColor: "#fff",
    				borderWidth: 10,
    			}
    		},
    		data: [320, 332, 301, 334, 390, 330, 320]
    	}, {
    		name: '删除',
    		type: 'bar',
    		stack: '策略变更',
    		barWidth: '40%', //柱子宽度
    		itemStyle: { //柱子颜色
    			normal: {
    				color: '#35c68d',
    				borderColor: "#fff",
    				borderWidth: 10,
    			}
    		},
    		data: [60, 82, 51, 94, 100, 68, 74]
    	}]
    };

总结 

到此这篇关于echarts堆叠柱状图柱子之间间隔开的文章就介绍到这了,更多相关echarts堆叠柱状图柱子间隔开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • chrome调试javascript详解

    chrome调试javascript详解

    这篇文章主要介绍了chrome调试javascript详解,需要的朋友可以参考下
    2015-10-10
  • JS实现根据详细地址获取经纬度功能示例

    JS实现根据详细地址获取经纬度功能示例

    这篇文章主要介绍了JS实现根据详细地址获取经纬度功能,涉及javascript与百度地图接口交互进行地址经纬度查询的相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • JS 加载性能Tree Shaking优化详解

    JS 加载性能Tree Shaking优化详解

    这篇文章主要为大家介绍了JS 加载性能Tree Shaking优化详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JavaScript 判断浏览器是否支持SVG的代码

    JavaScript 判断浏览器是否支持SVG的代码

    SVG(可缩放矢量图形),接下来将介绍下如何判断浏览器是否支持SVG,感兴趣的朋友可以参考下哈,希望本代码对你有所帮助
    2013-03-03
  • js实现新年倒计时效果

    js实现新年倒计时效果

    这篇文章主要介绍了js实现2015年新年倒计时效果,很快就要迎接新的一年,想知道距离2016还有多少天吗?大家可以参考一下这篇文章
    2015-12-12
  • js判断对象是否是某一类型

    js判断对象是否是某一类型

    下面的代码就是判断脚本之家是不是字符串类型的代码
    2008-11-11
  • 浅谈es6 javascript的map数据结构

    浅谈es6 javascript的map数据结构

    本篇文章主要介绍了浅谈es6 javascript的map数据结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript工具库jscpd检测前端代码重复度

    JavaScript工具库jscpd检测前端代码重复度

    在前端开发中,代码的重复度是一个常见的问题,重复的代码不仅增加了代码的维护成本,还可能导致程序的低效运行,为了解决这个问题,有许多工具和技术被用来检测和消除代码重复,其中一个被广泛使用的工具就是jscpd
    2023-10-10
  • 深入理解ES6的迭代器与生成器

    深入理解ES6的迭代器与生成器

    本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 微信小程序授权登陆及每次检查是否授权实例代码

    微信小程序授权登陆及每次检查是否授权实例代码

    这篇文章主要介绍了关于微信小程序授权登陆及每次检查是否授权,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论