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轴