echarts 刻度线-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 刻度线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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、滚动图例
echarts 刻度线文章来源地址https://www.toymoban.com/news/detail-409333.html

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

     pageIconColor: '#aaa', // 翻页按钮的颜色
     pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
     pageTextStyle: { // 图例页信息的文字样式
     color: '#cbcbcb'
     },
   },