# 显示相关

主题
调色盘
样式
自适应

# 1. 主题

内置主题
自定义主题

# 1.1. 内置主题

说明：

echarts 中默认内置了两套主题： light 和 dark

使用：

const chart = echarts.init(box, 'light');

示例：

<!--37-theme-build-in.html-->
<div style="display: flex;">
  <div id="box_37-theme-build-in_1" style="width: 300px; height: 300px;"></div>
  <div id="box_37-theme-build-in_2" style="width: 300px; height: 300px;"></div>
</div>
<script type="module">
  const option = {
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 }, { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 }, { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: { type: 'category' },
    yAxis: {type: 'value' },
    series: [
      { name: '语文', type: 'bar', encode: { x: 'name', y: 'chinese' } },
      { name: '数学', type: 'bar', encode: { x: 'name', y: 'math' }}
    ]
  };
  echarts.init(document.querySelector('#box_37-theme-build-in_1'), 'light').setOption(option);
  echarts.init(document.querySelector('#box_37-theme-build-in_2'), 'dark').setOption(option);
</script>

# 1.2. 自定义主题

说明：

使用主题编辑器配置主题： https://echarts.apache.org/zh/theme-builder.html (opens new window)

# 2. 调色盘

说明：

它是一组颜色，图形、系列会自动从其中选择颜色

权重：主题调色盘 < 全局调色盘

# 2.1. 主题调色盘

在主题 JSON 中配置

echarts.registerTheme('light', {
  "color": [
    "#05bbc9",
    "#6fcc18",
    "#ffd600",
    // ...
  ],
  // ...
});

# 2.2. 全局调色盘

在 option 中配置

option = {
  color: [
    "#05bbc9",
    "#6fcc18",
    "#ffd600",
    // ...
  ]
};

# 2.3. 颜色渐变

类型：

线性渐变
径向渐变

线性渐变：

option = {
  series: [
    {
      itemStyle: {
        color: {
          type: 'linear', // 当前渐变方向为 从上到下
          x: 0, // (x, y) (x2, y2) 的坐标原点为左上角
          y: 0, // 0 -> 0%, 1-> 100%
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'red' },  // 0% 处的颜色 
            { offset: 1, color: 'blue'} // 100% 处的颜色
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
}

径向渐变：

// 建议用于圆形图形
option = {
  series: [
    { 
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5, // (x, y) 为圆心
          y: 0.5,
          r: 0.5, // 半径
          colorStops: [
            { offset: 0, color: 'red' },  // 0% 处的颜色 
            { offset: 1, color: 'blue'} // 100% 处的颜色
          ],
          global: false // 缺省为 false
        }
      }
    }
    
  ]
}

示例：

<!--38-palette.html-->
<div id="box_38-palette" style="width: 600px; height: 600px;"></div>
<script type="module">
  echarts.init(document.querySelector('#box_38-palette')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 }, { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 }, { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: { type: 'category' },
    yAxis: {type: 'value' },
    series: [
      { name: '语文', type: 'bar', encode: { x: 'name', y: 'chinese' },
        itemStyle: {
          color: {
            type: 'linear', // 当前渐变方向为 从上到下
            x: 0, // (x, y) (x2, y2) 的坐标原点为左上角
            y: 0, // 0 -> 0%, 1-> 100%
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'red' },  // 0% 处的颜色
              { offset: 1, color: 'blue'} // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        }
      },
      { name: '数学', type: 'bar', encode: { x: 'name', y: 'math' },
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5, // (x, y) 为圆心
            y: 0.5,
            r: 0.5, // 半径
            colorStops: [
              { offset: 0, color: 'red' },  // 0% 处的颜色
              { offset: 1, color: 'blue'} // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  });
</script>

# 3. 样式

直接样式
高亮样式

# 3.1. 直接样式

说明：

itemStyle
textStyle
lineStyle
areaStyle
label

示例：

option = {
  title: {
    text: '这是一个饼图',
    textStyle: { clor: 'blue' }, // 标题文本的样式
  },
  series: [
    { 
      type: 'pie', 
      data: [
        { name: '区域1', value: 99, 
          itemStyle: { color: 'yellow' }, // 区域的样式
          label: { color: 'green' }, // 标签的样式
        }
      ] 
    }
  ]
};

# 3.2. 高亮样式

说明：

hover 样式
使用 emphasis
在 emphasis 里设置直接样式

# 4. 自适应

说明：

当浏览器的大小发生变化的时候，图表也随之变化

实现：

const myChart = echarts.init(boxElement);

window.onresize = function() {
  myChart.resize();
}

本章目录