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堆叠柱状图柱子间隔开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • localStorage设置有效期和过期时间的简单方法

    localStorage设置有效期和过期时间的简单方法

    众所周知前端三大缓存,cookie,sessionStorage,localStorage,下面这篇文章主要给大家介绍了关于localStorage设置有效期和过期时间的相关资料,需要的朋友可以参考下
    2022-02-02
  • JavaScript基于扩展String实现替换字符串中index处字符的方法

    JavaScript基于扩展String实现替换字符串中index处字符的方法

    这篇文章主要介绍了JavaScript基于扩展String实现替换字符串中index处字符的方法,涉及javascript使用substr方法针对字符串进行替换操作的相关实现技巧,需要的朋友可以参考下
    2017-06-06
  • 浅谈Javascript编程风格

    浅谈Javascript编程风格

    这篇文章主要介绍了浅谈Javascript编程风格,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • JavaScript中值类型和引用类型的区别

    JavaScript中值类型和引用类型的区别

    本文主要介绍了JavaScript中值类型和引用类型的区别,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序淘宝首页双排图片布局排版代码(推荐)

    微信小程序淘宝首页双排图片布局排版代码(推荐)

    这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • JS实现多选框的操作

    JS实现多选框的操作

    这篇文章主要为大家详细介绍了JS实现多选框的操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • javascript实现倒计时并弹窗提示特效

    javascript实现倒计时并弹窗提示特效

    倒计时的功能在我们做项目的时候会经常遇到,这里给大家分享的是个人编写的一个简易的效果代码,有需要的小伙伴可以参考下
    2015-06-06
  • JavaScript将字符串转换为数组的实现方式

    JavaScript将字符串转换为数组的实现方式

    这篇文章主要介绍了JavaScript将字符串转换为数组的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • 前端JavaScript经典操作之数组常用方法总结

    前端JavaScript经典操作之数组常用方法总结

    数组操作是JavaScript中非常重要也非常常用的技巧,这篇文章主要给大家介绍了关于前端JavaScript经典操作之数组常用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • Javascript页面跳转常见实现方式汇总

    Javascript页面跳转常见实现方式汇总

    这篇文章主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论