目錄

一、Echarts圖X軸文字顯示不全

1、問題

2、解決

3、其他原因

二、ECharts圖與title重合

---

一、Echarts圖X軸文字顯示不全

1、問題

x軸文字比較長 ,而且逆時(shí)針45度旋轉(zhuǎn)顯示,只顯示一部分字體,

這里可以通過調(diào)節(jié)與容器的距離解決這種問題

?

2、解決

        grid: {
          top: "1%", // 與容器頂部的距離
          bottom: "10%", // 與容器底部的距離
          left: "5%", // grid布局設(shè)置適當(dāng)調(diào)整避免X軸文字只能部分顯示
          right: "5%", // grid布局設(shè)置適當(dāng)調(diào)整避免X軸文字只能部分顯示
        },

3、其他原因

option = {
  xAxis: {
    type: 'category',
    data: [], 
    axisLabel: {
      show: true, // 是否顯示刻度標(biāo)簽，默認(rèn)顯示
      interval: 0, // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔，在類目軸中有效；默認(rèn)會采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽；可以設(shè)置成0強(qiáng)制顯示所有標(biāo)簽；如果設(shè)置為1，表示『隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽』，如果值為2，表示隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類推。
      rotate: -60, // 刻度標(biāo)簽旋轉(zhuǎn)的角度，在類目軸的類目標(biāo)簽顯示不下的時(shí)候可以通過旋轉(zhuǎn)防止標(biāo)簽之間重疊；旋轉(zhuǎn)的角度從-90度到90度
      inside: false, // 刻度標(biāo)簽是否朝內(nèi)，默認(rèn)朝外
      margin: 6, // 刻度標(biāo)簽與軸線之間的距離
      formatter: '{value} Day' , // 刻度標(biāo)簽的內(nèi)容格式器
    },
  },
};

二、ECharts圖與title重合

echarts的Y軸單位與title重合了，使用grid控制整個(gè)圖表與周邊容器的距離即可

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

有用請點(diǎn)贊，養(yǎng)成良好習(xí)慣！

疑問、交流、鼓勵(lì)請留言！