Echarts資料可視化開發中的一些技巧和常見問題彙總

在做資料可視化開發過程中，一般使用較多的就是 Echarts 圖表庫了，完全免費，代碼開源，且上手快，文檔和示例都比較全面，接下來就分享一些 Echarts
圖表庫的一些使用技巧和對常見問題進行彙總。

打開示例頁面，将代碼複制到左側的編輯框中可以預覽效果。

1、Y坐标文字過長被遮擋

解決辦法：設定 grid 配置項的 left 為任意數值後，圖表會計算y軸寬度并自适應

grid: {
    left: 0,   // 與容器左側的距離
    right: 0, // 與容器右側的距離
    bottom: "3%",
    top: "0",
    containLabel: true // grid 區域是否包含坐标軸的刻度标簽
}

2、X軸标簽過長，展示不全

解決辦法：旋轉角度，傾斜展示或者省略号表示

xAxis: {
  axisLabel: {
    color: "#5e6877", // x軸字型顔色
    interval: 0, // 0 強制顯示所有标簽,預設auto
    rotate: 20 // 刻度标簽旋轉的角度
  }
}

// 省略号表示
xAxis: {
  axisLabel: {
	    formatter: function (value) {
	        if (value.length > 6) {
	            return value.substring(0, 6) + "...";
	        } else {
	            return value;
	        }
	    }
	}
}

3、legend圖例内容過長，與圖表發生重疊

解決辦法：格式化換行

legend: {
  type: 'scroll', // 可滾動翻頁的圖例，當圖例數量較多時可以使用
  orient: 'vertical',
  textStyle: {
      lineHeight: 20
  },
  formatter: function(sStr) { // 需要配合textStyle.lineHeight設定行高，不然換行後行間距太小
      var str = "";
      var l = 0;
      var schar;
      for (var i = 0; schar = sStr.charAt(i); i++) {
          str += schar;
          // /[^\x00-\xff]/ 比對雙位元組字元，如中文、全角符号，其它單位元組字元如字母、數字、半角符号
          l += schar.match(/[^\x00-\xff]/) ? 2 : 1;
          if (l > 10) {
              // 隻有原字元串内容長度大于需要換行的長度臨界點，才需要換行
              str += (sStr.length > str.length) ? '\n' : '';
              l = 0;
          }
      }
      return str;
  }
}

4、tooltip顯示内容較多時，超出螢幕，顯示不全

解決辦法：添加 confine 屬性

tooltip: {
    confine: true // 是否将 tooltip 框限制在圖表區域内
}

5、折線圖整體資料值偏大，顯示範圍幅度不明顯

解決辦法：添加 scale 屬性，設定 Y軸 不是從開始

yAxis: {
    type: 'value',
    scale: true // 按比例顯示
}

6、移動端柱形圖内容較多，配置螢幕旋轉

解決辦法：在容器标簽上添加一個旋轉的 class 樣式（版本（4.8.0），顯示沒有問題）

.horizontalScreen {
    transform: rotate(90deg);
    transform-origin: bottom left;
    position: absolute;
    top: -100vw;
    height: 100vw;
    width: 100vh;
    background-color:#FFF;
    z-index: 100;
}

7、柱形圖預設寬度自适應，導緻多條資料與單條資料寬度顯示不一緻

解決辦法：增加 barMaxWidth 屬性，設定一個最大寬度值

series: [
  {
  	type: 'bar',
	barMaxWidth: 30 // 可以是絕對值例如 40 或者百分數例如 '60%'，百分數基于自動計算出的每一類目的寬度。
  }
]

8、圖表響應式縮放

解決辦法：監聽浏覽器視窗的 resize 方法，可以添加多個圖表

window.addEventListener('resize', () => { 
    myChart.resize();  
    // myChart2.resize();  
    // myChart3.resize();
})

9、圖表内容過多，一屏或者容器顯示不下

解決辦法：可以增加滑塊縮放滾動，加上 dataZoom 配置

dataZoom: [
  {
    show: true,
    startValue:  startOffset, // 資料視窗範圍的起始數值
    endValue: endOffset // 資料視窗範圍的結束數值
  },
  {
    type: 'inside'
  }
]

10、legend設定單選

解決辦法：增加 selectedMode 屬性，設定為 single

legend: {
    data:[],
    selectedMode: 'single',
}

11、實作折線圖局部虛線

解決辦法： series 中兩組資料 name 相同， data 資料部分，實作或者虛線無值的部分用空來占位。

option = {
  xAxis: {
    type: 'category',
    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '産量',
    data: [820, 932, '', '', 930, 1200, 1000, 1110, '', ''],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 2
        }
      }
    }
  },
  {
    name: '産量',
    data: ['', 932, 800, 900, 930, '', '', 1110, 1200, 900],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 2,
          type: 'dashed'
        }
      }
    }
  }
  ]
};

Echarts資料可視化開發中的一些技巧和常見問題彙總

12、柱狀圖實作重合并且以虛線展示

解決辦法： barGap 表示不同系列的柱間距離，預設為30%，通過設定 barGap 為 -100% 可以讓柱形圖實作重合。

option = {
  xAxis: {
    data: ['a', 'b', 'c', 'd'],
    axisTick: { show: false }
  },
  yAxis: {
    splitLine: { show: false }
  },
  animationDurationUpdate: 1200,
  series: [{
    type: 'bar',
    itemStyle: {
      normal: {
        color: 'transparent',
        barBorderColor: 'tomato',
        barBorderWidth: 2,
        barBorderRadius: 0,
        borderType: "dotted"
      }
    },
    silent: true,
    barWidth: 40,
    barGap: '-100%', // 柱子重疊
    data: [60, 60, 60, 60]
  }, {
    type: 'bar',
    barWidth: 40,
    z: 10,
    data: [45, 60, 13, 25]
  }]
};

不設定

barGap

時是這樣的：

Echarts資料可視化開發中的一些技巧和常見問題彙總

設定

barGap

為

-100%

後：

Echarts資料可視化開發中的一些技巧和常見問題彙總

13、實作多Y軸展示

解決辦法：給 yAxis 對象設定多組數組，分别代表不同 Y軸 ；在 series 中配置時，每項需配置 yAxisIndex ，不設定改參數，預設為0。

// 通過多Y軸，來實作多個次元對比來看資料的變化
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['蒸發量', '降水量', '平均溫度']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '蒸發量',
      min: 0,
      max: 250,
      position: 'right',
      axisLine: {
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '降水量',
      min: 0,
      max: 250,
      position: 'right',
      offset: 80,
      axisLine: {
        lineStyle: {
          color: colors[1]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '溫度',
      min: 0,
      max: 25,
      position: 'left',
      axisLine: {
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '蒸發量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: '降水量',
      type: 'bar',
      yAxisIndex: 1,
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: '平均溫度',
      type: 'line',
      yAxisIndex: 2,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

Echarts資料可視化開發中的一些技巧和常見問題彙總

14、圖表在舊容器上重新渲染不出來問題

解決辦法：首先，官方文檔也有說明，建立一個 ECharts執行個體 ，傳回 echartsInstance ，不能在單個容器上初始化多個 ECharts執行個體 。 Echarts 每次執行個體化都會在容器标簽上産生一個唯一的 echartsInstance ID ，那可以重新渲染之前把容器标簽的 _echarts_instance_ 屬性移除，重新 echarts.init 後就會自動生成一個新的 echartsInstance ID ，此後圖表就可以正常渲染了。

var chartEle = document.getElementById('chartId');
chartEle.removeAttribute('_echarts_instance_'); // 移除容器标簽的 '_echarts_instance_' 執行個體屬性，使用echarts.init重新生成一個新的執行個體ID
var myChart = echarts.init(chartEle);
myChart.setOption(option);

15、圖表上添加點選跳轉

解決辦法： Echarts執行個體 上可以添加監聽滑鼠事件，滑鼠事件包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’。

myChart.on('click', function(params) {
    window.open(params.data.url);
});

16、圖表上添加水印

解決辦法： Echarts執行個體 上可以添加監聽滑鼠de 事件，滑鼠事件包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’。

// 在前端設定樣式然後添加到背景中             
var waterMarkText = 'ECHARTS';  //水印名稱
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');  //水印畫布
canvas.width = canvas.height = 100;  //水印高寬
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.2; //水印透明度
ctx.font = '20px Microsoft Yahei';  //水印字型 
ctx.translate(50, 50);   //水印完整性
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);//水印顯示情況

//在option中添加水印背景
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'no-repeat'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

Echarts資料可視化開發中的一些技巧和常見問題彙總

17、圖表上添加工具欄

内置有導出圖檔，資料視圖，動态類型切換，資料區域縮放，重置五個工具。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true}, 
            dataZoom : {show: true}, // 區域縮放
            dataView : {show: true, readOnly: false}, // 資料預覽
            magicType : {show: true, type: ['line', 'bar']}, // 切換類型
            restore : {show: true}, // 重新整理
            saveAsImage : {show: true} // 儲存
        }
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

會繼續更新中，敬請期待。

Echarts資料可視化開發中的一些技巧和常見問題彙總

1、Y坐标文字過長被遮擋

2、X軸标簽過長，展示不全

3、legend圖例内容過長，與圖表發生重疊

4、tooltip顯示内容較多時，超出螢幕，顯示不全

5、折線圖整體資料值偏大，顯示範圍幅度不明顯

6、移動端柱形圖内容較多，配置螢幕旋轉

7、柱形圖預設寬度自适應，導緻多條資料與單條資料寬度顯示不一緻

8、圖表響應式縮放

9、圖表内容過多，一屏或者容器顯示不下

10、legend設定單選

11、實作折線圖局部虛線

12、柱狀圖實作重合并且以虛線展示

13、實作多Y軸展示

14、圖表在舊容器上重新渲染不出來問題

15、圖表上添加點選跳轉

16、圖表上添加水印

17、圖表上添加工具欄

繼續閱讀

浏覽器js運作解析

layui時間選擇框，選擇時間段

實作電腦功能

js進階學習筆記（b站尚矽谷）-3-對象

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

js 日期格式化以及擷取某天的零點和23:59

Echarts滑鼠懸浮樣式

Angularjs的$http方法的success和then的差別

jquery,ajax,jsonp例子+springmvc背景

attachEvent 與addEventListener 差別

用JS模拟實作二叉樹(含周遊)

關于 underscore 中模闆引擎的應用示例

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

jquery_126_demo