echarts实现树状图思维导图组织结构图效果代码

代码语言:html

所属分类:图表

代码描述:echarts实现树状图思维导图组织结构图效果代码

代码标签: 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