echarts柱状图横(x)轴文字显示不全,一招解决

Posted 2023-04-18 翘中之楚

柱状图底部X轴文字过长时，将会出现文字显示不全的问题，这是echarts为了美观默认的设置

现在我们把文章倾斜旋转点角度即可全部显示

  以下是代码

 

scale() 
      var chartDom = document.getElementById("twenty");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = 
        xAxis: 
          type: "category",
          data: [
            `$this.data1[0].countries_regions`,
            `$this.data1[1].countries_regions`,
          ],
          axisLabel: 
            interval: 0,//横轴信息全部显示
            rotate: -45, //倾斜度 -90 至 90 默认为0
            margin: 5, //刻度标签与轴线之间的距离
            textStyle: 
              fontSize: 9, //横轴字体大小
              color: "#000000",//颜色
            ,
          ,
        ,
        yAxis: 
          type: "value",
        ,
        color: ["#5470c6"],
        series: [
          
            data: [
              `$this.data1[0].value`,
              `$this.data1[1].value`,
            ],
            type: "bar",
          ,
        ],
      ;
      option && myChart.setOption(option);
    ,

 

echarts+x轴刻度间距是怎么回事

echarts＋X轴刻度间距的意思echarts中柱状图左右的间距。

一、 echarts中横坐标值显示不全(自动隐藏)解决方案：

1、echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。

2、默认会采用标签不重叠的策略间隔显示标签，则需要在xAxis 属性加上axisLabel:interval: 0。可以设置成 0 强制显示所有标签。

3、xAxis.axisLabel 属性：

axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置（当然yAxis也是一样有这个属性的）。

参考技术A echarts X轴数据太多间隔显示，tooltip让全部显示的方法：
1、不要使用默认的tooltip了，可以对应写一个label记录值，
2、然后控制它的display：block/none 可以试一下，
3、用一个公有的静态变量存储着这个值，
4、然后触发不显示事件时，把tooltip的值清空。
5、最后鼠标移动到listview时，把这个静态变量赋值给这个tooltip.就可以了。