樣式自定義總覽

本文主要概述 Apache EChartsTM 中關於樣式自定義的不同方法。例如，如何配置圖形元素和標籤的顏色、尺寸、陰影等。

“樣式”一詞可能不完全遵循資料視覺化的慣例，但因為這個詞流行且易於理解，我們在本文中採用它。

下文將介紹這些方法。它們的功能可能有所重疊，但適用於不同的場景。

  • 主題
  • 調色盤
  • 直接指定樣式（itemStyle、lineStyle、areaStyle、label ...）
  • 透過 visualMap 元件進行視覺對映

主題

設定主題是改變顏色風格最簡單的方式。例如，在示例頁面中，我們可以切換到深色模式，檢視不同主題的效果。

在我們的專案中，可以像這樣切換到深色主題：

var chart = echarts.init(dom, 'dark');

其他主題預設並未包含，如果需要使用，則需自行載入。這些主題可以在主題編輯器中訪問和下載。也可以在其中建立或編輯主題。下載的主題可以按如下方式使用：

如果主題以 JSON 檔案的形式下載，我們需要自行註冊，例如：

// Assume the theme name is "vintage".
fetch('theme/vintage.json')
  .then(r => r.json())
  .then(theme => {
    echarts.registerTheme('vintage', theme);
    var chart = echarts.init(dom, 'vintage');
  })

如果主題以 JS 檔案的形式下載，它會自動註冊：

// Import the `vintage.js` file in HTML, then:
var chart = echarts.init(dom, 'vintage');
// ...

調色盤

調色盤可以在 option 中設定。它們提供一組顏色，系列（series）和資料（data）會自動從這組顏色中選取。我們可以設定全域性調色盤，也可以為特定系列設定專屬的調色盤。

option = {
  // Global palette:
  color: [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],

  series: [
    {
      type: 'bar',
      // A palette only work for the series:
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
      // ...
    },
    {
      type: 'pie',
      // A palette only work for the series:
      color: [
        '#37A2DA',
        '#32C5E9',
        '#67E0E3',
        '#9FE6B8',
        '#FFDB5C',
        '#ff9f7f',
        '#fb7293',
        '#E062AE',
        '#E690D1',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF'
      ]
      // ...
    }
  ]
};

直接指定樣式

直接設定樣式是一種常用方式。在整個 ECharts 的配置項中，與樣式相關的配置項可以設定在很多地方，包括 itemStyle、lineStyle、areaStyle、label 等。

總的來說，所有內建的元件和系列都遵循類似的命名約定，如 itemStyle、lineStyle、areaStyle、label 等，儘管它們會根據不同的系列或元件出現在不同的位置。

在下面的程式碼中，我們為氣泡圖添加了陰影和漸變色。

var data = [
  [
    [28604, 77, 17096869, 'Australia', 1990],
    [31163, 77.4, 27662440, 'Canada', 1990],
    [1516, 68, 1154605773, 'China', 1990],
    [13670, 74.7, 10582082, 'Cuba', 1990],
    [28599, 75, 4986705, 'Finland', 1990],
    [29476, 77.1, 56943299, 'France', 1990],
    [31476, 75.4, 78958237, 'Germany', 1990],
    [28666, 78.1, 254830, 'Iceland', 1990],
    [1777, 57.7, 870601776, 'India', 1990],
    [29550, 79.1, 122249285, 'Japan', 1990],
    [2076, 67.9, 20194354, 'North Korea', 1990],
    [12087, 72, 42972254, 'South Korea', 1990],
    [24021, 75.4, 3397534, 'New Zealand', 1990],
    [43296, 76.8, 4240375, 'Norway', 1990],
    [10088, 70.8, 38195258, 'Poland', 1990],
    [19349, 69.6, 147568552, 'Russia', 1990],
    [10670, 67.3, 53994605, 'Turkey', 1990],
    [26424, 75.7, 57110117, 'United Kingdom', 1990],
    [37062, 75.4, 252847810, 'United States', 1990]
  ],
  [
    [44056, 81.8, 23968973, 'Australia', 2015],
    [43294, 81.7, 35939927, 'Canada', 2015],
    [13334, 76.9, 1376048943, 'China', 2015],
    [21291, 78.5, 11389562, 'Cuba', 2015],
    [38923, 80.8, 5503457, 'Finland', 2015],
    [37599, 81.9, 64395345, 'France', 2015],
    [44053, 81.1, 80688545, 'Germany', 2015],
    [42182, 82.8, 329425, 'Iceland', 2015],
    [5903, 66.8, 1311050527, 'India', 2015],
    [36162, 83.5, 126573481, 'Japan', 2015],
    [1390, 71.4, 25155317, 'North Korea', 2015],
    [34644, 80.7, 50293439, 'South Korea', 2015],
    [34186, 80.6, 4528526, 'New Zealand', 2015],
    [64304, 81.6, 5210967, 'Norway', 2015],
    [24787, 77.3, 38611794, 'Poland', 2015],
    [23038, 73.13, 143456918, 'Russia', 2015],
    [19360, 76.5, 78665830, 'Turkey', 2015],
    [38225, 81.4, 64715810, 'United Kingdom', 2015],
    [53354, 79.1, 321773631, 'United States', 2015]
  ]
];

option = {
  backgroundColor: {
    type: 'radial',
    x: 0.3,
    y: 0.3,
    r: 0.8,
    colorStops: [
      {
        offset: 0,
        color: '#f7f8fa'
      },
      {
        offset: 1,
        color: '#cdd0d5'
      }
    ]
  },
  grid: {
    left: 10,
    containLabel: true,
    bottom: 10,
    top: 10,
    right: 30
  },
  xAxis: {
    splitLine: {
      show: false
    }
  },
  yAxis: {
    splitLine: {
      show: false
    },
    scale: true
  },
  series: [
    {
      name: '1990',
      data: data[0],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          formatter: function(param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: {
          type: 'radial',
          x: 0.4,
          y: 0.3,
          r: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(251, 118, 123)'
            },
            {
              offset: 1,
              color: 'rgb(204, 46, 72)'
            }
          ]
        }
      }
    },
    {
      name: '2015',
      data: data[1],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          formatter: function(param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(25, 100, 150, 0.5)',
        shadowOffsetY: 5,
        color: {
          type: 'radial',
          x: 0.4,
          y: 0.3,
          r: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(129, 227, 238)'
            },
            {
              offset: 1,
              color: 'rgb(25, 183, 207)'
            }
          ]
        }
      }
    }
  ]
};
線上示例

高亮狀態的樣式

當滑鼠懸浮到圖形元素上時，通常會顯示高亮樣式。預設情況下，高亮樣式是根據普通狀態的樣式自動生成的。但是，也可以透過 emphasis 屬性來指定。 emphasis 中的配置項與普通狀態下的配置項相同，例如：

option = {
  series: {
    type: 'scatter',

    // Styles for normal state.
    itemStyle: {
      // Color of the point.
      color: 'red'
    },
    label: {
      show: true,
      // Text of labels.
      formatter: 'This is a normal label.'
    },

    // Styles for emphasis state.
    emphasis: {
      itemStyle: {
        // Color in emphasis state.
        color: 'blue'
      },
      label: {
        show: true,
        // Text in emphasis.
        formatter: 'This is a emphasis label.'
      }
    }
  }
};

注意：在 ECharts 4 之前，高亮樣式需要像這樣寫：

option = {
  series: {
    type: 'scatter',

    itemStyle: {
      // Styles for normal state.
      normal: {
        color: 'red'
      },
      // Styles for emphasis state.
      emphasis: {
        color: 'blue'
      }
    },

    label: {
      // Styles for normal state.
      normal: {
        show: true,
        formatter: 'This is a normal label.'
      },
      // Styles for emphasis state.
      emphasis: {
        show: true,
        formatter: 'This is a emphasis label.'
      }
    }
  }
};

這種配置格式仍然相容，但已不推薦使用。事實上，在大多數情況下，使用者只設置普通狀態的樣式，並使用預設的高亮樣式。因此，從 ECharts 4 開始，我們支援省略 “normal” 層的寫法，這使得配置項更簡潔、清晰。

透過 visualMap 元件進行視覺對映

visualMap 元件支援配置將數值對映到視覺通道（如顏色、尺寸等）的規則。更多細節請參見資料到視覺的對映。

貢獻者 在 GitHub 上編輯此頁

plainheartKrzysztofMadejskipissangfuchunhuizachary-svoboda-accesso