首頁  >  文章  >  web前端  >  分享六款echarts統計圖的風格修改

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

yulia
yulia原創
2018-09-07 16:18:014077瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn