ECharts圖表實現系列條件顯示

1.1 版本

1.2 應用場景

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

• 用柱形圖展示產品的成本價和單價資料，且柱子帶有背景。

• 系列為成本價時顯示標籤，單價不顯示標籤。

• 「成本價>40」時，成本價系列顯示為紅色；「單價>成本價 * 2」時，單價系列顯示為黃色。

預期效果如下圖所示：

2.1 準備資料

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

2.2 設計報表

2.2.1 插入圖表

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

2.2.2 新增資料結構

選中圖表，點選右側「儲存格元素>配置」，新增一個「二維陣列結構」。

資料集選擇 ds1，計算方式選擇「明細計算」，新增全部欄位，如下圖所示：

2.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,
};

效果如下圖所示：

2.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 節中的預期效果所示。

注：不支援行動端。

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