数据的可视化ECharts Gallery

20:11:45图表已生成
代码
let categories = [
        {
          itemStyle: {
            normal: {
              color: '#c1232b',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#27727b',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#fcce10',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#e87c25',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#b5c334',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#fe8463',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#9bca63',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#fad860',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#f3a43b',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#60c0dd',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#d7504b',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#c6e579',
            }
          }
        },{
          itemStyle: {
            normal: {
              color: '#f4e001',
            }
          }
        }
      ]
      // rgba(27, 227, 239, 0.94)        4 
       // rgba(27, 227, 239, 0.54)        3
         // rgba(27, 227, 239, 0.14)      2
       // rgba(27, 227, 239, 0.09)        1 
       // rgba(27, 227, 239, 0.06)         1
        // rgba(27, 227, 239, 0.01)        1
      const data = [
          {
            name: "学校背部",
            active: true,
            speed: '4',
            datas: [
              {value: 0},
              {value: 4},
              {value: 5},
              {value: 2},
              {value: 3},
              {value: 5},
              {value: 3},
              {value: 4},
              {value: 2},
              {value: 4},
              {value: 5},
              {value: 4},
              {value: 3},
            ],
            value: [16, 11],
            symbolSize: 60,
            color: 'rgba(27, 227, 239, 1)',// 1
            category: 0,
            itemStyle: null
          },
          {
            name: "南大门口",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 0},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 1},
              {value: 1},
            ],
            value: [3, 33],
            symbolSize: 30,
            color: 'rgba(27, 227, 239, 0.09)', // 4
            category: 1,
            itemStyle: null
          },
          {
            name: "生活区北门",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 1},
              {value: 0},
              {value: 2},
              {value: 3},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 2},
              {value: 1},
            ],
            value: [0, 60],
            symbolSize: 10,
            color: 'rgba(27, 227, 239, 0.01)',// 6
            category: 2,
            itemStyle: null
          },
          {
            name: "东门北",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 0},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 1},
              {value: 1},
            ],
            value: [10, 93],
            symbolSize: 30,
            color: 'rgba(27, 227, 239, 0.09)',// 4
            category: 3,
            itemStyle: null
          },
          {
            name: "图书馆南边",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 0},
              {value: 1},
              {value: 1},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 2},
              {value: 1},
            ],
            value: [26, 90],
            symbolSize: 20,
            color: 'rgba(27, 227, 239, 0.06)',// 5
            category: 4,
            itemStyle: null
          },
          {
            name: "学校正门",
            active: true,
            speed: '2',
            datas: [
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 0},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 3},
              {value: 1},
              {value: 2},
              {value: 1},
            ],
            value: [52, 100],
            symbolSize: 40,
            color: 'rgba(27, 227, 239, 0.14)', // 3
            category: 5,
            itemStyle: null
          },
          {
            name: "生活区侧门",
            active: true,
            speed: '4',
            datas: [
              {value: 4},
              {value: 3},
              {value: 2},
              {value: 3},
              {value: 4},
              {value: 3},
              {value: 0},
              {value: 5},
              {value: 4},
              {value: 2},
              {value: 5},
              {value: 3},
              {value: 3},
            ],
            value: [77, 93],
            symbolSize: 60,
            color: 'rgba(27, 227, 239, 0.94)',//1
            category: 6,
            itemStyle: null
          },
          {
            name: "一号教学楼",
            active: true,
            speed: '2',
            datas: [
              {value: 2},
              {value: 1},
              {value: 3},
              {value: 1},
              {value: 1},
              {value: 4},
              {value: 2},
              {value: 0},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 1},
            ],
            value: [95, 84],
            symbolSize: 40,
            color: 'rgba(27, 227, 239, 0.14)', //3
            category: 7,
            itemStyle: null
          },
          // {//重复部分
          //   name: "nnn",
          //   active: true,
          //   speed: '50',
          //   value: [90, 100],
          //   category: 8,
          // },
          {
            name: "教学区西门",
            active: true,
            speed: '3',
            datas: [
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 0},
              {value: 1},
              {value: 1},
              {value: 1},
              {value: 1},
            ],
            value: [99, 63],
            symbolSize: 50,
            color: 'rgba(27, 227, 239, 0.54)',// 2
            category: 8,
            itemStyle: null
          },
          // {//重复部分
          //   name: "bbbb",
          //   active: true,
          //   speed: '50',
          //   value: [90, 100],
          //   category: 10,
          // },
          {
            name: "教职工宿舍南",
            active: true,
            speed: '3',
            datas: [
              {value: 3},
              {value: 1},
              {value: 3},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 0},
              {value: 2},
              {value: 3},
              {value: 1},
            ],
            value: [100, 36],
            symbolSize: 50,
            color: 'rgba(27, 227, 239, 0.54)',// 2
            category: 9,
            itemStyle: null
          },
          {
            name: "综合楼北边",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 0},
              {value: 1},
              {value: 1},
            ],
            value: [90, 17],
            symbolSize: 10,
            color: 'rgba(27, 227, 239, 0.01)',// 6
            category: 10,
            itemStyle: null
          },
          {
            name: "五号教学楼南",
            active: true,
            speed: '1',
            datas: [
              {value: 4},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 2},
              {value: 0},
              {value: 1},
            ],
            value: [68, 11],
            symbolSize: 30,
            color: 'rgba(27, 227, 239, 0.09)',// 4
            category: 11, 
            itemStyle: null
          },
          {
            name: "生活区中心",
            active: true,
            speed: '1',
            datas: [
              {value: 2},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 3},
              {value: 2},
              {value: 2},
              {value: 1},
              {value: 1},
              {value: 2},
              {value: 1},
              {value: 0},
            ],
            value: [37, 4],
            symbolSize: 20,
            color: 'rgba(27, 227, 239, 0.06)',// 5
            category: 12,
            itemStyle: null
          },
          // {//重复部分
          //   name: "aaaa",
          //   active: true,
          //   speed: '50',
          //   value: [90, 100],
          //   category: 15,
          // },
      ]

      let linesData = [];
      let links = [];

      for(let i = 0;i < data.length ;i++) { // linesData
        for(let j = 0;j < data.length;j++) {
          // if(data[i].name == data[j].name){
          //   continue;
          // }
          if(data[i].name != data[j].name){
            linesData.push([
              {coord:data[i].value},{coord:data[j].value}
            ]);
          }
        }
      }

      for(let i = 0;i < data.length;i++) { // links
        for(let j = 0;j < data.length;j++) {
          // if(data[i].name == data[j].name){
          //   continue;
          // }
          if(data[i].name != data[j].name){
            links.push(
              {
                source: data[i].name,
                target: data[j].name,
                speed: parseInt(Math.random())+'kb/s',
                lineStyle: {
                  normal: {
                    curveness: 0.1,
                    width: data[i].datas[j].value,
                    
                    // width: 1,

                    // color:  i >= j ? (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    //           offset: 0,
                    //           color: 'red'
                    //         }, {
                    //           offset: 1,
                    //           color: data[i].color,
                    //           // color: 'rgba(27, 227, 239, 0.06)'
                    //         }])) : (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    //           offset: 0,
                    //           color: data[i].color,
                    //           // color: 'rgba(27, 227, 239, 0.06)'
                    //         }, {
                    //           offset: 1,
                    //           color: 'red'
                    //         }])),

                    color: data[i].color,
                  },
                }
              }
            )
          }

        }
      }
      
    let data_circle = [];
  data.forEach(function(item,index){
    data_circle[index] = {};
    data_circle[index]['name'] = item.name; 
    data_circle[index]['value'] = item.value;
    data_circle[index]['symbolSize'] = item.symbolSize;
    // data_circle[index]['color'] = item.color + '';
  })
      
option = {
        // color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua','red','blue','gray',],
        color: ['#c1232b','#27727b','#fcce10','#e87c25','#b5c334','#fe8463','#9bca63','#fad860','#f3a43b','#60c0dd','#d7504b','#c6e579','#f4e001'],
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        animationDuration: 1500,//////////////
        animationEasingUpdate: 'quinticInOut',///////////
          series: [{
              type: 'effectScatter',
              // type: 'graph',
              rippleEffect: {
                  period: 3,
                  brushType: 'fill',
                  scale: 2
              },
              color: 'rgba(27, 227, 239, 0.81)',
              // itemStyle: {
              //   shadowColor: 'green' 
              // },
              
              data: data_circle,//图上的各个点
              
          },{
            type: 'graph',
            roam: true,/////////////
            focusNodeAdjacency: true,///////////////
            itemStyle: {///////////////////////////
                normal: {
                    show: true,
                    borderColor: 'rgba(27, 227, 239, 0.5)',
                    borderWidth: 1,
                    shadowBlur: 8,
                    shadowColor: 'rgba(27, 227, 239, 0.5)'
                }
            },//////////////////////////
            // symbolSize: 14,
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            z: 3,
            // 每个球的字
            label: {
                normal: {
                    show: true,
                    position: 'bottom',
                    color: '#fff'
                }
            },
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize: 14,
            data: data,//图上的各个点
            links: links,//图上的连线
            categories: categories,
          }, {
            name: 'A',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            effect: {// feiji的特效配置
                show: false,
                period: 20,
                trailLength: 0,// 飞机带不带阴影
                // color: 'blue',//飞机的颜色
                symbol: "arrow",// 用什么飞机
                symbolSize: 5//飞机的大小
            },
            lineStyle: {
                normal: {
                    color: 'transparent',
                    curveness: 0.3//连线的弧度
                }
            },
            data: linesData//连线，// 连线具体数据，格式固定，通过处理13个点就可以
          }]
      }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
