zoukankan      html  css  js  c++  java
  • Echart设置x轴文字数据不隐藏

    平常的引入:

    会出现x轴文字数据部分隐藏,如下:

    但我们一般是不希望隐藏的,如图:

     解决方法:设置axisLabel属性

    // xAxis的属性,设置x轴文本不隐藏,同理yAxis也有
              axisLabel: {
                interval: 0,      // 坐标轴刻度标签的显示间隔
                rotate: 40        // 标签倾斜的角度
              }
    option = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
              }
            },
            legend: {
              data: ['访客数']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['1页', '2页', '3页', '4页', '5页', '6-10页', '11-20页', '20+页'],
              // xAxis的属性,设置x轴文本不隐藏,同理yAxis也有
              axisLabel: {
                interval: 0,      // 坐标轴刻度标签的显示间隔
                rotate: 40        // 标签倾斜的角度
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '访客数',
              data: [0.7, 0.2, 0.8, 0.3, 0.4, 1, 0.5, 0.5],
              type: 'bar',
              barWidth: '80%',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'       // 剩余部分背景图
              }
            }]
          }

    推荐:echarts x轴标签文字过多导致显示不全

  • 相关阅读:
    190401装饰器-高阶函数-闭包
    190329迭代器-生成器-三元运算-列表解析
    OpenStack-Mitaka
    RabbitMQ
    190328文件处理
    190322函数
    190322字符串
    190321集合
    190320运算符&数据类型
    Zookeeper
  • 原文地址:https://www.cnblogs.com/yoona-lin/p/13426542.html
Copyright © 2011-2022 走看看