news 2026/6/10 13:18:08

ECharts 样式设置

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 21:43:20

跟我一起从头开始学 AI - RAG 技术学习指南

0. 写在开头 开头先分享最近的一点感触,虽然有时候我们会横眉冷对一些夸大宣传或者是利用信息差的产品,但是还是得尊重产品本身的技术和应用领域,比如:为什么它能夸大宣传?信息差在哪里?满足了哪些用户需求…

作者头像 李华
网站建设 2026/6/10 4:09:57

LangFlow Alibaba Cloud FC实践总结

LangFlow 与阿里云函数计算:低代码构建 AI 工作流的实践之路 在企业加速拥抱大模型的今天,一个现实问题日益凸显:如何让非专业开发者也能快速参与 AI 应用的设计与验证?传统的开发模式往往要求团队具备扎实的 Python 编程能力、熟…

作者头像 李华
网站建设 2026/6/10 12:46:00

CAD核心功能模块解析:从概念到制造的数字化桥梁

现代计算机辅助设计(CAD)软件已成为工程设计和产品开发的核心工具,其模块化功能覆盖了从概念构思到生产制造的完整流程。下面将针对CAD的六大核心模块,解析它们各自的作用及适用场景。草图模块:设计的起点作用&#xf…

作者头像 李华
网站建设 2026/6/10 9:40:12

日志越权访问频发?,一文搞懂Open-AutoGLM权限隔离与审计机制

第一章:日志越权访问的现状与挑战 在现代分布式系统和微服务架构广泛普及的背景下,日志数据已成为系统运维、故障排查和安全审计的核心资源。然而,随着日志集中化存储和跨服务共享的普及,日志越权访问问题日益凸显,成为…

作者头像 李华
网站建设 2026/6/9 20:14:31

第9篇 | 洪水猛兽:拒绝服务攻击(DoS / DDoS)的原理与演变

《网络安全的攻防启示录》 第一篇章:破壁之术 第9篇 “最残酷的攻击,往往不需要偷走你的任何东西,只需要堵住你的门。” 开篇场景|系统没被黑,却“死”了 你有没有遇到过这种情况: 双十一零点:购物车里的东西怎么也提交不了,App 一直转圈。 热门游戏开服:所有人都卡…

作者头像 李华