Echarts 深色主题、边框、背景美化

本文整理一套 ECharts 全套深色大屏美化方案 ： 统一深色背景、科技风边框、渐变背景、坐标轴/文字/图例深色适配、tooltip美化、分割线淡化、图表圆角、阴影，可直接套用到折线/柱状/饼图/地图/仪表盘，复制即用。

---

一、全局通用深色美化规则（统一风格）

1. 画布背景：透明，外层容器深色科技黑
2. 坐标轴文字、图例、顶部标题：浅白/浅灰
3. 轴线、网格线：浅蓝半透明，弱化不刺眼
4. 提示框 tooltip：深色磨砂+圆角
5. 系列柱/线/饼：高饱和科技蓝、青绿、橙、红
6. 容器：深色底色 + 发光边框 + 圆角 + 内阴影

---

二、外层容器美化 CSS（直接套用）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  background: #081022;  /* 全局深色底色 */
}
/* 单个图表容器 深色边框美化 */
.chart-wrap {
  width: 100%;
  height: 100%;
  padding: 12px;
  background: rgba(16, 32, 64, 0.6);
  border: 1px solid rgba(64, 158, 255, 0.25);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(45, 140, 255, 0.1),
              inset 0 0 8px rgba(45, 140, 255, 0.08);
}

---

三、ECharts 通用深色公共配置（抽取复用）

所有图表直接混入这套，一键深色美化：

const darkCommon = {
  // 标题
  title: {
    textStyle: {
      color: '#e5edf7',
      fontSize: 16,
      fontWeight: 'normal'
    },
    left: 'center'
  },
  // 悬浮提示框 深色磨砂
  tooltip: {
    backgroundColor: 'rgba(13, 27, 58, 0.92)',
    borderColor: 'rgba(64, 158, 255, 0.35)',
    textStyle: { color: '#fff' },
    padding: 10,
    borderRadius: 6
  },
  // 图例文字
  legend: {
    textStyle: { color: '#c0d4f1' }
  },
  // 绘图内边距
  grid: {
    left: '3%',
    right: '4%',
    bottom: '6%',
    top: '16%',
    containLabel: true
  }
};

---

四、坐标轴深色美化（折线/柱状必加）

const axisDark = {
  xAxis: {
    axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.35)' } },
    axisTick: { lineStyle: { color: 'rgba(64, 158, 255, 0.2)' } },
    axisLabel: { color: '#a0b8e0' },
    splitLine: { show: false }
  },
  yAxis: {
    axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.35)' } },
    axisTick: { show: false },
    axisLabel: { color: '#a0b8e0' },
    splitLine: {
      lineStyle: { color: 'rgba(64, 158, 255, 0.15)' }
    }
  }
};

---

五、各图表 深色美化完整 option 示例

1）深色柱状图（渐变+圆角+阴影）

const barOption = {
  ...darkCommon,
  ...axisDark,
  xAxis: {
    type: 'category',
    data: ['1月','2月','3月','4月','5月']
  },
  series: [{
    type: 'bar',
    barWidth: '45%',
    data: [120, 200, 150, 180, 130],
    itemStyle: {
      borderRadius: [4,4,0,0],
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#23c6c8' },
        { offset: 1, color: '#0e7a7c' }
      ]),
      shadowBlur: 10,
      shadowColor: 'rgba(35, 198, 200, 0.3)'
    }
  }]
};

2）深色折线图（面积渐变+柔光）

const lineOption = {
  ...darkCommon,
  ...axisDark,
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月','2月','3月','4月','5月']
  },
  series: [{
    type: 'line',
    smooth: true,
    data: [820, 932, 901, 934, 1290],
    lineStyle: { color: '#409eff', width: 2 },
    itemStyle: { color: '#409eff' },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(64, 158, 255, 0.35)' },
        { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
      ])
    }
  }]
};

3）深色环形饼图（配色统一）

const pieOption = {
  ...darkCommon,
  series: [{
    type: 'pie',
    radius: ['35%', '70%'],
    center: ['50%','50%'],
    data: [
      {value:435,name:'A类'},
      {value:310,name:'B类'},
      {value:234,name:'C类'},
      {value:135,name:'D类'}
    ],
    itemStyle: {
      color: ['#409eff','#36cbcb','#e6a23c','#f56c6c'],
      borderColor: '#081022',
      borderWidth: 2
    },
    label: { color: '#c0d4f1' }
  }]
};

4）深色地图美化

const mapOption = {
  ...darkCommon,
  visualMap: {
    min:0,max:1500,
    textStyle:{color:'#c0d4f1'},
    inRange:{
      color:['#0b2447','#194b8e','#409eff']
    }
  },
  series:[{
    type:'map',
    map:'china',
    roam:true,
    data:[],
    itemStyle:{
      areaColor:'rgba(20, 48, 92, 0.6)',
      borderColor:'rgba(64,158,255,0.25)'
    },
    label:{color:'#a0b8e0'}
  }]
};

5）深色仪表盘

const gaugeOption = {
  ...darkCommon,
  series: [{
    type: 'gauge',
    radius: '80%',
    progress: { show:true, width:16 },
    detail: { color:'#e5edf7', fontSize:22 },
    data: [{value: 72, name: '利用率'}],
    axisLine: {
      lineStyle: {
        width:16,
        color: [
          [0.3,'#2f9c53'],
          [0.7,'#e6a23c'],
          [1,'#f56c6c']
        ]
      }
    }
  }]
};

---

六、一键使用 ECharts 官方深色主题（极简方案）

不用手写样式，直接引入内置深色主题：

<script src="https://cdn.jsdelivr.net/npm/echarts/theme/dark.js"></script>

初始化时传入主题：

const chart = echarts.init(dom, 'dark');

优点：极速开发；缺点：自定义边框、渐变不如手写精致，适合快速落地。

---

七、整合要点（你后续开发直接套用）

1. 外层容器：深蓝半透明 + 蓝色细边框 + 发光阴影 + 圆角
2. 文字统一：标题浅白、坐标轴浅蓝灰、图例浅蓝
3. 线条统一：轴线/分割线 低透明度蓝色
4. 图形美化：柱状圆角+渐变阴影、折线面积渐变、饼图深色分割边
5. 提示框：深色磨砂风格，统一大屏质感