vue+ vis 编写星球图谱

vis.js

vis.js是一个前端可视化框架，官方文档位置：http://visjs.org/docs/network/

星球案例

vue中使用vis.js

安装

style 中有使用 less，所以需要安装一下；

   npm install vis --save

   npm install less less-loader --save 

在需要使用的组件内引入vis

   import vis from 'vis'

定义dom

  <template>
     <div>
        <div id="mynetwork"></div>
     </div>
  </template>

容器渲染

  <script>
     import vis from "vis";
     export default {
             data() {
                 return {
                    nodes : [
			            { id: 1, 
			              label: "This is a\nsingle-font label",
			              x: -120, 
			              y: 0 ,
			              image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg',
			              size:60,
			              title:'space',  
                        },
			            {
			              id: 2,
			              font: { multi: true },
			              label: "<b>This</b> is a\n<i>default</i> <b><i>multi-</i>font</b> <code>label</code>",
			              x: 220,
			              y: 0, 
			              size:40,
			              image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596542548144&di=362f2b36cbfe93d4f04a5b9b77e56cf0&imgtype=0&src=http%3A%2F%2Fyzhtml01.book118.com%2F2016%2F11%2F26%2F06%2F45267770%2F1.files%2Ffile0001.png',
			              title:'earth',  
			            },
			            {
			              id: 3,
			              font: { multi: "html", size: 20 },
			              label: "<b>This</b> is an\n<i>html</i> <b><i>multi-</i>font</b> <code>label</code>",
			              x: 560,
			              y: 120,
			              image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1924443930,1818184200&fm=26&gp=0.jpg',
			              title:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1924443930,1818184200&fm=26&gp=0.jpg',  
			            },
			            {
			              id: 4,
			              font: { multi: "md", face: "georgia" },
			              label: "markdown",
			              x: 560,
			              y: 0,
			              image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2299626866,2306729894&fm=26&gp=0.jpg',
			              title:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2299626866,2306729894&fm=26&gp=0.jpg',  
			            },
			            {
			              id: 5,
			              font: { multi: "md", face: "georgia", },
			              label: "*This* is a\n_markdown_ *_multi-_ font* `label`",
			              x: 560,
			              y: -120,
			              image:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3443312632,4280189108&fm=26&gp=0.jpg',   
			              title:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3443312632,4280189108&fm=26&gp=0.jpg',        
			            },
			        ],
		         edges : [
			            { from: 1, to: 2, label: "single to default" },
			            { from: 2, to: 3, font: { multi: true }, label: "default to <b>html</b>" },
			            { from: 2, to: 4, font: { multi: "md" }, label: "*html* to _md_" },
			            { from: 2, to: 5, font: { multi: "md" }, label: "*html* to _md_" },
			        ],
                 options: {},
             }
         },

          mounted(){
			     this.init();
		  },

         methods:{
			    init(){
			          let _this = this;
			          var container = document.getElementById("mynetwork");
			          var data = {
			            nodes: _this.nodes,
			            edges: _this.edges,
			          };		
			          _this.options = {
			            edges: {
			                    width: 1,
			                    length: 60,
			                    shadow: true,
			                    smooth: {
			                      enabled: false 
			                    },
			                    arrows: { 
			                      to: {
			                        enabled: true,
			                        scaleFactor: 1,  
			                        type: "arrow"
			                      },
			                     }, 
			                    color: {
			                      color: "#bc68e6",
			                      highlight: "yellow",
			                      hover: "#1fe1c6",
			                      inherit: "from",
			                      opacity: 1.0
			                    },
			                    font: {
			                      color: 'yellow',
			                      size: 14, 
			                      face: 'arial',
			                      background: 'white',
			                      strokeWidth: 10,
			                      strokeColor: 'rgb(112, 184, 240)',
			                      align: 'horizontal',
			                      multi: false,
			                      vadjust: 0,
			                      bold: {
			                        color: "green",
			                      },
			                   },
			            },
			            nodes: {
			              shape: 'circularImage',
			              font: {
			                bold: {
			                  color: "red",
			                },
			              },
			            },
			            physics: {
			              enabled: false,
			            },
			            interaction: {
			              hover: true,
			              dragNodes: false, //是否能拖动节点
			              dragView: true, //是否能拖动画布
			              hover: true, //鼠标移过后加粗该节点和连接线
			              multiselect: true, //按 ctrl 多选
			              selectable: true, //是否可以点击选择
			              selectConnectedEdges: true, //选择节点后是否显示连接线
			              hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
			              zoomView: true //是否能缩放画布
			            },
			
			          };
			       _this.network = new vis.Network(container, data,  _this.options);
			    }
			  }
     };
  </script>

自定义样式

  <style lang="less">
		#mynetwork {
			  width: 1000px;
			  height: 400px;
			  border: 1px solid lightgray;
			  canvas{
			    cursor: pointer;
			  }
		}
  </style>