最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ECharts中如何让x轴上的标签全部显示

ECharts crifan 6172浏览 0评论

折腾:

【已解决】ReactJS中如何给ECharts中添加柱状图点击事件

期间,已有代码:

    let curEchartsOption = {
      color: [‘#3398DB’],
      tooltip : {
        trigger: ‘axis’,
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
          type : ‘shadow’        // 默认为直线,可选为:’line’ | ‘shadow’
        }
      },
      grid: {
        left: ‘3%’,
        right: ‘4%’,
        bottom: ‘3%’,
        containLabel: true
      },
      xAxis : [
        {
          type : ‘category’,
          data : [‘Yeti野帝’, ‘SK’, ‘全新晶锐’, ‘明锐旅行车’, ‘2017款昕锐’, ‘2017款明锐’, ‘明锐经典款’, ‘2017款昕动’, ‘Yeti’],
          axisTick: {
            alignWithLabel: true,
          },
        }
      ],
      yAxis : [
        {
          type : ‘value’
        }
      ],
      series : [
        {
          name:’直接访问’,
          type:’bar’,
          barWidth: ‘60%’,
          data:[9, 26, 10, 1, 2, 37, 27, 1, 1]
        }
      ]
    };

效果是:

所以问题是:

希望x轴文字都可以显示

参考:

ECharts Documentation

去设置:

      xAxis : [
        {
          axisLabel: {
            rotate: 90
          }

结果,虽然文字旋转了,但是之前没显示的文字,还是没有显示:

【总结】

后来还是参考了别人的做法,

其中主要是:

            axisLabel: {
              interval: 0,
              rotate: 60
            },

起的效果。

完整的配置:

    var curEchartsOption = {
            // title : {
          //       text:’本月新增有望客户分类(按车型分)’,  
          //       textStyle :{
          //           fontWeight:’normal’,
          //           fontSize:’14’
          //       },
      //       // subtext:datName,
      //       subtext: ‘DCC’,
          //       subtextStyle:{
          //           fontWeight:’normal’,
          //           fontSize:’14’,
          //           color:’red’
          //       },
          //       top:10,
          //       left: 10
          //   },
            tooltip: {
                trigger: ‘axis’
            },
            toolbox: {
                feature: {
                    dataView: {show: false, readOnly: true},
                    magicType: {show: false, type: [‘bar’]},
                    restore: {show: false},
                    saveAsImage: {show: false}
                }
            },
            legend: {
                // left: ‘75%’,
          // top:33,
          top: 0,
          data:[‘新增有望客户’]
            },
            grid:{
                bottom:80
            },
            xAxis: [
                {
                    type: ‘category’,
                    axisLabel: {
                        interval:0,
                        rotate:60
                    },
                // data:hopeNameArr
                data: [‘Yeti野帝’, ‘SK’, ‘全新晶锐’, ‘明锐旅行车’, ‘2017款昕锐’, ‘2017款明锐’, ‘明锐经典款’, ‘2017款昕动’, ‘Yeti’],
                }
            ],
            yAxis: [
                {
                    type: ‘value’,
                    min: 0,
                    //max: 200,
                   // interval: 30,
                    axisLabel: {
                        formatter: ‘{value}’
                    }
                }
            ],
            series: [
                {
                    name:’新增有望客户’,
                    type:’bar’,
                    barWidth : 20,//柱图宽度
                    label: {
                        normal: {
                            show: true,
                            color:’red’,
                            position: ‘top’,
                            textStyle: {
                                color: ‘black’,
                                fontFamily: ‘verdana’,
                                fontSize: 12,
                                fontStyle: ‘normal’
                            }
                        }
                    },
                    itemStyle: {
                  // normal:{color:’#C0DDAD’ }
                  // normal:{color:’#3398DB’ }
                  normal:{color: ValueColor.DARK_BLUE }
                    },
                // data:hopeNameArrNum
                data: [9, 26, 10, 1, 2, 37, 27, 1, 1]
                }
            ]
        };

达到了要的效果:

转载请注明:在路上 » 【已解决】ECharts中如何让x轴上的标签全部显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.184 seconds, using 22.14MB memory