首页 前端知识 echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置

echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置

2024-02-06 15:02:09 前端知识 前端哥 854 926 我要收藏

🙂博主:小猫娃来啦

🙂文章核心:echarts的xAxis和yAxis——x轴y轴以及网格线的详细配

目录

先详细看一下xAxis和yAxis配置的图表效果

下图详细的标注了图表中x轴y轴可见的内容

通过配置xAxis和yAxis可实现内容

温馨提示:复制代码之前请先下载并引入echarts文件

完整配置代码展示

总结


先详细看一下xAxis和yAxis配置的图表效果


下图详细的标注了图表中x轴y轴可见的内容

 说明一下:

x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以用。


通过配置xAxis和yAxis可实现内容

  • 坐标轴箭头的样式,颜色,风格
  • 网格线颜色,样式
  • 网格区域
  • 坐标轴刻度的颜色,指向
  • 坐标轴刻度文字数据的颜色,旋转角度,颜色,风格,字体,粗细,大小
  • 坐标轴名称颜色, 风格,边距,偏移
  • 坐标轴箭头

and so on

 温馨提示:复制代码之前请先下载并引入echarts文件

<script src="./js/echarts.js"></script>

  完整配置代码展示

  option = {
      xAxis: {
        show: true,                                  //是否显示 x 轴
        position: 'bottom',                            //x轴的位置        (可选位置top  bottom)
        offset: 0,                                     //x轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用
        type: 'category',                           //坐标轴类型        (可选value   category   time   log)
        name: 'x轴',                                //坐标轴名称
        nameLocation: 'end',                          //坐标轴名称显示位置      (可选start   center   end)
        nameTextStyle: {                               //坐标轴名称的文字样式
          color: 'black',                            //坐标轴名称的颜色
          fontSize:30,                                //坐标轴名称的大小         (用数字表示)
          fontWeight:'bold',                        //坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
          fontstyle:'normal',                        //坐标轴文字样式      (可选normal  italic   oblique)
          fontFamily:'华文行楷',                        //坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
          padding: [5, 0, 2, -5]                    //坐标轴文字边距        (上右下左)
        },
        nameGap: 25,                                 //坐标轴名称与轴线之间的距离        (用数字表示)
        nameRotate: 0,                              //坐标轴名字旋转的角度值
        inverse:false,                                //是否为反向坐标轴
        axisLine: {                                    //坐标轴轴线设置
          show: true,                                  //是否显示坐标轴轴线
          symbol: ['none', 'arrow'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
          symbolSize: [8, 8],                         //箭头大小        ([宽度,高度])
          symbolOffset: [0, 7],                      //箭头偏移
          lineStyle: {                                //坐标轴的线
            color: 'green',                            //线的颜色
            width: 3,                                //线的粗细程度    (用数字表示)
            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
            opacity:1                                //线的透明度        (用0~1的小数表示)
          }
        },
        axisTick: {                                    //坐标轴刻度设置
          show: true,                                  //是否显示坐标轴刻度
          inside: true,                              //坐标轴刻度指向        (true表示向上   false表示向下)
          alignWithLabel:true,                        //刻度线是否和标签对齐
          length: 5,                                 //坐标轴刻度长度
          lineStyle: {                                //坐标轴刻度的样式
            color: 'black',                            //坐标轴刻度的颜色
            width: 2,                                //坐标轴刻度的粗细程度    (用数字表示)
            type: 'solid'                            //坐标轴刻度的类型        (可选solid  dotted  dashed)
          }
        },
        axisLabel: {                                //坐标轴刻度文字的设置
          show: true,                                 //是否显示
          inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
          rotate: 30,                                 //坐标轴刻度文字的旋转角度
          margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
          color: 'red',                              //坐标轴刻度文字的颜色
          fontSize:17,                                //坐标轴刻度文字的大小         (用数字表示)
          fontWeight:'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
          fontstyle:'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
          fontFamily:'华文行楷',                        //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
          padding: [5, 0, 2, -5]                    //坐标轴刻度文字的边距        (上右下左)          
        },
        splitLine: {                                //网格线
          show: true,                                  //是否显示
          lineStyle: {                                //网格线样式
            color: '#0735a2',                        //网格线颜色
            width: 1,                                //网格线的加粗程度
            type: 'dashed'                            //网格线类型
          }
        },
        splitArea: {                                //网格区域
          show: true                                  //是否显示
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']            //坐标轴刻度文字数据
      },
      yAxis: {
        show: true,                                  //是否显示 y 轴
        position: 'bottom',                            //y轴的位置        (可选位置top  bottom)
        offset: 0,                                     //y轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用
        type: 'category',                           //坐标轴类型        (可选value   category   time   log)
        name: '单位/个',                                //坐标轴名称
        nameLocation: 'end',                          //坐标轴名称显示位置      (可选start   center   end)
        nameTextStyle: {                               //坐标轴名称的文字样式
          color: 'black',                            //坐标轴名称的颜色
          fontSize:30,                                //坐标轴名称的大小         (用数字表示)
          fontWeight:'bold',                        //坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
          fontstyle:'normal',                        //坐标轴文字样式      (可选normal  italic   oblique)
          fontFamily:'华文行楷',                        //坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
          padding: [5, 0, 2, -5]                    //坐标轴文字边距        (上右下左)
        },
        nameGap: 25,                                 //坐标轴名称与轴线之间的距离        (用数字表示)
        nameRotate: 0,                              //坐标轴名字旋转的角度值
        inverse:false,                                //是否为反向坐标轴
        axisLine: {                                    //坐标轴轴线设置
          show: true,                                  //是否显示坐标轴轴线
          symbol: ['none', 'arrow'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
          symbolSize: [8, 8],                         //箭头大小        ([宽度,高度])
          symbolOffset: [0, 7],                      //箭头偏移
          lineStyle: {                                //坐标轴的线
            color: 'green',                            //线的颜色
            width: 3,                                //线的粗细程度    (用数字表示)
            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
            opacity:1                                //线的透明度        (用0~1的小数表示)
          }
        },
        axisTick: {                                    //坐标轴刻度设置
          show: true,                                  //是否显示坐标轴刻度
          inside: true,                              //坐标轴刻度指向        (true表示向上   false表示向下)
          alignWithLabel:true,                        //刻度线是否和标签对齐
          length: 5,                                 //坐标轴刻度长度
          lineStyle: {                                //坐标轴刻度的样式
            color: 'black',                            //坐标轴刻度的颜色
            width: 2,                                //坐标轴刻度的粗细程度    (用数字表示)
            type: 'solid'                            //坐标轴刻度的类型        (可选solid  dotted  dashed)
          }
        },
        axisLabel: {                                //坐标轴刻度文字的设置
          show: true,                                 //是否显示
          inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
          rotate: 0,                                 //坐标轴刻度文字的旋转角度
          margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
          color: 'red',                              //坐标轴刻度文字的颜色
          fontSize:17,                                //坐标轴刻度文字的大小         (用数字表示)
          fontWeight:'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
          fontstyle:'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
          fontFamily:'宋体',                            //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
          padding: [5, 0, 2, -5]                    //坐标轴刻度文字的边距        (上右下左)          
        },
        splitLine: {                                //网格线
          show: true,                                  //是否显示
          lineStyle: {                                //网格线样式
            color: '#0735a2',                        //网格线颜色
            width: 1,                                //网格线的加粗程度
            type: 'dashed'                            //网格线类型
          }
        },
        splitArea: {                                //网格区域
          show: true                                  //是否显示
        },
        data: ['100', '500', '1000', '1500', '2000', '2500', '3000', '4000', '5000', '6000', '7000', '8000']   //坐标轴刻度文字数据
      },
    }


总结:

从六个方面总结xAxis和yAxis的配置:

  1. 数据类型:

    • 类目轴(category):用于展示离散的类目数据,如名称、日期等。
    • 数值轴(value):用于展示连续的数值数据,可以是整数或小数。
    • 时间轴(time):用于展示时间数据,支持各种时间格式。
    • 对数轴(log):用于展示对数关系的数据。
  2. 坐标轴位置:

    • xAxis:可放置在图表的底部(默认),也可以放置在顶部。
    • yAxis:可放置在图表的左侧(默认),也可以放置在右侧。
  3. 坐标轴定义:

    • type:指定坐标轴的类型,如 'category''value' 等。
    • data:当轴类型为类目轴时,用于指定类目数据。
    • minmax:用于指定数值轴或时间轴的最小值和最大值。
  4. 坐标轴刻度:

    • axisTick:控制轴刻度的显示与隐藏。
    • axisLabel:调整刻度标签的样式、格式及显示方式。
    • splitLine:控制刻度线的显示与隐藏。
  5. 坐标轴轴线和网格线:

    • axisLine:控制轴线的样式,可以设置颜色、宽度等属性。
    • splitArea:控制坐标轴背景分区带(用于柱状图或区域图)的显示与隐藏。
  6. 坐标轴交叉:

    • boundaryGap:仅适用于类目轴,控制是否在数据两侧留白,以显示整体效果。


转载请注明出处或者链接地址:https://www.qianduange.cn//article/1471.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!