ECharts修改坐標軸,坐標軸字體,坐標軸網格樣式以及控制坐標軸是否顯示


轉自:http://blog.csdn.net/kirinlau/article/details/72876689

 

首先要將一個圖表顯示在前端頁面上:

var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts頁面顯示的空間
  • 1
//------------------------- begin----------------------------- var myOption = { // backgroundColor: "#eee", // echarts圖表的背景顏色,默認為透明 tooltip : { trigger: 'axis', axisPointer : { // 坐標軸指示器,坐標軸觸發有效 type : 'shadow' // 默認為直線,可選為:'line' | 'shadow' } }, legend: { data: ['交警', '武警','協警'], textStyle: { color: '#fff' //legend字體顏色 } }, grid: { left: '3%', right: '7%', top:'15%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', // x軸的字體樣式 axisLabel: { show: true, textStyle: { color: '#fff', fontSize:'16' } }, // 控制網格線是否顯示 splitLine: { show: false, // 改變軸線顏色 lineStyle: { // 使用深淺的間隔色 color: ['red'] } }, // x軸的顏色和寬度 axisLine:{ lineStyle:{ color:'#fff', width:3, //這里是坐標軸的寬度,可以去掉 } } }, yAxis: { type: 'category', data: ['福田','南山','羅湖','鹽田','龍華','寶安','龍崗'], // y軸的字體樣式 axisLabel: { show: true, textStyle: { color: '#fff' } }, // y軸的顏色和寬度 axisLine:{ lineStyle:{ color:'#fff', width:1, //這里是坐標軸的寬度 } } }, series: [ { name: '交警', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight' } }, data: [320, 302, 301, 334, 390, 330, 320] }, { name: '武警', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight' } }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '協警', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight' } }, data: [220, 182, 191, 234, 290, 330, 310] }, ] }; //--------------------------- end-----------------------------

 myChart.setOption(myOption);  // 將圖標顯示在頁面上
  • 1

這里寫圖片描述


詳解該段代碼

xAxis:  {
        type: 'value', //這行代碼表示該軸的類型為value // x軸的字體樣式 axisLabel: { show: true, //這行代碼控制着坐標軸x軸的文字是否顯示 textStyle: { color: '#fff', //x軸上的字體顏色 fontSize:'16' // x軸字體大小 } }, // 控制網格線是否顯示 splitLine: { show: false, // 網格線是否顯示 // 改變樣式 lineStyle: { color: '#ccc' // 修改網格線顏色 } }, // x軸的顏色和寬度 axisLine:{ lineStyle:{ color:'#fff', // x坐標軸的軸線顏色 width:3, //這里是坐標軸的寬度,可以去掉 } } },

也可以在以上代碼的軸線中加入:

     // 隱藏坐標軸 axisLine: { show: false }, // 去除坐標軸上的刻度線 axisTick: { show: false } 

注:
坐標軸中的 type 可以為value或者category, 即確定該軸為值軸或者類目軸,
example: 在一個坐標系中的條形圖中:
x軸為男生,女生等類別選項,那么該軸就為類目軸,
y軸為類別的數量或者其他值類(諸如年齡,身高等等),就為值軸。


Y軸修改設置同X軸


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM