ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示

来源：互联网发布：私有域名解析软件编辑：程序博客网时间：2024/06/04 23:20

首先要将一个图表显示在前端页面上：

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轴

阅读全文

0 0