echarts 條形統計圖樣式修改
阿新 • • 發佈:2019-02-15
other_option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器,座標軸觸發有效 type : 'false' // 預設為直線,可選為:'line' | 'shadow' } }, title:{ left:'center', text:'其他片區排名', textStyle:{ //文字顏色 color:'#c4d9f5', //字型風格,'normal','italic','oblique'fontStyle:'normal', //字型粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... fontWeight:'bold', fontSize:16 } }, grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: {//刻度 show:false, alignWithLabel: true }, axisLine:{show:false}, axisLabel:{ show:true, color:'#7b7b98', }, } ], yAxis : [ { type : 'value', axisTick: { show:false, alignWithLabel: true }, splitLine:{show:false},//網格線是否顯示 axisLine:{show:false},//主軸線是否顯示 axisLabel:{//軸線字型樣式 show:true, color:'#8687a3', }, } ], series : [ { name:'直接訪問', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220], label:{ normal:{ show:true, position:'top',//柱狀圖頭頂顯示資料 color:'#027fcf' } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(//柱狀圖顏色漸變 0, 0,0,1, [ {offset: 0, color: '#58b9ed'}, {offset: 0.5, color: '#203dda'}, {offset: 1, color: '#3e28d7'} ] ) } } } ] };