目录

一、Echarts图X轴文字显示不全

1、问题

2、解決

3、其他原因

二、ECharts图与title重合

---

一、Echarts图X轴文字显示不全

1、问题

x轴文字比较长 ,而且逆时针45度旋转显示,只显示一部分字体,

这里可以通过调节与容器的距离解决这种问题

 

2、解決

        grid: {
          top: "1%", // 与容器顶部的距离
          bottom: "10%", // 与容器底部的距离
          left: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
          right: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
        },

3、其他原因

option = {
  xAxis: {
    type: 'category',
    data: [], 
    axisLabel: {
      show: true, // 是否显示刻度标签，默认显示
      interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
      rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
      inside: false, // 刻度标签是否朝内，默认朝外
      margin: 6, // 刻度标签与轴线之间的距离
      formatter: '{value} Day' , // 刻度标签的内容格式器
    },
  },
};

二、ECharts图与title重合

echarts的Y轴单位与title重合了，使用grid控制整个图表与周边容器的距离即可

 
option = {
    title: {
        text: '各省份生育排行榜',
    },
    tooltip : {
        trigger: 'axis',
    },
    //图表距离左右上下之间的距离， 不要用像素，要使用百分比
    grid: {
        left: '3%',     
        right: '5%',
        top: '16%',
        bottom: '15%',
        containLabel: true
    },
 

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！