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',
                                  3,   //这里是坐标轴的宽度,可以去掉
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['福田','南山','罗湖','盐田','龙华','宝安','龙岗'],
                        // y轴的字体样式
                        axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                               },
                        // y轴的颜色和宽度
                        axisLine:{
                            lineStyle:{
                                color:'#fff',
                                  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坐标轴的轴线颜色
               3,      //这里是坐标轴的宽度,可以去掉
           }
       }
    },

也可以在以上代码的轴线中加入：

     //  隐藏坐标轴
     axisLine: {
         show: false
         },
     // 去除坐标轴上的刻度线
     axisTick: {
          show: false
     }       

注：
坐标轴中的 type 可以为value或者category， 即确定该轴为值轴或者类目轴，
example： 在一个坐标系中的条形图中：
x轴为男生，女生等类别选项，那么该轴就为类目轴，
y轴为类别的数量或者其他值类(诸如年龄，身高等等)，就为值轴。

---

Y轴修改设置同X轴