中国建设基础设施总公司 网站叶文语 厦门建设局

中国建设基础设施总公司 网站,叶文语 厦门建设局,软件开发者大会,网站软件有哪些ECharts 配置语法详解 Apache ECharts 的配置项#xff08;option#xff09;是图表的核心#xff0c;使用纯 JSON 对象格式#xff08;JavaScript 对象字面量#xff09;。它采用声明式语法#xff1a;你只需描述“图表应该长什么样”#xff0c;ECharts 会自动渲染。…ECharts 配置语法详解Apache ECharts 的配置项option是图表的核心使用纯 JSON 对象格式JavaScript 对象字面量。它采用声明式语法你只需描述“图表应该长什么样”ECharts 会自动渲染。当前官方文档主要基于ECharts 5.x 和 6.x最新特性支持到 v6.0.0配置语法在 5.x 后相对稳定。1. option 基本结构一个典型的 option 对象结构如下varoption{// 全局配置backgroundColor:#fff,// 背景色color:[#5470c6,#91cc75,#fac858,...],// 全局调色盘系列自动取色// 组件配置可多个title:{...},// 标题legend:{...},// 图例tooltip:{...},// 提示框toolbox:{...},// 工具箱grid:{...},// 直角坐标系网格xAxis:{...},// X 轴yAxis:{...},// Y 轴visualMap:{...},// 视觉映射dataZoom:{...},// 数据缩放// 数据系列核心必填至少一个series:[{type:bar,// 图表类型name:系列1,data:[10,20,30],itemStyle:{...},// 图形样式label:{...},// 数据标签emphasis:{...}// 高亮样式悬停时},// ... 更多系列],// 其他高级配置media:[...],// 响应式配置animation:true// 动画开关};2. 配置规则与语法要点层级嵌套配置项采用树状结构子属性独立配置。例如title.textStyle.color只影响标题文本颜色。合并与覆盖同层级重复属性后者覆盖前者。对象合并子属性不会整体覆盖而是逐个合并例如修改textStyle.fontSize不会影响其他 textStyle 属性。系列 组件 全局 的优先级局部覆盖全局。数组支持多实例如title: [{...}, {...}]可显示多个标题series天然支持多个。函数支持许多属性支持函数形式用于动态计算。例如tooltip:{formatter:function(params){return值: params.value;}}富文本Rich Text在文本属性如title.text、label.formatter中使用{style|文本}语法结合rich对象定义复杂样式。label:{formatter:{a|富文本}\n{c|值: {c}},rich:{a:{color:red,fontSize:16},c:{backgroundColor:#eee,padding:5}}}响应式配置media querymedia:[{query:{maxWidth:600},// 小屏幕option:{grid:{left:20},series:[{itemStyle:{...}}]}},{option:{...}// 默认大屏幕配置}]3. 样式配置语法常见ECharts 样式设置非常灵活主要通过以下方式调色盘根级color数组或系列级color。直接样式推荐扁平写法ECharts 4 不强制用normalseries:[{itemStyle:{// 柱子/点样式color:#5470c6,// 纯色borderColor:#000,borderWidth:2,shadowBlur:10,shadowColor:rgba(0,0,0,0.3)},lineStyle:{...},// 折线样式areaStyle:{...},// 区域填充label:{// 数据标签show:true,color:#fff,fontSize:12},emphasis:{// 鼠标悬停高亮itemStyle:{opacity:0.8},label:{show:true}}}]渐变色/纹理color:{type:linear,x:0,y:0,x2:1,y2:0,colorStops:[{offset:0,color:red},{offset:1,color:blue}]}主题与视觉映射通过echarts.init(dom, dark)切换主题或用visualMap根据数据映射颜色/大小。4. 学习建议官方配置手册最权威https://echarts.apache.org/zh/option.html 完整列出所有配置项示例 Galleryhttps://echarts.apache.org/examples/zh/ 上千个可复制示例直接查看 option速查手册https://echarts.apache.org/zh/cheat-sheet.html 快速定位组件文档掌握配置语法的最佳方式是多看官方示例 改代码实践。如果你有特定组件如 tooltip、series的配置需求或者想看某个图表的完整 option 示例随时告诉我