ECharts的基本配置-Y轴配置(yAxis)

 yAxis: {
    show: true, //是否显示
    position: 'left', //y轴的位置(left/right)
    offset: 0, //y轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用
    type: 'value', //坐标轴类型 (value/category/time/log)
    name: '单位/个', //坐标轴名称
    nameLocation: 'end', //坐标轴名称显示位置(start/center/end)
    //坐标轴名称的文字样式
    nameTextStyle: {
      align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
      verticalAlign: 'bottom', // 文字垂直对齐方式,默认自动('top','middle','bottom')
      lineHeight: '15', // 行高
      // backgroundColor: 'red',
      color: 'green', //字体颜色
      fontSize: 10, //字体大小
      fontWeight: 'normal', //字体粗细 (bold/bolder/lighter/normal)
      fontstyle: 'normal', //文字样式(normal/italic/oblique)
      fontFamily: '楷体', //文字风格(楷体/宋体/华文行楷等等)
      padding: [5, 10, 2, -5] //文字边距(上右下左)
    },
    nameGap: 15, //坐标轴名称与轴线之间的距离
    nameRotate: 0, //坐标轴名字旋转的角度值
    inverse: false, //是否为反向坐标轴
    // 坐标轴轴线
    axisLine: {
      show: true, // 是否显示
      lineStyle: {
        color: 'green', //坐标轴颜色
        width: 2, // 坐标轴线线宽
        type: 'solid', // 坐标轴线线的类型('solid'实线;'dashed'虚线;'dotted'点状)
        opacity: 0.5 //线的透明度(用0~1的小数表示)
      },
      symbol: ['none', 'arrow'], // 轴线两端箭头,两个值(左、右),none表示没有箭头,arrow表示有箭头
      symbolSize: [8, 15] // 轴线两端箭头大小,数值一表示高度,数值二表示宽度
    },
    // 刻度线
    axisTick: {
      show: true, //  是否显示
      inside: false, // 坐标轴刻度是否朝内,默认朝外(false)
      length: 5, // 坐标轴刻度的长度
      alignWithLabel: true, //刻度线与刻度标签是否对齐
      lineStyle: {
        color: '#333', //刻度线颜色
        width: 2, // 刻度线粗细
        type: 'dashed' // 坐标轴线线的类型('solid'实线;'dashed'虚线;'dotted'点状)
      }
    },
    // 坐标轴刻度标签(轴文字)
    axisLabel: {
      show: true,
      interval: 1, // 显示间隔,在类目轴中有效,0显示所有
      inside: false, // 是否朝内,默认朝外(false)
      rotate: 0, // 旋转角度,旋转的角度从 -90 度到 90 度
      margin: 8, // 刻度标签与轴线之间的距离
      color: '#ccc', // 刻度标签文字的颜色
      fontStyle: 'normal', // 文字字体的风格('normal'无样式;'italic'斜体;'oblique'倾斜字体)
      fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
      fontSize: '12' // 文字字体大小
      // align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
      // lineHeight: '12', // 行高
      // formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
      // verticalAlign: 'top', // 文字垂直对齐方式,默认自动('top','middle','bottom'
      // backgroundColor: 'red' // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    // 网格线
    splitLine: {
      show: true, // 是否显示分隔线(默认数值轴显示,类目轴不显示)
      interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效,0显示所有
      // 分隔线颜色,可以设置成单个颜色,也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色
      color: ['#aaa'],
      width: 1, // 分隔线线宽
      type: 'solid' // 坐标轴线线的类型('solid'实线;'dashed'虚线;'dotted'点状)
    },
    // 分隔区域
    splitArea: {
      show: false, // 是否显示分隔区域
      interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效,0显示所有
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
        opacity: 0.5 // 图形透明度(0-1)
      }
    }
  },

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts yAxis 配置项是用来配置图表中的 y 轴的参数的。根据引用中的解释,yAxis 是用于设置 grid 坐标系的 y 轴。可以通过配置项来自定义 y 轴的刻度、最大值、最小值等参数。 根据引用的示例代码,可以看到在配置项中可以设置 y 轴的标题、提示框组件以及图例组件的数据等。 而根据引用中的代码,可以找到一些实际的配置参数,比如设置最小刻度为0,最大刻度为100,以及其他一些属性,如刻度线的颜色和是否显示最小/最大刻度线值等。 所以,echarts yAxis 配置项可以通过设置不同的参数来自定义 y 轴在图表中的表现形式,包括刻度、最大值和最小值等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [echartsy轴(yAxis)的参数配置项释义 & dataZoom滚动条参数释义](https://blog.csdn.net/weixin_44867717/article/details/128229225)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [echarts2020个省市最新版本数据.zip](https://download.csdn.net/download/weixin_41722928/12040161)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值