echarts 刻度线

在这里插入图片描述
解决:

    yAxis: [{
      type: 'value',
      name: '',
      position: 'left',
      boundaryGap: false,
      axisTick: { //  刻度线
      show: false,   
       },
    }],

注意:
1、boundaryGap

默认值:true。 参数类型:boolean,Array。
可选值:
(1)true,x坐标轴两边留白。
(2)false,x坐标轴两边不留白。
(3)[‘30%’, ‘20%’]。

2、axisTick 刻度线样式

 boundaryGap: true,
 axisTick: { // X/y轴线 刻度线
   show: true,
   length: 4,
   lineStyle: {
       color:'red',
       type: 'solid',
       width: 1
   },
   alignWithLabel: true //在设置boundaryGap 为 true的前提下,设置alignWithLabel使刻度线和标签对齐
 },
 yAxis: [{
         type: 'value',
         name: '',
         position: 'left',
         boundaryGap: true, 
         axisTick: { // 刻度线
           show: false,
           length: 4,
           lineStyle: {
               color:'red',
               type: 'solid',
               width: 1
           },
           alignWithLabel: true 
         },
         axisLine: { //坐标轴
           show: false,
           lineStyle: {
             color: colors[0]
           }
         },
         axisLabel: { //轴文字
           interval: 0, //坐标轴文字(或数字)与坐标轴的距离
           rotate: 0, //旋转文字
           formatter: '{value}' // 带单位的话 formatter: '{value} °C' 
         },
         splitLine: { //背景线条
           show: true, 
           lineStyle: {
             color: colors[1], 
             type: "solid" //默认是实线,dashed是虚线
           }
         }
    }]

3、滚动图例
在这里插入图片描述

 legend: {
     x:'left',
     orient: 'horizontal', //布局方式:  horizontal/vertical
     type:"scroll",
     data: [],
     textStyle: {
       color: "#fff", // 设置图例字体颜色为红色
     },
     width:"80%", //图标长度

     pageIconColor: '#aaa', // 翻页按钮的颜色
     pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时(即翻页到头时)的颜色
     pageTextStyle: { // 图例页信息的文字样式
     color: '#cbcbcb'
     },
   },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值