ECharts 主题样式 #

本章将介绍 ECharts 的主题定制和样式配置，帮助你打造个性化的数据可视化图表。

内置主题 #

使用内置主题 #

ECharts 提供了多个内置主题：

javascript

// 使用默认主题
const chart = echarts.init(document.getElementById('chart'));

// 使用暗色主题
const chart = echarts.init(document.getElementById('chart'), 'dark');

// 使用其他内置主题
const chart = echarts.init(document.getElementById('chart'), 'vintage');

内置主题列表 #

主题名称	描述
default	默认主题，明亮风格
dark	暗色主题
vintage	复古风格
westeros	权力的游戏风格
essos	厄斯索斯风格
wonderland	仙境风格
walden	瓦尔登湖风格
chalk	粉笔风格
infographic	信息图风格
macarons	马卡龙风格
roma	罗马风格
shine	闪耀风格
purple-passion	紫色激情
halloween	万圣节风格

自定义主题 #

主题对象结构 #

javascript

const customTheme = {
  // 调色盘颜色列表
  color: [
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc'
  ],
  
  // 背景色
  backgroundColor: 'rgba(0, 0, 0, 0)',
  
  // 文本样式
  textStyle: {
    color: '#333',
    fontSize: 12
  },
  
  // 标题样式
  title: {
    textStyle: {
      color: '#333',
      fontWeight: 'bold'
    },
    subtextStyle: {
      color: '#aaa'
    }
  },
  
  // 线条样式
  line: {
    itemStyle: {
      borderWidth: 2
    },
    lineStyle: {
      width: 2
    },
    symbolSize: 8,
    symbol: 'emptyCircle',
    smooth: false
  },
  
  // 柱状图样式
  bar: {
    itemStyle: {
      barBorderWidth: 0,
      barBorderColor: '#ccc'
    }
  },
  
  // 饼图样式
  pie: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  
  // 散点图样式
  scatter: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  
  // 坐标轴样式
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#333'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      show: true,
      color: '#333'
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#ccc']
      }
    },
    splitArea: {
      show: false
    }
  },
  
  // 数值轴样式
  valueAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#333'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      show: true,
      color: '#333'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: ['#ccc']
      }
    },
    splitArea: {
      show: false
    }
  }
};

// 注册主题
echarts.registerTheme('customTheme', customTheme);

// 使用自定义主题
const chart = echarts.init(document.getElementById('chart'), 'customTheme');

简化主题配置 #

javascript

const simpleTheme = {
  color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'],
  backgroundColor: '#f5f5f5',
  textStyle: {
    color: '#333'
  }
};

echarts.registerTheme('simpleTheme', simpleTheme);

调色盘配置 #

全局调色盘 #

javascript

option = {
  color: [
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de'
  ],
  series: [
    { type: 'bar', data: [...] },
    { type: 'bar', data: [...] }
  ]
};

系列调色盘 #

javascript

option = {
  series: [{
    type: 'pie',
    data: [...],
    color: ['#c23531', '#2f4554', '#61a0a8']
  }]
};

渐变色 #

javascript

option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ]
      }
    }
  }]
};

径向渐变 #

javascript

option = {
  series: [{
    type: 'pie',
    data: [...],
    itemStyle: {
      color: {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          { offset: 0, color: '#c23531' },
          { offset: 1, color: '#2f4554' }
        ]
      }
    }
  }]
};

样式配置 #

标题样式 #

javascript

title: ECharts
  text: '主标题',
  subtext: '副标题',
  
  // 位置
  left: 'center',
  top: 'top',
  
  // 主标题样式
  textStyle: {
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontFamily: 'sans-serif',
    fontSize: 18,
    lineHeight: 24,
    textBorderColor: '#fff',
    textBorderWidth: 0,
    textShadowColor: 'transparent',
    textShadowBlur: 0,
    textShadowOffsetX: 0,
    textShadowOffsetY: 0
  },
  
  // 副标题样式
  subtextStyle: {
    color: '#aaa',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 12
  },
  
  // 文本对齐
  textAlign: 'center',
  textVerticalAlign: 'middle',
  
  // 主副标题间距
  itemGap: 10,
  
  // 背景
  backgroundColor: 'transparent',
  borderColor: '#ccc',
  borderWidth: 0,
  borderRadius: 0,
  padding: [5, 10]
}

图例样式 #

javascript

legend: {
  data: ['系列1', '系列2'],
  
  // 位置
  left: 'center',
  top: 'bottom',
  
  // 布局
  orient: 'horizontal',
  align: 'auto',
  itemGap: 10,
  itemWidth: 25,
  itemHeight: 14,
  
  // 图标
  icon: 'circle',
  symbolKeepAspect: true,
  
  // 文本样式
  textStyle: {
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 12,
    lineHeight: 20,
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0,
    padding: 0
  },
  
  // 未选中状态颜色
  inactiveColor: '#ccc',
  
  // 选中模式
  selectedMode: true,
  
  // 背景
  backgroundColor: 'transparent',
  borderColor: '#ccc',
  borderWidth: 1,
  borderRadius: 0,
  shadowBlur: 0,
  shadowColor: 'transparent',
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  padding: [5, 10]
}

坐标轴样式 #

javascript

xAxis: {
  type: 'category',
  data: ['A', 'B', 'C'],
  
  // 轴线
  axisLine: {
    show: true,
    onZero: true,
    onZeroAxisIndex: 0,
    lineStyle: {
      color: '#333',
      width: 1,
      type: 'solid'
    }
  },
  
  // 刻度
  axisTick: {
    show: true,
    alignWithLabel: false,
    interval: 'auto',
    inside: false,
    length: 5,
    lineStyle: {
      color: '#333',
      width: 1,
      type: 'solid'
    }
  },
  
  // 标签
  axisLabel: {
    show: true,
    interval: 'auto',
    inside: false,
    rotate: 0,
    margin: 8,
    formatter: null,
    showMinLabel: null,
    showMaxLabel: null,
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 12,
    align: 'center',
    verticalAlign: 'middle',
    lineHeight: 20,
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0,
    padding: 0
  },
  
  // 分隔线
  splitLine: {
    show: false,
    interval: 'auto',
    lineStyle: {
      color: ['#ccc'],
      width: 1,
      type: 'solid'
    }
  },
  
  // 分隔区域
  splitArea: {
    show: false,
    interval: 'auto',
    areaStyle: {
      color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
    }
  }
}

系列样式 #

javascript

series: [{
  type: 'bar',
  data: [10, 20, 30],
  
  // 图形样式
  itemStyle: {
    color: '#5470c6',
    borderColor: '#fff',
    borderWidth: 0,
    borderType: 'solid',
    borderRadius: 0,
    shadowBlur: 0,
    shadowColor: 'transparent',
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    opacity: 1
  },
  
  // 高亮样式
  emphasis: {
    itemStyle: {
      color: '#91cc75',
      borderColor: '#fff',
      borderWidth: 0
    },
    label: {
      show: true,
      fontSize: 14,
      fontWeight: 'bold'
    }
  },
  
  // 淡出样式
  blur: {
    itemStyle: {
      opacity: 0.5
    }
  },
  
  // 选中样式
  select: {
    itemStyle: {
      color: '#fac858'
    }
  }
}]

视觉映射 #

连续型视觉映射 #

javascript

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  
  // 颜色映射
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d'],
    symbolSize: [10, 50],
    opacity: [0.4, 1]
  },
  
  // 超出范围的颜色
  outOfRange: {
    color: '#999',
    symbolSize: 10,
    opacity: 0.5
  },
  
  // 控制维度
  dimension: 0,
  
  // 显示
  show: true,
  calculable: true,
  
  // 文本
  text: ['高', '低'],
  textStyle: {
    color: '#333'
  },
  
  // 位置
  left: 'left',
  top: 'bottom',
  
  // 尺寸
  itemWidth: 20,
  itemHeight: 140,
  
  // 对齐
  align: 'auto',
  
  // 手柄样式
  handleStyle: {
    color: '#fff',
    borderColor: '#acbbcc',
    borderWidth: 1
  }
}

分段型视觉映射 #

javascript

visualMap: {
  type: 'piecewise',
  
  // 分段定义
  pieces: [
    { min: 90, label: '优秀', color: '#5470c6' },
    { min: 80, max: 90, label: '良好', color: '#91cc75' },
    { min: 60, max: 80, label: '及格', color: '#fac858' },
    { max: 60, label: '不及格', color: '#ee6666' }
  ],
  
  // 或使用自动分段
  splitNumber: 5,
  
  // 显示
  show: true,
  
  // 位置
  left: 'left',
  top: 'bottom',
  
  // 布局
  orient: 'vertical',
  
  // 尺寸
  itemWidth: 20,
  itemHeight: 14,
  itemGap: 10,
  
  // 文本
  showLabel: true,
  textStyle: {
    color: '#333'
  },
  
  // 选中模式
  selectedMode: 'multiple',  // 'multiple', 'single'
  
  // 选中状态
  selected: {
    '优秀': true,
    '良好': true
  }
}

响应式设计 #

自适应容器 #

javascript

// 初始化时设置
const chart = echarts.init(document.getElementById('chart'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

// 监听窗口变化
window.addEventListener('resize', () => {
  chart.resize();
});

// 或使用 ResizeObserver
const observer = new ResizeObserver(() => {
  chart.resize();
});
observer.observe(document.getElementById('chart'));

响应式配置 #

javascript

function getResponsiveOption() {
  const width = window.innerWidth;
  const isMobile = width < 768;
  
  return {
    title: {
      text: '响应式图表',
      textStyle: {
        fontSize: isMobile ? 14 : 18
      }
    },
    legend: {
      orient: isMobile ? 'horizontal' : 'vertical',
      top: isMobile ? 'bottom' : 'middle',
      right: isMobile ? 'center' : 'right'
    },
    grid: {
      left: isMobile ? '3%' : '10%',
      right: isMobile ? '3%' : '10%',
      bottom: isMobile ? '15%' : '10%'
    },
    tooltip: {
      triggerOn: isMobile ? 'click' : 'mousemove'
    }
  };
}

// 应用配置
chart.setOption(getResponsiveOption());

// 监听变化
window.addEventListener('resize', () => {
  chart.setOption(getResponsiveOption());
  chart.resize();
});

媒体查询配置 #

javascript

option = {
  baseOption: {
    title: { text: '基础配置' },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [10, 20, 30] }]
  },
  media: [
    {
      query: { maxWidth: 768 },
      option: {
        title: { textStyle: { fontSize: 14 } },
        legend: { orient: 'horizontal', top: 'bottom' },
        grid: { bottom: '20%' }
      }
    },
    {
      query: { minWidth: 769, maxWidth: 1024 },
      option: {
        title: { textStyle: { fontSize: 16 } },
        legend: { orient: 'vertical', right: 'right' }
      }
    },
    {
      query: { minWidth: 1025 },
      option: {
        title: { textStyle: { fontSize: 18 } },
        legend: { orient: 'vertical', right: 'right' }
      }
    }
  ]
};

样式最佳实践 #

1. 统一风格 #

javascript

// 定义统一的设计规范
const designTokens = {
  colors: {
    primary: '#5470c6',
    secondary: '#91cc75',
    warning: '#fac858',
    danger: '#ee6666',
    info: '#73c0de'
  },
  fonts: {
    title: { size: 18, weight: 'bold' },
    body: { size: 12, weight: 'normal' }
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24
  }
};

// 应用到图表
option = {
  title: {
    textStyle: {
      fontSize: designTokens.fonts.title.size,
      fontWeight: designTokens.fonts.title.weight
    }
  },
  color: [
    designTokens.colors.primary,
    designTokens.colors.secondary,
    designTokens.colors.warning
  ]
};

2. 无障碍设计 #

javascript

option = {
  // 高对比度颜色
  color: ['#0077BB', '#33BBEE', '#009988', '#EE7733', '#CC3311'],
  
  // 清晰的标签
  series: [{
    label: {
      show: true,
      fontSize: 14,
      fontWeight: 'bold'
    }
  }],
  
  // 明显的交互反馈
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
};

3. 品牌定制 #

javascript

// 企业品牌主题
const brandTheme = {
  color: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'],
  backgroundColor: '#fff',
  textStyle: {
    fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
  },
  title: {
    textStyle: {
      color: '#262626'
    }
  }
};

echarts.registerTheme('brandTheme', brandTheme);

下一步 #

现在你已经掌握了主题样式，接下来学习高级功能，了解地图可视化、3D 图表等高级特性！