Echarts多Y軸探索
- 2019 年 10 月 6 日
- 筆記
ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。
用過好多圖表庫，還是對Echarts最有好感。：）本文使用Echarts來給出多Y軸的實例。
在給出多Y軸實例前，咱們首先來看一下Echarts實現圖形化的基本步驟；單Y軸實例；雙Y軸實例。本文採用的ECharts版本為3.2.2，大家可以到ECharts的下載頁面下載。
一、ECharts圖形化步驟
1.1 引入ECharts
將下載的echarts.min.js文件，使用<script>標籤引入。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
1.2 指定圖形展示區域
<body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>
1.3 初始化echarts實例
// 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'));
1.4 指定配置項和數據
// 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
1.5 設置Option顯示圖表
// 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);
一個ECharts官網示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
二、單Y軸
如下給出一個2016年每月新增設備數的柱狀圖，數據純屬虛構。
2.1 代碼
<!DOCTYPE html> <head> <meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height: 500px; width: 1200px"></div> <!-- ECharts單文件引入 --> <script src="echarts.min.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); option = { tooltip : { trigger : 'axis' }, grid : { right : '20%' }, toolbox : { feature : { dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, legend : { data : [ '設備新增數量' ] }, xAxis : [ { type : 'category', axisTick : { alignWithLabel : false }, data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12' ] } ], yAxis : [ { type : 'value', name : '設備新增數量', min : 0, max : 11000, position : 'left', axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } } ], series : [ { name : '設備新增數量', type : 'bar', data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000 ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
2.2 圖形展示
三、雙Y軸
在上述單Y軸的柱狀圖中展示了一個2016年每月新增設備數的數據。接下來，我們在上述基礎上添加2016年每月新增產品數。
假設，一個產品可以有多個設備。
但是，可能一個產品包含上百、上千甚至更多的設備數，那麼，問題來了 ？
如果使用單軸的柱狀圖就會產生問題？
設備數圖形較為明顯、而產品數的圖形展示不明顯，幾乎看不到變化， 因為設備數和產品數不在同一個數量級上。
為了解決這個問題，咱么可以展示兩個Y軸，分別表示設備數和產品數即可。
3.1 代碼
<!DOCTYPE html> <head> <meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height: 500px; width: 1200px"></div> <!-- ECharts單文件引入 --> <script src="echarts.min.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); option = { tooltip : { trigger : 'axis' }, grid : { right : '20%' }, toolbox : { feature : { dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, legend : { data : [ '設備新增數量', '產品新增數量' ] }, xAxis : [ { type : 'category', axisTick : { alignWithLabel : false }, data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12' ] } ], yAxis : [ { type : 'value', name : '設備新增數量', min : 0, max : 11000, position : 'left', axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '產品新增數量', min : 0, max : 200, position : 'right', axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } } ], series : [ { name : '設備新增數量', type : 'bar', data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000 ] }, { name : '產品新增數量', type : 'bar', yAxisIndex : 1, data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150 ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
3.2 圖形展示
四、三個Y軸
在上述單Y軸的柱狀圖中展示了一個2016年每月新增設備數和2016年每月新增產品數的數據，這個部分，我們還想在圖形上展示2016年每月新增廠商數。
設備數和產品數已經佔用了兩個Y軸，還能再添加一個新的Y軸進去嗎？
答案是肯定的。
ECharts為yAxis提供的offset屬性，就是為多軸服務的。詳情，請參考yAxis配置屬性。
4.1 代碼
<!DOCTYPE html> <head> <meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height: 500px; width: 1200px"></div> <!-- ECharts單文件引入 --> <script src="echarts.min.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); var colors = [ '#5793f3', '#d14a61', '#675bba' ]; option = { color : colors, tooltip : { trigger : 'axis' }, grid : { right : '20%' }, toolbox : { feature : { dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, legend : { data : [ '設備新增數量', '產品新增數量', '廠商新增數量' ] }, xAxis : [ { type : 'category', axisTick : { alignWithLabel : false }, data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12' ] } ], yAxis : [ { type : 'value', name : '設備新增數量', min : 0, max : 11000, position : 'left', axisLine : { lineStyle : { color : colors[2] } }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '產品新增數量', min : 0, max : 200, position : 'right', axisLine : { lineStyle : { color : colors[0] } }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '廠商新增數量', min : 0, max : 200, position : 'right', offset : 80, axisLine : { lineStyle : { color : colors[1] } }, axisLabel : { formatter : '{value}' } } ], series : [ { name : '設備新增數量', type : 'bar', data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000 ] }, { name : '產品新增數量', type : 'bar', yAxisIndex : 1, data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150 ] }, { name : '廠商新增數量', type : 'bar', data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93, 150 ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
4.2 圖形展示
五、小結
在ECharts的option中，我們可以配置參數來指定用於展示的圖形類型、圖形數據、圖形屬性等（如標題、顏色等），具體可以參考配置項。
5.1 四軸
如果還需要展示更多的Y軸數據，那麼只要在yAxis選項中，指定不同的Y軸及其相關的位置或者偏移量offset即可。
代碼如下：
<!DOCTYPE html> <head> <meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height: 500px; width: 1200px"></div> <!-- ECharts單文件引入 --> <script src="echarts.min.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); option = { tooltip : { trigger : 'axis' }, grid : { right : '20%' }, toolbox : { feature : { dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, legend : { data : [ '設備新增數量', '產品新增數量', '廠商新增數量', 'XX新增數量' ] }, xAxis : [ { type : 'category', axisTick : { alignWithLabel : false }, data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12' ] } ], yAxis : [ { type : 'value', name : '設備新增數量', min : 0, max : 11000, position : 'left', axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '產品新增數量', min : 0, max : 200, position : 'right', axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '廠商新增數量', min : 0, max : 200, position : 'right', offset : 80, axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : 'XX新增數量', min : 0, max : 200, position : 'right', offset : 160, axisLine : { lineStyle : {} }, axisLabel : { formatter : '{value}' } } ], series : [ { name : '設備新增數量', type : 'bar', data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000 ] }, { name : '產品新增數量', type : 'bar', yAxisIndex : 1, data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150 ] }, { name : '廠商新增數量', type : 'bar', data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93, 150 ] }, { name : 'XX新增數量', type : 'bar', data : [ 121, 125, 26, 36, 125, 88, 66, 147, 158, 99, 93, 108 ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
5.2 自定義
如果對EChart提供的顏色不滿意，我們也可以指定圖形展示的顏色。 其實，EChart已經提供了好多套主題，用來展示圖形。
示例代碼如下：
<!DOCTYPE html> <head> <meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height: 500px; width: 1200px"></div> <!-- ECharts單文件引入 --> <script src="echarts.min.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); var colors = [ '#5793f3', '#d14a61', '#675bba' ]; option = { color : colors, tooltip : { trigger : 'axis' }, grid : { right : '20%' }, toolbox : { feature : { dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, legend : { data : [ '設備新增數量', '產品新增數量', '廠商新增數量' ] }, xAxis : [ { type : 'category', axisTick : { alignWithLabel : false }, data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12' ] } ], yAxis : [ { type : 'value', name : '設備新增數量', min : 0, max : 11000, position : 'left', axisLine : { lineStyle : { color : colors[2] } }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '產品新增數量', min : 0, max : 200, position : 'right', axisLine : { lineStyle : { color : colors[0] } }, axisLabel : { formatter : '{value}' } }, { type : 'value', name : '廠商新增數量', min : 0, max : 200, position : 'right', offset : 80, axisLine : { lineStyle : { color : colors[1] } }, axisLabel : { formatter : '{value}' } } ], series : [ { name : '設備新增數量', type : 'bar', data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000 ] }, { name : '產品新增數量', type : 'bar', yAxisIndex : 1, data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150 ] }, { name : '廠商新增數量', type : 'bar', data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93, 150 ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
自定義顏色的圖形展示如下：
至此，使用ECharts完成多Y軸展示的示例就展示完畢了。
ECharts是一個比較豐富的圖形展示庫，大家可以參考官網的說明和實例，打造屬於自己的個性化圖形。
