Echarts在线免费图表

 
            const targetCoord = [50, 200]
const curveness = 0.2
const linesData = []


const centerItem = {
   name: "数据中心",
   value: targetCoord,
   symbolSize: 100,
   itemStyle: {
      normal: {
         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#157eff'
         }, {
            offset: 1,
            color: '#35c2ff'
         }]),
      }
   },
   label: {
      normal: {
         fontSize: '14'
      }
   },
}

const items = [{
   name: "上级平台1",
   category: 0,
   active: true,
   speed: '50kb/s',
   value: [0, 200]
}, {
   name: "上级平台2",
   category: 0,
   active: true,
   speed: '50kb/s',
   value: [0, 100]
}, {
   name: "子级平台3",
   category: 1,
   active: false,
   value: [100, 200]
}, {
   name: "子级平台4",
   active: false,
   category: 1,
   value: [100, 300]
}]

const data = items.concat([centerItem])

console.log(data)

items.forEach(function (el) {
   if (el.active) {
      linesData.push([{
         coord: el.value
      }, {
         coord: targetCoord
      }])
   } else {
      linesData.push([{
         coord: targetCoord
      }, {
         coord: el.value
      }])
   }
})

const links = items.map((el) => {
   return {
      source: el.active ? el.name : centerItem.name,
      target: el.active ? centerItem.name : el.name,
      speed: el.speed,
      lineStyle: {
         normal: {
            color: el.speed ? '#12b5d0' : '#ff0000',
            curveness: curveness,
         }
      },
   }
})

option = {
   xAxis: {
      show: false,
      type: 'value'
   },
   yAxis: {
      show: false,
      type: 'value'
   },
   series: [{
      type: 'graph',
      layout: 'none',
      coordinateSystem: 'cartesian2d',
      symbolSize: 60,
      z: 3,
      edgeLabel: {
         normal: {
            show: true,
            textStyle: {
               fontSize: 14
            },
            formatter: function (params) {
               let txt = ''
               if (params.data.speed !== undefined) {
                  txt = params.data.speed
               }
               return txt
            },
         }
      },
      label: {
         normal: {
            show: true,
            position: 'bottom',
            color: '#5e5e5e'
         }
      },
      itemStyle: {
         normal: {
            shadowColor: 'none'
         },
         emphasis: {

         }
      },
      lineStyle: {
         normal: {
            width: 2,
            shadowColor: 'none'
         },
      },
      edgeSymbol: ['none', 'arrow'],
      edgeSymbolSize: 8,
      data: data,
      links: links,
      categories: [{
         name: '流入中',
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#01acca'
               }, {
                  offset: 1,
                  color: '#5adbe7'
               }]),
            }
         },
         label: {
            normal: {
               fontSize: '14'
            }
         },
      }]
   }, {
      name: 'A',
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      z: 1,
      effect: {
         show: true,
         smooth: false,
         trailLength: 0,
         symbol: "arrow",
         color: 'rgba(55,155,255,0.5)',
         symbolSize: 12
      },
      lineStyle: {
         normal: {
            curveness: curveness
         }
      },
      data: linesData
   }]
}