echarts-tree 自定义label，实现组织架构

最新推荐文章于 2024-06-14 13:03:54 发布

石金泽

最新推荐文章于 2024-06-14 13:03:54 发布

阅读量1.3k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42568343/article/details/126439350

版权

本文介绍如何使用ECharts库根据部门ID为组织结构图中的节点设置不同颜色边框和标签样式，通过`indexflag`判断并应用`#C5C4D1`, `#B1D0A5`, `#A4B6F1`等颜色，实现个性化展示。同时展示了如何通过formatter和rich对象自定义label内容。

摘要由CSDN通过智能技术生成

效果如下

methods：

根据不同部门设置不同的颜色边框

遍历所有节点根据不同id设置不同label

			//遍历所有节点 添加样式
			readNodes: function(nodes) {
				var _this = this
				for (let item of nodes) { // js遍历树形数组结构
					if (item.children && item.children.length) {
						_this.readNodes(item.children)
					}
					//汽车电子研究院
					if (item.indexflag == 3) {
						item.lineStyle = {
							color: '#C5C4D1',
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#C5C4D1",
							shadowBlur: 0,
							shadowOffsetY: -2,
							offset: [0, -50],
						}

					}
					//汽车电子研究院
					if (item.indexflag == 301 || String(item.depart_id).substring(0, 3) == "301") {
						item.lineStyle = {
							color: '#B1D0A5',
						}
						item.label = {
							// borderColor:"#B1D0A5",
							// borderWidth:2,		
							backgroundColor: "#FFF",
							shadowColor: "#B1D0A5",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}

					} else if (item.indexflag == 302 || String(item.depart_id).substring(0, 3) == "302") {
						item.lineStyle = {
							color: '#A4B6F1'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#A4B6F1",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//汽车电子营销部
					} else if (item.indexflag == 303 || String(item.depart_id).substring(0, 3) == "303") {
						item.lineStyle = {
							color: '#85B8F1'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#85B8F1",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//综合管理
					} else if (item.indexflag == 304 || String(item.depart_id).substring(0, 3) == "304") {
						item.lineStyle = {
							color: '#9FD1CE'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#9FD1CE",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//制造部
					} else if (item.indexflag == 305 || String(item.depart_id).substring(0, 3) == "305") {
						item.lineStyle = {
							color: '#A384E3'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#A384E3",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//财务部
					} else if (item.indexflag == 306 || String(item.depart_id).substring(0, 3) == "306") {
						item.lineStyle = {
							color: '#FA92B2'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#FA92B2",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//质量部
					} else if (item.indexflag == 307 || String(item.depart_id).substring(0, 3) == "307") {
						item.lineStyle = {
							color: '#F6AF8E'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#F6AF8E",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
						//采购部
					} else if (item.indexflag == 308 || String(item.depart_id).substring(0, 3) == "308") {

						item.lineStyle = {
							color: '#F5D671'
						}
						item.label = {
							backgroundColor: "#FFF",
							shadowColor: "#F5D671",
							shadowBlur: 0,
							shadowOffsetY: -2,
						}
					}


				}
			},

option

通过formatter自定义label里的内容

下面是echarts 官网示例

 formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

rich里绑定样式

 rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }

我自己的部分代码

series:[{

    label:{
        formatter: function(params) {
            if (params.data.indexflag < 10) {
                return "{icon_3|}" + "{depart_name|" + '\n' + params.data.depart_name+ "}"                         
                + '\n' + "{perNum|" + params.data.person_unm + '/' + params.data.organizer 
                + "}" + '\n' + "{name|" + "" + "}";
            }
    
        }
   rich:{
        icon_3: {
	    width: 35,
	    height: 35,
	    lineHeight: 42,
	    align: "center",
	    backgroundColor: {
	    image: "src/assets/img/icon_3.png"
	    }
									},

   }     
  }

}]