echarts 关系图graph

朴灿烈づ我的快乐病毒、 2021-07-25 01:49 1557阅读 1赞

1、配置数据类型
    	data:[
    		{
    			name:'节点名称',
    			value:'节点值'
    			x:节点坐标,	在不指定的时候需要指明layout属性选择布局方式。
    			y:节点坐标,
    			symbolSize: 80,
                draggable: true, 	节点是否可拖拽，只在使用力引导布局的时候有用。
                itemStyle: {},
                categrory:'在categories中设置的名称,用于图例等分类'
    		}
    	]
    
    2、配置series
    	series:[{
    		 type: 'graph',
             layout: 'force',
    		    'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
    		    'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular
    		    'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force
    
             force: {	力引导布局相关的配置项
                 repulsion: 30,	节点之间的斥力因子。
                 edgeLength: 10	边的两个节点之间的距离，这个距离也会受 repulsion。
             },
             roam: true,	是否开启鼠标缩放和平移漫游
             label:{},
             categories:[{name:'图例名称',itemStyle:{color:图例颜色}},{name:'图例名称',itemStyle:{color:图例颜色}}]
             links:[
    			{
    			  source: "哪个节点的name",
                  target: "连接到哪个节点的name"
    			}
    		]
    	}]
    	
    3、设置图例 
    	legend:{}  设置了categories和category后,通过categories控制图例颜色

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]

代码示例:  
效果一:

let option = { 
    
         backgroundColor:'#040f23',
         tooltip: { },
         animationDurationUpdate: function(idx) { 
             // 越往后的数据延迟越大
             return idx * 100;
         },
         animationEasingUpdate: 'bounceIn',
         color: ['#fff', '#fff', '#fff'],
         series: [{ 
             type: 'graph',
             layout: 'force',
             force: { 
                 repulsion: 30,
                 edgeLength: 10
             },
             roam: true,
             label: { 
                 normal: { 
                     show: true,
                     position: 'inside',
                     formatter: '{c}' + '\n\n' + '{b}',
                     fontSize: 16,
                     fontStyle: '400',
                 }
             },
             data: [{ 
                 "name": "一级",
                 "value": "NO.2",
                 x: 65,
                 y: 6,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#ff8400",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#ff8400",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "二级",
                 "value": "NO.3",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#03fc62",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#03fc62",
                         "color": "#11213b"
                     }
                 },
    
             },
             { 
                 "name": "N级",
                 "value": "NO.N",
                 x: 0,
                 y: 0,
                 "symbolSize": 40,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#03fc62",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#03fc62",
                         "color": "#11213b"
                     }
                 },
    
             },
             
             { 
                 "name": "三级",
                 "value": "NO.4",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#aa61b2",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#aa61b2",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "总集",
                 "value": 'NO.1',
                 "symbolSize": 120,
                 x: 0,
                 y: 0,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#0a95e6",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#0a95e6",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "四级",
                 "value": "NO.5",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#00fff7",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#00fff7",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "五级",
                 "value": "NO.6",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#f06467",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#f06467",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "六级",
                 "value": "NO.7",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#f06467",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#f06467",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "七级",
                 "value": "NO.8",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#03fc62",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#03fc62",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "八级",
                 "value": "NO.9",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#00fff7",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#00fff7",
                         "color": "#11213b"
                     }
                 }
             }, { 
                 "name": "九级",
                 "value": "NO.10",
                 x: 0,
                 y: 0,
                 "symbolSize": 80,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#f06467",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#f06467",
                         "color": "#11213b"
                     }
                 }
             }],
             links: [{ 
                     "source": "一级",
                     "target": "总集"
                 },
                 { 
                     "source": "二级",
                     "target": "总集"
                 },
                 { 
                     "source": "三级",
                     "target": "总集"
                 },
                 { 
                     "source": "四级",
                     "target": "总集"
                 },
                 { 
                     "source": "五级",
                     "target": "总集"
                 },
                 { 
                     "source": "六级",
                     "target": "总集"
                 }, { 
                     "source": "七级",
                     "target": "总集"
                 }, { 
                     "source": "八级",
                     "target": "总集"
                 }, { 
                     "source": "九级",
                     "target": "总集"
                 },
                  { 
                     "source": "N级",
                     "target": "四级"
                 }
             ]
         }]
     }

效果二:

<template>
       
       <div class='s-c'>
         <div class='s-chart' ref='sell'>
           
         </div>
         <div class='s-i'>
           <ul v-if='timeArr.length'>
             <li @click="showTab">{ { time}} ↓</li>
             <div v-show='show' class='s-t'>
              <li v-for="(item,index) in timeList" @click='tabChange(index,item)' :key="index">
                { { item}}
              </li>
             </div>
           </ul>
         </div>
       </div>
    </template>
    
    <script>
    
    export default { 
      props:['theme'],
      name:'sell',
      data(){ 
        return{ 
          data:[],
          time:'2020年2月28日',
          timeArr:[],
          currentIndex:0,
          show:false
          
        }
      },
       watch:{ 
          theme(v)
          { 
              console.log(v);
              this.myMap.dispose();
              this._initChart();
    
              this._resizeCode();
              
          }
      },
      computed:
      { 
        timeList()
        { 
         return  this.timeArr.filter((item,index)=>{ 
            if(item!=this.time)
            { 
              return true;
            }
          })
          // return 
        }
      },
      mounted()
      { 
        this._getData();
    
        //适配化配置调用
        this._resize();
    
      },
      //组件销毁前卸载监听
      beforeDestroy()
      { 
        window.onresize=null;
       
      },
      methods:{ 
        async _getData()
        { 
          let res=await this.$axios.get('/data/fengxian.json');
          let data=JSON.stringify(res.data);
          data=JSON.parse(data);
          this.data=data;
          
          this.data.forEach((item,index)=>{ 
            if(this.timeArr.indexOf(item["发布时间"])==-1)
            { 
              this.timeArr.push(item["发布时间"]);
            }
          }); 
    
          this._initChart();  
          
        },
        _initChart()
        { 
          this.myMap = this.$echarts.init(this.$refs.sell,'chalk');
    
          //完成除数据和宽度适配以外的一些初始配置
          let option={ 
            title:{ 
              text:'| 四川省成都市风险图',
              left: 20,
              top: 20,
              textStyle:{ 
                color:'white'
              }
          
            },
            animationDurationUpdate: function(idx) { 
                // 越往后的数据延迟越大
                return idx * 100;
            },
            animationEasingUpdate: 'bounceIn',
            series:[
              { 
                type: 'graph',
                layout: 'force',
                force: { 
                    repulsion: 30,
                    edgeLength: 10
                },
                roam: true,
                label: { 
                 normal: { 
                     show: true,
                     position: 'inside',
                     formatter: '{c}',
                     fontSize: 12,
                     fontStyle: '400',
                 }
                },
                         links: [{ 
                     "source": "1",
                     "target": "总集"
                 },
                 { 
                     "source": "2",
                     "target": "总集"
                 },
                 { 
                     "source": "3",
                     "target": "总集"
                 },
                 { 
                     "source": "4",
                     "target": "总集"
                 },
                 { 
                     "source": "5",
                     "target": "总集"
                 },
                 { 
                     "source": "6",
                     "target": "总集"
                 }, { 
                     "source": "7",
                     "target": "总集"
                 }, { 
                     "source": "8",
                     "target": "总集"
                 }, { 
                     "source": "9",
                     "target": "总集"
                 }, { 
                     "source": "10",
                     "target": "总集"
                 },{ 
                     "source": "11",
                     "target": "总集"
                 },
                 { 
                     "source": "12",
                     "target": "总集"
                 },
                 { 
                     "source": "13",
                     "target": "总集"
                 },
                 { 
                     "source": "14",
                     "target": "总集"
                 },
                 { 
                     "source": "15",
                     "target": "总集"
                 },
                 { 
                     "source": "16",
                     "target": "总集"
                 }, { 
                     "source": "17",
                     "target": "总集"
                 }, { 
                     "source": "18",
                     "target": "总集"
                 }, { 
                     "source": "19",
                     "target": "总集"
                 }, { 
                     "source": "20",
                     "target": "总集"
                 }
             ]
              }
            ],
          }
    
          this.myMap.setOption(option);
          this._updateChart(this.time)
    
        },
        //根据数据配置图表
        _updateChart(date)
        { 
          //根据当前页数获取对应数据
          let sdata=this._handleData(date);
    
          let option = { 
            legend:{ show:true},
            series: [{ 
              data: sdata,
              categories:[{ name:'低风险',itemStyle:{ color:'#03fc62'}},{ name:'中风险',itemStyle:{ color:'#00fff7'}}],
            }]
          }
            this.myMap.setOption(option);
    
        },
    
        _handleData(date)
        { 
          // console.log(this.timeList())
          let sdata=[];
          let sdata2=[];
    
    
          this.data.forEach((item,index)=>{ 
            
            if(item["发布时间"]==date)
            { 
    
              if(item["级别"]=='低风险')
              { 
               
                sdata=item['区'].map((address,index)=>{ 
                  if(index==0)
                  { 
                    return{ 
                        "name": index+1+'',
                        "value": address,
                        x: 75,
                        y: 6,
                        "symbolSize": 55,
                        "draggable": true,
                        category:'低风险',
                        "itemStyle": { 
                            "normal": { 
                                "borderColor": "#03fc62",
                                "borderWidth": 4,
                                "shadowBlur": 20,
                                "shadowColor": "#03fc62",
                                "color": "#11213b"
                            }
                        }
                    }
                  }
                  return{ 
                        "name": index+1+'',
                        "value": address,
                        "symbolSize": 55,
                        category:'低风险',
                        x: 0,
                        y: 0,
                        "draggable": true,
                        "itemStyle": { 
                            "normal": { 
                                "borderColor": "#03fc62",
                                "borderWidth": 4,
                                "shadowBlur": 20,
                                "shadowColor": "#03fc62",
                                "color": "#11213b"
                            }
                        }
                  }
                })
                // len=sdata.length;
              }else if(item["级别"]=='中风险'){ 
               
                sdata2=item['区'].map((address,index)=>{ 
                  return{ 
                        "name": index+1+'',
                        "value": address,
                        "symbolSize": 55,
                        x: 0,
                        y: 0,
                        "draggable": true,
                        category:'中风险',
                        "itemStyle": { 
                            "normal": { 
                                "borderColor": "#00fff7",
                                "borderWidth": 4,
                                "shadowBlur": 20,
                                "shadowColor": "#00fff7",
                                "color": "#11213b"
                            }
                        }
                    
                  }
                })
    
              }
            }
          })
          sdata=sdata.concat(sdata2);
          for(let i=20-sdata2.length;i<20;i++)
          { 
            sdata[i].name=i+1+'';
          }
          sdata.push({ 
                 "name": "总集",
                 "value": '成都市',
                 "symbolSize": 80,
                 x: 0,
                 y: 0,
                 "draggable": true,
                 "itemStyle": { 
                     "normal": { 
                         "borderColor": "#0a95e6",
                         "borderWidth": 4,
                         "shadowBlur": 20,
                         "shadowColor": "#0a95e6",
                         "color": "#11213b"
                     }
                 }
             });
          
          return sdata;
        },
        showTab()
        { 
          this.show=!this.show;
        },
        tabChange(index,time)
        { 
          this.time=time;
          this.show=!this.show;
    
          this._updateChart(this.time);
        },
        //适配监听，整体图表,已经图表中的元素适配
        _resize()
        { 
          //第一次打开和刷新不改变窗口时,也进行适配
          if(this.first)
          { 
            this._resizeCode();
            this.first=false;
          }
          //标题大小适配,根据容器大小分成100份,根据份数来试
          window.onresize=()=>{ 
            this._resizeCode();
          }
        },
        //适配代码
        _resizeCode()
        { 
            let container=this.$refs.sell.offsetWidth;
            let titleFontSize=container/100*3.6;
    
            //适配图表
            let option={ 
              title:{ 
                textStyle:{ 
                  fontSize:titleFontSize
                }
              },
              tooltip:{ 
                axisPointer:{ 
                  lineStyle:{ 
                    width:titleFontSize
                  }
                }
              },
              series:{ 
                barWidth:titleFontSize,
                itemStyle: { 
                  barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
                }
    
              }
            }
            this.myMap.setOption(option);
            this.myMap.resize();
        },
        //鼠标监听,鼠标放上停止,移开播放
      }
    
    }
    </script>
    
    <style lang='less' scoped>
    .s-c{ 
        width: 100%;
        height:100%;
        position: relative;
        .s-chart{ 
          width: 100%;
          height:100%;
        }
        .s-i{ 
          position: absolute;
          top:40px;
          right: 20px;
          padding: 5px 10px;
          user-select: none;
          .s-t{ 
            background-color: #222733;
          }
          >ul{ 
            list-style: none;
            li:hover{ 
              background-color:#397080;
              cursor: pointer;
            }
          }
        }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/74cbfe6bea27498db67c1c748376fbf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/6cdadcb4789f410f8449c3800de8b6d5.png