news 2026/9/30 1:46:10

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/9/29 22:12:39

Open-AutoGLM日志加密部署难题:90%团队忽略的2个致命风险点

第一章:Open-AutoGLM 日志数据加密存储在 Open-AutoGLM 系统中,日志数据的安全性至关重要。为防止敏感信息泄露,系统采用端到端加密机制对日志进行安全存储。所有日志在写入磁盘前均经过加密处理,确保即使存储介质被非法获取&…

作者头像 李华
网站建设 2026/9/29 8:34:02

精密机械工厂6个研发如何共享一台SolidWorks云工作站

在精密机械制造行业,产品研发效率与协同能力直接决定市场竞争力。当6名工程师需要共享SolidWorks云工作站时,可借助智能共享云桌面,通过以下综合方案实现共享一台SolidWorks云工作站的目标,该方案涵盖硬件配置、资源管理、软件部署…

作者头像 李华
网站建设 2026/9/29 17:08:36

Open-AutoGLM监控总失效?99%人忽略的3个配置陷阱

第一章:Open-AutoGLM异常访问监控配置在部署 Open-AutoGLM 服务时,保障系统安全与稳定性至关重要。异常访问监控是及时发现潜在攻击、滥用行为或系统故障的关键机制。通过合理配置日志采集、访问频率限制和行为分析规则,可有效识别并阻断异常…

作者头像 李华
网站建设 2026/9/29 20:02:59

LangFlow静态站点生成(SSG)可行性探讨

LangFlow静态站点生成(SSG)可行性探讨 在AI应用开发日益普及的今天,越来越多团队希望快速构建、展示并共享基于大语言模型的工作流。然而,传统的LangChain项目往往依赖复杂的代码结构和持续运行的服务端环境,使得非技术…

作者头像 李华
网站建设 2026/9/30 0:51:27

Linux 如何设置开机自启:全面指南!

在日常运维和开发中,我们经常希望某些程序或服务在系统启动时自动运行,比如 Web 服务、数据库、监控脚本、定时任务等。本文将详细介绍在 Linux 系统中设置开机自启的常见方法,适用于常见发行版如 CentOS、Ubuntu、Debian 等。 一、使用 syst…

作者头像 李华