目錄

一、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
    },
 

有用請點贊，養成良好習慣！

疑問、交流、鼓勵請留言！