echarts实现树状图思维导图组织结构图效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现树状图思维导图组织结构图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000; } a:link, a:visited { color: #4682b4; } a:hover { color: #4169e1; } #main { width: 2100px; height: 2400px; border: 1px solid #ccc; padding: 10px; } </style> </head> <body> <div id="main"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-all.js"></script> <script > var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: 'Ice Bucket Challenge' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: 'Fig Tree', type: 'tree', orient: 'horizontal', // vertical horizontal rootLocation: { x: 100, y: 'center' }, // 根节点位置 {x: 100, y: 'center'} nodePadding: 8, layerPadding: 200, hoverable: false, roam: true, symbolSize: 6, itemStyle: { normal: { color: '#4883b4', label: { show: true, position: 'right', formatter: "{b}", textStyle: { color: '#000', fontSize: 12 } }, lineStyle: { color: '#ccc', type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed' } }, emphasis: { color: '#4883b4', label: { show: false }, borderWidth: 0 } }, data: [{ "name": "Ice Bucket Challenge", "children": [{ "name": "Liu Zuohu", "children": [{ "name": "Zhou", "children": [{ "name": "Ma" }, { "name": "Xu Xiaoping", "children": [{ "name": "Niu Wenwen", "children": [{ "name": "Yao Jinbo", "children": [{ "name": "Cai Wensheng" }, { "name": "Cai" }, { "name": "Wang Fei" }] }, { "name": "Yangshou Bin", "children": [{ "name": "All entrepreneurs" }, { "name": "all investors" }, { "name": "All of entrepreneurial services" }] }, { "name": "Pu Yi" }] }, { "name": "Luo Zhenyu", "children": [{ "name": "Luo Ji thinking 25000 Member" }] }, { "name": "Wong" }] }, { "name": "Huang Zhang" }] }, { "name": "Overheating" }, { "name": "Liu Jiangfeng", "children": [{ "name": "He just", "children": [{ "name": "Xie Qingjiang" }, { "name": "Wang Xiang" }, { "name": "Wei Ai" }] }, { "name": "Wang Yulei" }] }] }, { "name": "Lei Jun", "children": [{ "name": "Andy", "children": [{ "name": "Lang Lang" }, { "name": "Su Hua Wei" }, { "name": "Jay", "children": [{ "name": "Vincent Fang", "children": [{ "name": "Giddens" }, { "name": "Alan Kuo" }] }, { "name": "Mayday", "children": [{ "name": "Xie Jin Yan", "children": [{ "name": "Zhao Hui Sin" }, { "name": "Zhang Fei", "children": [{ "name": "Little S" }] }, { "name": "Aaron" }] }, { "name": "Olivia" }, { "name": "Takeshi Kaneshiro" }] }] }] }, { "name": "Li", "children": [{ "name": "Mr Yu" }, { "name": "Pan Shiyi", "children": [{ "name": "Ren" }] }, { "name":.........完整代码请登录后点击上方下载按钮下载查看
网友评论0