1. 程式人生 > >echarts 條形統計圖樣式修改

echarts 條形統計圖樣式修改

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'} ] ) } } } ] };