renyicun
/
ShangHaiInustrialMuseum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!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">
    const timeList = [
      '开埠通商',
      '曲折发展',
      '步履维艰',
      '筚路蓝缕',
      '改革开放',
      '战略负重',
      '创新驱动',
      '追梦未来',
    ]

    function randomColor() {
      return '#' + Math.floor(
          (
            Math.random() * (1 - 0.3) + 0.3
          ) * 0xffffff
        ).toString(16)
    }
    
    const dataForRender = {}

    let myChart = null
    
    var dom = document.getElementById('container');
    myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    
    async function showChart(timeIdx) {
      myChart.clear()
      
      const res = await axios({
        method: 'post',
        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          stage: timeList[timeIdx]
        },
      })
      const corpList = res.data.data.records

      dataForRender.nodes = [
        {
          name: timeList[timeIdx],
          id: '-1',
          symbolSize: 100,
          itemStyle: {
            color: randomColor()
          },
        },
      ]
      dataForRender.edges = []

      for (const iterator of corpList) {
        const newNode = {
          name: iterator.name || iterator.companyName,
          id: iterator.id.toString(),
          symbolSize: iterator.importance || (100 * Math.random()),
          itemStyle: {
            color: randomColor()
          }
        }
        dataForRender.nodes.push(newNode)
      }
      // 除了代表时代的那个节点，其他节点的尺寸归一化
      let vMax = Number.NEGATIVE_INFINITY
      let vMin = Number.POSITIVE_INFINITY
      const vMaxNew = 50
      const vMinNew = 30
      for (let index = 1; index < dataForRender.nodes.length; index++) {
        const size = dataForRender.nodes[index].symbolSize
        if (size > vMax) {
          vMax = size
        }
        if (size < vMin) {
          vMin = size
        }
      }
      let scale = null
      if (vMax === vMin) {
        scale = 1
        for (const iterator of dataForRender.nodes.slice(1)) {
          iterator.symbolSize = vMinNew + (vMaxNew - vMinNew) / 2
        }
      } else {
        scale = (vMaxNew - vMinNew) / (vMax - vMin)
        for (const iterator of dataForRender.nodes.slice(1)) {
          iterator.symbolSize = vMinNew + (iterator.symbolSize - vMin) * scale
        }
      }
      // 画边
      for (let i = 0; i < dataForRender.nodes.length; i++) {
        for (let j = i + 1; j < dataForRender.nodes.length; j++) {
          const hasCenterNode = (i === 0 || j === 0)
          if (hasCenterNode) {
            const newEdge = {
              source: dataForRender.nodes[i].id,
              target: dataForRender.nodes[j].id,
              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 10, // 值越大，连接的两个节点间斥力越小。
            }
            dataForRender.edges.push(newEdge)
          } else {
            const newEdge = {
              source: dataForRender.nodes[i].id,
              target: dataForRender.nodes[j].id,
              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 1, // 值越大，连接的两个节点间斥力越小。
              lineStyle: {
                opacity: 0,
              }
            }
            dataForRender.edges.push(newEdge)
          }
        }
      }
      // console.log(dataForRender);
      
      myChart.setOption({
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            draggable: false,
            // 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力
            force: {
              initLayout: 'circular', // 进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。也可以选择使用环形布局 'circular'。
              repulsion: 100, // 节点之间的斥力因子。傻逼文档把edgeLength当数组用的用法写到这上边了。
              gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: [50, 400], // 把各个边的两个节点之间的距离归一化到这个范围内。与repulsion共同作用。
              layoutAnimation: true,
              friction: 0.1, // 这个参数能减缓节点的移动速度。取值范围 0 到 1。但是仍然是个试验性的参数，参见 #11024。
            },
            data: dataForRender.nodes,
            // 或者叫edges
            links: dataForRender.edges,
            selectedMode: 'single',
            select: {
              itemStyle: {
                shadowBlur: 50,
                shadowColor: 'rgba(255, 255, 125, 0.7)',
              },
              label: {
                position: 'right',
                show: true,
                color: '#fff',
                fontSize: '20px',
                fontWeight: 'bold',
              }
            },
            // 高亮状态的图形样式
            emphasis: {
              scale: false,
              label: {
                position: 'right',
                show: true,
                color: '#fff',
                fontSize: '20px',
                fontWidth: 'bold',
              }
            },
            // 图表是否可以移动、缩放
            roam: true,
            lineStyle: {
              width: 0.5,
              curveness: 0.3,
              opacity: 0.7,
            }
          }
        ]
      }, true)

      setTimeout(() => {
        // 等myChart上注册了select回调后再执行
        // 一开始自动选中表示时代的那个节点
        myChart.dispatchAction({
          type: 'select',
          seriesIndex: 0,
          name: timeList[timeIdx],
        })
      }, 0);
    }

    showChart(0)

    // 用户选中节点后，向父窗口post message
    function onSelect(params) {
      if (params.dataType === 'node') { // 用户选中节点触发的
        if (window.vuplex) {
          window.vuplex.postMessage({ type: 'select-id', message: dataForRender.nodes[params.dataIndexInside].id });
        } else {
          console.error('不存在window.vuplex!');
        }
      } else if (params.type === 'select') { // 程序里调用dispatchAction触发的，且type为select
        if (window.vuplex) {
          window.vuplex.postMessage({ type: 'select-id', message: dataForRender.nodes[0].id });
        } else {
          console.error('不存在window.vuplex!');
        }
      }
    }
    myChart.on('select', onSelect)

    window.addEventListener('resize', myChart.resize);

    // 切换时代
    window.changeTime = function (idx) {
      if (Number.isInteger(idx) && idx >= 0) {
        showChart(idx)
      } else {
        console.error('[page using echart] changeTime: invalid param!', idx);
      }
    }
  </script>
</body>
</html>