异常教程

ECharts 样式设置（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在数据可视化领域，ECharts 以其强大的功能和灵活的配置能力，成为开发者展示数据的首选工具。然而，许多开发者在初期使用 ECharts 时，往往更关注如何让图表“跑起来”，却忽略了“样式设置”这一关键环节。优秀的样式设计不仅能提升图表的视觉吸引力，还能帮助用户更直观地理解数据背后的逻辑。本文将从基础到进阶，系统性地讲解 ECharts 样式设置的核心方法，通过实际案例和代码示例，帮助读者掌握如何通过样式调整让图表从“能用”进化到“好用”。

一、基础样式设置：从“能看”到“好看”

1.1 颜色与字体：数据的“视觉语言”

在 ECharts 中，颜色和字体是塑造图表风格的基石。例如，通过调整 color 属性可以定义图表的主色调，而 textStyle 则用于控制文字的大小、颜色和字体。

案例：设置折线图的颜色与标题字体

option = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150],
    color: '#FF6B6B' // 红色主色调
  }],
  title: {
    text: '月度销售额趋势',
    textStyle: {
      fontSize: 18,
      color: '#333',
      fontFamily: 'Arial'
    }
  }
};

比喻：颜色和字体就像装修房屋时的墙面涂料和家具材质——选择得当，能营造出专业或温馨的氛围；选择不当，则会让整个空间显得杂乱无章。

1.2 边框与背景：图表的“边界感”

通过 border 和 backgroundColor 属性，可以为图表添加边框或背景色，增强层次感。例如，为柱状图的柱子添加半透明背景：

案例：设置柱状图的背景与边框

series: [{
  type: 'bar',
  itemStyle: {
    color: '#4CAF50',
    borderColor: '#333',
    borderWidth: 1
  },
  barBackground: {
    show: true,
    color: 'rgba(100, 100, 100, 0.2)'
  }
}]

技巧：半透明背景（如 rgba）既能突出数据主体，又避免视觉压迫感，类似在白墙上添加浅灰色阴影，让空间更开阔。

二、高级样式设置：让图表“会说话”

2.1 渐变色与阴影：数据的“立体感”

通过 linearGradient 或 radialGradient，可以为图表元素添加渐变色，使图表更具视觉深度。例如，为饼图的扇形区域添加径向渐变：

案例：饼图的渐变色与阴影效果

series: [{
  type: 'pie',
  itemStyle: {
    color: {
      type: 'radial',
      x: 0.5,
      y: 0.5,
      r: 0.5,
      colorStops: [{
        offset: 0, color: '#FFD700'
      }, {
        offset: 1, color: '#FFA07A'
      }]
    },
    shadowBlur: 10,
    shadowColor: '#999'
  }
}]

比喻：渐变色如同为平面图纸添加“光晕”，让图表元素仿佛“浮出”屏幕，而阴影则像给数据点打上一束聚光灯，突出重点。

2.2 图例与标签：信息的“精准传递”

图例（legend）和数据标签（label）的样式设置，直接影响用户对数据的理解。例如，通过调整标签的字体和位置，可以让关键数据更易被捕捉：

案例：自定义图例与标签样式

legend: {
  textStyle: {
    color: '#666',
    fontSize: 14
  }
},
series: [{
  type: 'line',
  label: {
    show: true,
    position: 'top',
    color: '#2196F3',
    fontSize: 12
  }
}]

技巧：将标签颜色与图例颜色保持一致，如同为数据点贴上“身份标签”，帮助用户快速建立关联。

三、动态效果与交互：让图表“动起来”

3.1 动态加载与过渡：数据的“呼吸感”

通过 animation 相关配置，可以为图表添加平滑的过渡效果，避免生硬的切换。例如，让折线图的线条以动画形式逐步呈现：

案例：折线图的动画效果

option = {
  animation: true,
  animationDuration: 1000, // 动画持续时间
  series: [{
    type: 'line',
    animationEasing: 'elasticOut' // 弹性动画效果
  }]
};

比喻：动画如同为数据注入“生命力”，让图表的更新过程变得优雅，而非突兀的“切换”。

3.2 高亮与悬停：用户的“探索引导”

通过 emphasis 配置，可以定义图表元素在鼠标悬停或点击时的高亮样式，引导用户关注关键区域：

案例：柱状图的悬停高亮效果

series: [{
  type: 'bar',
  itemStyle: {
    emphasis: {
      color: '#FF4081',
      borderColor: '#FF1744',
      borderWidth: 2
    }
  }
}]

技巧：高亮颜色应与默认颜色形成鲜明对比，如同在茫茫夜空中点亮一颗明星，让用户一眼锁定焦点。

四、主题定制：打造专属视觉风格

4.1 主题库与全局样式：规模化设计

ECharts 提供了内置主题库（如 dark、light），也可通过 init 时的 theme 参数自定义全局样式。例如，创建一个简洁的暗色主题：

案例：自定义全局主题

option = {
  theme: {
    color: ['#2196F3', '#4CAF50', '#FF5722'],
    backgroundColor: '#121212',
    textStyle: {
      color: '#FFFFFF'
    }
  }
};

比喻：主题如同为所有图表穿上“统一制服”，确保视觉风格在多个页面或项目中保持一致。

4.2 组件级样式覆盖：局部个性化

若需在全局主题下调整某个组件的样式，可通过组件的 itemStyle 或 textStyle 属性覆盖默认值。例如，仅修改坐标轴标签的颜色：

案例：覆盖坐标轴标签样式

xAxis: {
  axisLabel: {
    color: '#9C27B0'
  }
}

技巧：局部覆盖如同在统一制服上添加徽章，既保留整体风格，又能突出独特性。

五、实战案例：综合样式配置

5.1 场景：销售数据对比仪表盘

假设我们需要设计一个对比月度销售额和利润的仪表盘，要求：

  • 主色调为蓝色系，突出科技感；
  • 柱状图显示销售额，折线图叠加显示利润；
  • 图表背景半透明，标签与图例保持一致风格。

完整代码示例

option = {
  title: {
    text: '2023年月度销售与利润对比',
    textStyle: {
      color: '#212121',
      fontSize: 20
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    axisLabel: {
      color: '#616161'
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: 'rgba(200, 200, 200, 0.3)'
      }
    }
  },
  legend: {
    data: ['销售额', '利润'],
    textStyle: {
      color: '#757575'
    }
  },
  series: [{
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150, 250, 220],
    itemStyle: {
      color: '#2196F3',
      barBorderRadius: 5
    },
    barBackground: {
      color: 'rgba(100, 147, 217, 0.2)'
    }
  }, {
    name: '利润',
    type: 'line',
    data: [40, 60, 50, 80, 70],
    itemStyle: {
      color: '#4CAF50'
    },
    lineStyle: {
      width: 2
    },
    label: {
      show: true,
      position: 'top',
      color: '#4CAF50'
    }
  }],
  grid: {
    containLabel: true,
    backgroundColor: 'rgba(255, 255, 255, 0.1)'
  }
};

效果说明：

  • 蓝色系主色调营造科技感；
  • 柱状图的半透明背景增强层次；
  • 折线图标签与颜色一致，便于用户快速关联数据；
  • 坐标轴的浅灰色网格线避免视觉干扰。

结论

通过本文的讲解，读者应已掌握从基础到进阶的 ECharts 样式设置 方法。无论是调整颜色、添加动态效果，还是定制全局主题，样式设计的核心始终围绕“信息传达”与“用户体验”。建议开发者在实践中多尝试不同配置组合，结合业务场景选择合适的视觉风格——毕竟，一张“会说话”的图表，才是数据价值的最佳载体。

最后提醒：样式设置并非一蹴而就，建议通过官方文档或开源项目持续学习，同时利用浏览器开发者工具实时调试，逐步优化视觉效果。

最新发布

查看更多文章