echarts柱状图修改背景线为网格线去掉刻度标签鼠标悬停在柱条上时变色柱条圆角弧度

Posted 2020-10-04 何丸子

option = { color: [‘red‘],//修改柱条颜色

tooltip : { triggerOn:‘mousemove‘ },

grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true },

xAxis : [ { type : ‘category‘, data : [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘],

axisTick: { show:false // alignWithLabel: true } } ],

yAxis : [ { type : ‘value‘, axisTick:{ show:false //不显示y轴刻度 },

splitLine:{ show:true, lineStyle:{ type:‘dashed‘//设置背景为虚线 } } } ],

series : [ { name:‘直接访问‘, type:‘bar‘, barWidth: ‘60%‘, data:[10, 52, 200, 334, 390, 330, 220],

silent:false, animation:false, markArea:{ silent:false, animation:false }, markPoint:{ silent:false },

label: { normal: { show: true,//显示柱条值 position: ‘top‘, textStyle:{ color:‘black‘//柱条顶部文字颜色 } } },

itemStyle:{ emphasis:{ color:[‘white‘]//鼠标悬停在柱条上时变色 },

normal:{ borderWidth:8, barBorderRadius:10,//柱条圆角弧度 } }, } ] };