スタイルのカスタマイズの概要

この記事では、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 = {
  // 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.'
      }
    }
  }
};

注意：ECharts4以前は、強調スタイルは次のように記述する必要がありました。

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.'
      }
    }
  }
};

オプション形式は依然として互換性がありますが、推奨されません。実際、ほとんどの場合、ユーザーは通常のスタイルのみを設定し、デフォルトの強調スタイルを使用します。そのため、ECharts4以降では、「normal」という用語を使用せずにスタイルを記述できるようになり、オプションがよりシンプルで分かりやすくなりました。

visualMapコンポーネントによる視覚エンコーディング

visualMapコンポーネントは、値を視覚チャネル（色、サイズなど）にマッピングするルールを設定できます。詳細はデータの視覚マップをご覧ください。

貢献者 GitHubでこのページを編集

plainheart plainheartKrzysztofMadejski KrzysztofMadejskipissang pissangfuchunhui fuchunhuizachary-svoboda-accesso zachary-svoboda-accesso