轉自: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軸