ECharts 样式设置

ECharts 样式设置详解

ECharts 的样式设置非常强大，主要通过 全局调色盘、组件样式 和 系列图形样式（itemStyle、lineStyle、areaStyle 等）实现。ECharts 5+ 简化了语法，不再强制使用 normal/emphasis 嵌套（直接扁平写法即可），但旧版兼容。

1. 全局样式

• color：全局颜色调色盘，系列会按顺序取色。

  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
  

• backgroundColor：图表背景色。

  backgroundColor: 'rgba(0,0,0,0.8)'  // 透明黑
  

• textStyle：全局文本样式（标题、标签等继承）。

  textStyle: {
      color: '#333',
      fontSize: 14,
      fontFamily: 'Arial'
  }
  

2. 系列图形样式（series 内）

核心样式集中在 itemStyle（柱子/饼块/散点）、lineStyle（折线）、areaStyle（区域填充）、label（数据标签）。

示例：自定义柱状图 + 渐变 + 阴影

series: [{
    type: 'bar',
    itemStyle: {
        color: {  // 线性渐变
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
                { offset: 0, color: '#5470c6' },
                { offset: 1, color: '#91cc75' }
            ]
        },
        borderRadius: [10, 10, 0, 0],  // 圆角（上左、上右、下右、下左）
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
    },
    emphasis: {  // hover 高亮
        itemStyle: {
            shadowBlur: 30,
            opacity: 0.8
        }
    },
    label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 12
    }
}]

示例：折线图渐变区域 + 自定义线条

series: [{
    type: 'line',
    lineStyle: {
        width: 4,
        color: '#ee6666',
        type: 'dashed'  // 虚线
    },
    areaStyle: {
        color: {  // 渐变填充
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
                { offset: 0, color: 'rgba(238, 102, 102, 0.8)' },
                { offset: 1, color: 'rgba(238, 102, 102, 0)' }
            ]
        }
    },
    itemStyle: {
        borderWidth: 3,
        borderColor: '#fff'
    }
}]

示例：饼图自定义样式

series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    label: {
        formatter: '{b}: {d}%',
        color: '#333'
    }
}]

3. 高级样式技巧

• 渐变类型：linear（线性）、radial（径向）、pattern（纹理图片）。
• 视觉映射（visualMap）：根据数据自动映射颜色/大小/透明度。

  visualMap: {
      type: 'continuous',
      min: 0, max: 100,
      inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }
  }
  

• 富文本标签：使用 {rich} 定义复杂样式。
• 主题切换：echarts.init(dom, 'dark') 或自定义主题。

更多样式示例，推荐官方：

• 样式手册：https://echarts.apache.org/zh/option.html#series-pie.itemStyle
• 示例 Gallery：https://echarts.apache.org/examples/zh/editor.html?c=pie-simple

如果你想针对特定图表（如柱状渐变、饼图阴影）获取完整代码，或有自定义需求（如暗黑主题），告诉我，我可以给出精确示例！