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