renyicun
/
ShangHaiInustrialMuseum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
							<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>chart</title>
</head>

<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    height: 100%;
    margin: 0;
    background-image: url(./chart4app-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
</style>

<body>
  <div id="container" style="height: 100%"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script type="text/javascript">
    function getRandomColorPair() {
      const colorR = Math.floor(Math.random() * (220 - 50) + 50)
      const colorG = Math.floor(Math.random() * (220 - 50) + 50)
      const colorB = Math.floor(Math.random() * (220 - 50) + 50)
      const colorDiff = Math.floor(Math.random() * ((255 - 220) - 20) + 20)
      return [
        `rgb(${colorR}, ${colorG}, ${colorB})`,
        `rgb(${colorR + colorDiff}, ${colorG + colorDiff}, ${colorB + colorDiff})`
      ]
    }
 
    const rawInfo = [
      {
        name: '开埠通商',
        corpList: [
          // {
          //   companyName: "正泰橡皮物品制造厂",
          //   createTime: "2023-08-03 14:21:45",
          //   creatorId: null,
          //   creatorName: "",
          //   description: "创办正泰橡皮物品制造厂，首创“回力”商标。",
          //   dirCode: "",
          //   display: null,
          //   fileIds: "",
          //   id: 10,
          //   name: "刘永康",
          //   sort: null,
          //   stage: "开埠通商",
          //   story: "",
          //   updateTime: "2023-08-03 14:21:45",
          // }
        ],
        id: 'time-0'
      },
      {
        name: '曲折发展',
        corpList: [],
        id: 'time-1'
      },
      {
        name: '步履维艰',
        corpList: [],
        id: 'time-2'
      },
      {
        name: '筚路蓝缕',
        corpList: [],
        id: 'time-3'
      },
      {
        name: '改革开放',
        corpList: [],
        id: 'time-4'
      },
      {
        name: '战略负重',
        corpList: [],
        id: 'time-5'
      },
      {
        name: '创新驱动',
        corpList: [],
        id: 'time-6'
      },
      {
        name: '追梦未来',
        corpList: [],
        id: 'time-7'
      },
    ]
   
    for (const iterator of rawInfo) {
      const [color1, color2] = getRandomColorPair()
      console.log(color1);
      console.log(color2);
      iterator.color = {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: color1
          },
          {
            offset: 0.4,
            color: color1
          },
          {
            offset: 1,
            color: color2
          },
        ],
        global: false
      }
    }
    
    const nodesForRender = [
      {
        name: "历史回顾",
        level: 0,
        category: null,
        symbolSize: 100,
        itemStyle: {
          color: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "#00c7ef"
              },
              {
                offset: 0.8,
                color: "#00c7ef"
              },
              {
                offset: 1,
                color: "rgba(0, 0, 0, 0.3)"
              }
            ],
            global: false
          },
          shadowColor: "rgba(255, 255, 255, 0.5)",
          shadowBlur: 10
        },
        label: {
          position: 'inside',
          show: true,
          color: '#fff',
          fontSize: '18px',
        }
      },
    ]
    const edgesForRender = []

    Promise.allSettled(rawInfo.map((timeInfoItem) => {
      return axios({
        method: 'post',
        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          stage: timeInfoItem.name
        },
      }).then((res) => {
        return res.data.data.records
      }).then((res) => {
        timeInfoItem.corpList = res
      })
    })).then((res) => {
      for (const timeInfoItem of rawInfo) {
        nodesForRender.push({
          name: timeInfoItem.name,
          level: 1,
          category: timeInfoItem.name,
          symbolSize: 50,
          itemStyle: {
            color: timeInfoItem.color,
            shadowColor: "rgba(255, 255, 255, 0.5)",
            shadowBlur: 10
          },
          label: {
            position: 'right',
            show: true,
            color: '#fff',
            fontSize: '16px',
          }
        })
        edgesForRender.push({
          category: null,
          lineStyle: {
            normal: {
              color: timeInfoItem.color.colorStops[2].color,
            },
          },
          source: '历史回顾',
          target: timeInfoItem.name,
        })
        for (const corpItem of timeInfoItem.corpList) {
          nodesForRender.push({
            name: corpItem.name,
            level: 2,
            idForSend: corpItem.id,
            category: timeInfoItem.name,
            symbolSize: 10,
            itemStyle: {
              borderColor: timeInfoItem.color.colorStops[2].color,
              color: 'transparent',
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 10
            },
            select: {
              itemStyle: {
                borderColor: timeInfoItem.color.colorStops[2].color,
                color: timeInfoItem.color.colorStops[2].color,
              },
            },
            label: {
              position: 'right',
              show: true,
              color: '#fff',
              fontSize: '14px',
            }
          })
          edgesForRender.push({
            category: timeInfoItem.name,
            lineStyle: {
              normal: {
                color: timeInfoItem.color.colorStops[2].color,
              },
            },
            source: timeInfoItem.name,
            target: corpItem.name,
          })
        }
      }
      showAll()
      window.parent.postMessage('fetch data done', '*')
    })
    
    let myChart = null
    var dom = document.getElementById('container');
    myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    
    function showAll() {
      return showChart()
    }

    function changeTime(timeIdx) {
      if (Number.isInteger(timeIdx) && timeIdx >= 0) {
        return showChart(timeIdx)
      } else {
        console.error('[page using echart] changeTime: invalid param!', timeIdx);
      }
    }

    let nodesForRenderTemp = null
    let edgesForRenderTemp = null
    function showChart(timeIdx) {
      if (timeIdx !== undefined) {
        nodesForRenderTemp = nodesForRender.filter((item) => {
          return item.category === rawInfo[timeIdx].name
        })
        edgesForRenderTemp = edgesForRender.filter((item) => {
          return item.category === rawInfo[timeIdx].name
        })
      } else {
        nodesForRenderTemp = null
        edgesForRenderTemp = null
      }

      myChart.clear()
      myChart.setOption({
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            // 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力
            force: {
              // initLayout: 'circular', // 进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。也可以选择使用环形布局 'circular'。
              // repulsion: 100, // 节点之间的斥力因子。傻逼文档把edgeLength当数组用的用法写到这上边了。
              repulsion: 300, // 节点之间的斥力因子。傻逼文档把edgeLength当数组用的用法写到这上边了。
              // gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              // edgeLength: [50, 400], // 把各个边的两个节点之间的距离归一化到这个范围内。与repulsion共同作用。
              edgeLength: 100, // 把各个边的两个节点之间的距离归一化到这个范围内。与repulsion共同作用。
              layoutAnimation: true,
              friction: 0.5, // 这个参数能减缓节点的移动速度。取值范围 0 到 1。但是仍然是个试验性的参数，参见 #11024。
            },
            data: timeIdx === undefined ? nodesForRender : nodesForRenderTemp,
            // 或者叫edges
            links: timeIdx === undefined ? edgesForRender : edgesForRenderTemp,
            // 单选or多选or不可选
            selectedMode: 'single',
            // 选中时的图形样式
            select: {
              itemStyle: {
                shadowBlur: 30,
                shadowColor: 'rgba(255, 255, 125, 0.7)',
              },
              label: {
                fontWeight: 'bold',
              },
            },
            // hover时的图形样式
            emphasis: {
              scale: false,
            },
            // hover时只照常显示有联系的那些节点和边，其余的暗色显示。
            focusNodeAdjacency: true,
            // 图表是否可以移动、缩放
            roam: true,
            scaleLimit: {
                min: 0.5, //最小的缩放值
                max: 3, //最大的缩放值
            },
            draggable: true,
            lineStyle: {
              normal: {
                width: 1.5,
                curveness: 0,
                type: "solid"
              }
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 8],
          }
        ]
      }, true)
    }

    // 用户选中节点后，向父窗口post message
    function onSelect(params) {
      if (params.dataType !== 'node') {
        return
      }
      window.vuplex.postMessage({
        msg: `node-selected`,
        nodeLevel: nodesForRenderTemp ? nodesForRenderTemp[params.dataIndexInside].level : nodesForRender[params.dataIndexInside].level,
        nodeStageName: nodesForRenderTemp ? nodesForRenderTemp[params.dataIndexInside].category : nodesForRender[params.dataIndexInside].category,
        nodeStageIdx: rawInfo.findIndex((item) => {
          return item.name === (nodesForRenderTemp ? nodesForRenderTemp[params.dataIndexInside].category : nodesForRender[params.dataIndexInside].category)
        }),
        nodeId: nodesForRenderTemp ? nodesForRenderTemp[params.dataIndexInside].idForSend : nodesForRender[params.dataIndexInside].idForSend,
      })
    }
    myChart.on('select', onSelect)

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>