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

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

 

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

var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts頁面顯示的空間

//------------------------- 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);  // 將圖標顯示在頁面上

---

詳解該段代碼

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軸