分享六款echarts統計圖的風格修改

echarts圖形的創建比較簡單，直接引用Javascript即可。使用這個函式庫的原因主要有三點，一個是因為這個函式庫是百度的項目，而且一直有更新。第二個是這個函式庫的專案文件比較詳細，每個點都說明的比較清楚，而且是中文的，理解比較容易。第三點是這個函式庫支援的圖形很豐富，可以直接切換圖形，使用起來很方便。

1：折線圖條的顏色修改

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2：標題顏色屬性修改

將圖示主標題顏色修改成紅色，只需要在title:裡面加入textStyle : {color: 'red' }即可
圖片.png

title: {
text: ‘平均耗时（分钟）’,
textStyle: {
color: ‘red’
},
},

3：背景顏色的設定

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}

4：頁面顯示空白的修改

當一切資料正常，控制台也沒有報錯的時候，但資料就是不顯示在頁面上，這個時候，要加上固定的寬度即可。

5：行動端的適配問題，適配不同的手機螢幕

有多個圖表的時候，在var option = {}後面加上這樣的一段程式碼即可，圖標會隨著顯示螢幕尺寸大小改變而改變。

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6：xy軸座標軸顏色的修改

x軸座標：

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

y軸座標：

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

 以上是圖表的屬性值修改，歡迎閱讀借鏡！

以上是分享六款echarts統計圖的風格修改的詳細內容。更多資訊請關注PHP中文網其他相關文章！