会议密集问题ECharts Gallery

20:11:45图表已生成
代码
var renderMachineRoomData = []
var renderConfRoomData = []
var confToMachieRoomLink = []

var iconPath={
          pathMachineRoom: 'path://M77.1,81.7v824h254v-824H77.1z M276.8,396.3h-148v-38h148V396.3z M276.8,474.3h-148v-38h148V474.3z M276.8,318.3h-148v-38\n' +
            '\th148V318.3z M276.8,166.3h-148v-38h148V166.3z M276.8,244.3h-148v-38h148V244.3z M378.1,81.7v824h254v-824H378.1z M577.8,396.3h-148\n' +
            '\tv-38h148V396.3z M577.8,474.3h-148v-38h148V474.3z M577.8,318.3h-148v-38h148V318.3z M577.8,166.3h-148v-38h148V166.3z M577.8,244.3\n' +
            '\th-148v-38h148V244.3z M679.1,81.7v824h254v-824H679.1z M878.8,396.3h-148v-38h148V396.3z M878.8,474.3h-148v-38h148V474.3z\n' +
            '\t M878.8,318.3h-148v-38h148V318.3z M878.8,166.3h-148v-38h148V166.3z M878.8,244.3h-148v-38h148V244.3z',

          pathConfRoom: 'path://M934,583.4c0,35.8-18.2,70.1-51.3,96.4c-10.8,8.6-26.5,6.8-35.1-4c-8.6-10.8-6.8-26.5,4-35.1\n' +
            '\tc14.8-11.7,32.4-31.2,32.4-57.2c0-22.6-13.2-44.4-37.2-61.5c-26.6-18.9-62.4-29.3-100.8-29.3H270.6c-38.4,0-74.3,10.4-100.9,29.3\n' +
            '\tc-24,17-37.2,38.9-37.2,61.5c0,26,17.6,45.4,32.5,57.2c10.8,8.6,12.6,24.3,4,35.1c-4.9,6.2-12.2,9.5-19.6,9.5\n' +
            '\tc-5.4,0-10.9-1.8-15.5-5.4c-33.1-26.3-51.4-60.5-51.4-96.4c0-39.2,20.7-75.6,58.3-102.2c35-24.8,81.1-38.5,129.8-38.5h101.1\n' +
            '\tc-14.5-14.2-16.5-56.2-0.7-84.5c9.9-17.6,42.5-55.5,71.4-55.5c33.9,0,49.6,35.5,63.4,35.5c13.8,0,29.5-35.5,63.4-35.5\n' +
            '\tc28.9,0,61.6,37.9,71.4,55.5c15.8,28.3,13.8,70.3-0.7,84.5h106c48.7,0,94.8,13.7,129.8,38.5C913.3,507.8,934,544.1,934,583.4z\n' +
            '\t M534.8,665.7h-53.2c-13.8,0-25,11.2-25,25s11.2,25,25,25h53.2c13.8,0,25-11.2,25-25S548.6,665.7,534.8,665.7z M505.7,267.4\n' +
            '\tc39,0,70.6-31.6,70.6-70.6c0-39-31.6-70.7-70.6-70.7c-39,0-70.7,31.7-70.7,70.7C435.1,235.8,466.7,267.4,505.7,267.4z M229.5,595.3\n' +
            '\tc0-39,31.6-70.7,70.7-70.7c39,0,70.6,31.7,70.6,70.7S339.2,666,300.2,666C261.1,666,229.5,634.4,229.5,595.3z M423,846.1H177.5\n' +
            '\tc-24.1,0-31.3-54.9-12-89.4c9.9-17.6,42.5-55.5,71.4-55.5c33.9,0,49.6,35.5,63.4,35.5c13.8,0,29.5-35.5,63.4-35.5\n' +
            '\tc28.9,0,61.6,37.9,71.4,55.5C454.3,791.2,447.1,846.1,423,846.1z M648,595.3c0-39,31.6-70.7,70.7-70.7c39,0,70.6,31.7,70.6,70.7\n' +
            '\tS757.7,666,718.6,666C679.6,666,648,634.4,648,595.3z M841.5,846.1H595.9c-24.1,0-31.3-54.9-12-89.4c9.9-17.6,42.5-55.5,71.4-55.5\n' +
            '\tc33.9,0,49.6,35.5,63.4,35.5c13.8,0,29.5-35.5,63.4-35.5c28.9,0,61.6,37.9,71.4,55.5C872.8,791.2,865.6,846.1,841.5,846.1z',
        };
        
// 模拟获取机房或会议数据
var getData = function(lowerValue, upperValue, name) {
    let data = []
    let count = Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    for(let i=0;i<count;i++){
        data.push(name + i)
    }
    return data
  };


/*机房平均平均分布生成坐标函数
   * @method calculationMRCoordinate
   * @param {Number} index 第几个数据
   * @param {Number} total 总共多少数据
   * @param {Number} range 点与点之间的间距
   * @return {Array} 返回生成的数据
    */
var calculationMRCoordinate = function(index, total, range) {
    let x = null
    let y = null

    let baseNum = Math.ceil(Math.sqrt(total))

    let tempX = index % baseNum
    let tempY = parseInt(index / baseNum)

    x = tempX * range + 0
    y = tempY * range + 0

    // 如果是最后一排且数量小于baseNum，重新计算range X
    if ((total % baseNum) > 0 && tempY === parseInt(total / baseNum)) {
      range = range * (baseNum - 1) / ((total % baseNum) + 1)
      x = tempX * range + 0 + range
    }

    return [x, y]
  };
  
  
/*会议围绕中心点圆形分布生成坐标函数
   * @method calculationCRCoordinate
   * @param {Array} center 围绕的圆心
   * @param {Number} radius 圆的半径
   * @param {Number} index 第几个数据
   * @param {Number} total 总共多少数据
   * @param {Number} count 一个圆上显示多少个
   * @param {Number} range 圆与圆之间的间距
   * @return {Array} 返回生成的数据
  */
var calculationCRCoordinate = function(center, radius, index, total, count, range) {
    let x = null
    let y = null

    let baseNum = parseInt(index / count)
    let offset = baseNum % 2 === 0 ? 0 : (360 / count) / 2

    let hudu = (2 * Math.PI / 360) * ((360 / count) * parseInt(index % count) + offset)

    radius = radius + baseNum * range

    x = center[0] + Math.sin(hudu) * radius
    y = center[1] + Math.cos(hudu) * radius

    return [x, y]
  };
  
// 渲染机房数据
var renderDataMachineRoom=function(){
    let machineRoomData = getData(1,10,'机房')
    let machineRoomLen = machineRoomData.length
    let temInteractive = []
    renderMachineRoomData = machineRoomData.map((item, index) => {
      let coordinate = calculationMRCoordinate(index, machineRoomLen, 110)
      item.name = item
      let tempD = {
        name: item,
        x: coordinate[0],
        y: coordinate[1],
        // fixed:true,
        symbolKeepAspect: true,
        category: '机房',
        value: item,
        symbol: iconPath.pathMachineRoom,
        symbolSize: 30,
      }
      return tempD
    })
};
// 渲染会议数据
var renderDataConfRoom=function(){
    let tempDataConf = []
    let tempDataConfLink = []
    if (renderMachineRoomData.length > 0) {
      //遍历机房
      for (let machineRoom of renderMachineRoomData) {
        let confName = machineRoom.name + '下会议'
        let confRoomData = getData(0,20,confName)
        let confRoomLen = confRoomData.length
        if (confRoomLen > 0) {
          let center = [machineRoom.x, machineRoom.y]
          let radius = 50 / (Math.ceil(confRoomLen / 6) + 1)
          let count = confRoomLen > 6 ? 6 : confRoomLen
          //遍历会议
          confRoomData.forEach((confItem, confIndex) => {
            // center,radius,index,total,count,range
            let coordinate = calculationCRCoordinate(center, radius, confIndex, confRoomLen, count, radius)
            let tempD = {
              name: confItem,
              x: coordinate[0],
              y: coordinate[1],
              // fixed:true,
              category: '会议',
              value: confItem,
              symbolKeepAspect: true,
              symbol: iconPath.pathConfRoom,
              symbolSize: 35,
            }
            tempDataConf.push(tempD)

            let tempDLink = {
              source: confItem,
              target: machineRoom.name,
              value: {
                s: confItem,
                t: machineRoom,
                type: 'confToMachine'
              }
            }
            tempDataConfLink.push(tempDLink)
          });
          //遍历会议 end
        };
      };
      //遍历机房 end
    };

    renderConfRoomData = tempDataConf
    confToMachieRoomLink = tempDataConfLink
};

renderDataMachineRoom()
renderDataConfRoom()
var seriesData = [].concat(renderMachineRoomData,renderConfRoomData)
var link = confToMachieRoomLink
console.log(seriesData,link)
option = {
          backgroundColor: '#232629',
          scaleLimit: {
            min: 0.7,
          },
          tooltip: {
            padding: [18, 14],
            backgroundColor: '#141414',
            borderColor: '#383b3c',
            borderWidth: 1,
            textStyle: {
              color: '#9ca9b1',
            },
            formatter: (params,) => {
              return 'aaaa'
            },
          },
          series: [
            {
              name: 'ConferenceTopology',
              type: 'graph',
              layout: 'none',
              data: seriesData,
              links: link,
              roam: true,
              focusNodeAdjacency: true,
              animationDelay: 1000,
              itemStyle: {
                normal: {
                  color: (params) => {
                    // let index = params.data.value.status ? params.data.value.status : 0
                    // return this.iconColor[index]
                    return '#25a5c5'
                  },
                  opacity: 1,
                }
              },
              label: {
                show: true,
                position: 'top',
                formatter: (params) => {
                  return params.value.name
                }
              },
              lineStyle: {
                color: '#25a5c5',
                width: 2,
                curveness: 0.3
              },
              emphasis: {
                lineStyle: {
                  width: 3
                },
              },
            },
          ]
        };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
