样式自定义总览

本文主要概述 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