ECharts圖表實現系列條件顯示

1

版本。

2

應用場景。

1. 在使用 ECharts 圖表引用範本資料集時，使用者可能希望對圖表資料進行一些處理，使圖表可以實現條件顯示等個性化的設定。本文將用一個簡單範例作為示範。

2. 用柱形圖展示産品的【成本價】和【單價】資料，且柱子帶有背景。

3. 系列為【成本價】時顯示標簽，【單價】不顯示標簽。

4. 【成本價>40】時，成本價系列顯示為紅色；【單價>成本價 * 2】時，單價系列顯示為黃色。

5. 預期效果如下圖所示。

3

安裝插件。

1. 點選下載插件：ECharts圖表集成。

2. 伺服器安裝插件方法請參見：伺服器插件管理。

3. 設計器安裝插件方法請參見：設計器插件管理。

1

準備資料。

1. 點選設計器左上角【檔案】→【建立普通報表】，建立資料庫查詢 ds1，SQL 查詢語句為：【SELECT 產品名稱,成本價,單價 FROM 產品 WHERE 類別ID = 2 limit 6】 。

2

設計報表。

1. 插入圖表：選中一片儲存格區域，合併儲存格後，再點選【插入圖表】，選擇【ECharts圖表】。如下圖1所示。

2. 新增資料結構：選中圖表，點選右側【儲存格元素】→【設定】，新增一個【二維陣列結構】。

   資料集選擇 【ds1】，計算方式選擇【明細計算】，新增全部欄位，如下圖2所示。

3. 編輯代碼：點選【代碼編輯器】，效果如下圖所示。輸入代碼。

   var TABLE_DATA = getData("data1");
   var seriesNames = TABLE_DATA[0].slice(1); // 獲取系列名
   var columnValues = TABLE_DATA.slice(1);
   var categoryNames = columnValues.map(function(value){
   return value[0];
   }); // 獲取分類名
   // 根據系列名和值配置series
   var series = seriesNames.map(function(seriesName, index) {
     
     var seriesDatas = columnValues.map(function(item) {
       // 可以在這裏面做一些個性化樣式配置（即條件顯示）
   
       var seriesValue = item[index + 1];
       var serData = {  
         value: seriesValue,
       };
       // 系列名為成本價時顯示標簽並且成本價大於40時柱子顔色顯示為紅色
       if (seriesName === "成本價") {
         serData.label = {
           show: true,
         }
         if (seriesValue > 40) {
           serData.itemStyle = {
             color: '#ff0000'
           }
         }
       } else {
         // 系列名為單價，當單價大於成本價的兩倍時，柱子顔色顯示為黃色
         if (seriesValue > item[1] * 2) {
           serData.itemStyle = {
             color: '#ffff00'
           }
         }
       }
   
       return serData;
     });
   
     return {
       type: "bar",
       name: seriesName,
       data: seriesDatas,
       showBackground: true, // 顯示柱子背景
       backgroundStyle: { // 配置柱子背景的顔色
         color: 'rgba(180, 180, 180, 0.2)'
       }
     };
   });
   
   option = {
     legend: {},
     tooltip: {},
     xAxis: { 
       type: "category",
       data: categoryNames,
     },
     yAxis: {},
     series: series,
   };

3

效果預覽。

1. 儲存報表，點選【分頁預覽】，效果如第一章第2節中的預期效果所示。

注：不支援行動端。

1. 點選下載範本：ECharts圖表實現系列條件顯示.cpt。