1. 程式人生 > >echarts柱狀圖修改背景線為網格線、去掉刻度標簽、鼠標懸停在柱條上時變色、柱條圓角弧度、

echarts柱狀圖修改背景線為網格線、去掉刻度標簽、鼠標懸停在柱條上時變色、柱條圓角弧度、

false show 變色 with echarts animation dash das split

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,//柱條圓角弧度 } }, } ] };

echarts柱狀圖修改背景線為網格線、去掉刻度標簽、鼠標懸停在柱條上時變色、柱條圓角弧度、