echarts 圖例文本太長、或者數量太多溢出的處理

根據項目需要，有時從后端取出來的圖例數據太多，文本又太長，那么在展示上就不是那么完美，這時就需要對圖例進行處理,效果圖見下面1中的截圖：

1、圖例數據太多：

解決方法：echarts中已經封裝了對圖例的分頁處理：在lengend中加入type: "scroll"即可，圖例會自動根據容器的寬或高對圖例進行分頁，但是目前這個分頁還是有點bug，就是下一頁的第一條數據展示的是上一頁的最后一條數據，見下圖：

 

 

2、 圖例文本太長：

解決方法：對文字做裁剪並且開啟 tooltip。

1、首先對文字做裁剪有2個方法其實都是對lengend格式化處理：

A：js的substr截取，對lengend進行formatter格式化

formatter: function (name) {
          return name.length > 17 ? name.substr(0, 17) + '...' : name
         }

B：echarts封裝的echarts.format.truncateText（）函數，對lengend進行formatter格式化

formatter: function (name) {
        return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
    }

2、開啟 tooltip：

在lengend中配置顯示tooltip

tooltip: {
            show: true
          }

 

以上lengend的完整代碼如下：

legend: {
          type: 'scroll',
          orient: 'vertical', //圖例列表的布局朝向（垂直排列）
          left: '50%',
          y: 'center',
          bottom: 10,
          itemGap: 15,//圖例的上下間距
          itemWidth: 8,//圖例左側圖塊的長度
          padding: 5,
          textStyle: {
            fontSize: 14,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 400,
            color: '#D5F1FB',
          },
          pageIconColor: '#6495ed', //翻頁下一頁的三角按鈕顏色
          pageIconInactiveColor: '#aaa', //翻頁（即翻頁到頭時）
          pageIconSize: 11, //翻頁按鈕大小
          // pageFormatter: '',//隱藏翻頁的數字
          // pageButtonItemGap: 20,//翻頁按鈕的兩個之間的間距
          // selected:this.monitorData.name可不寫
          //格式化處理方案一： 
          // formatter: function (name) {
          //   return name.length > 17 ? name.substr(0, 17) + '...' : name
          // },
          //格式化處理方案二： 
          formatter: function (name) {
        　　return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
    　　　　},
        　//開啟tooltip
        　tooltip: {
            show: true
        　}
        }