视频教程： www.bilibili.com/video/BV1Ay…
安装
topology-vue
$ npm install topology-vue# OR$ yarn add topology-vue复制代码 使用组件 1. 导入组件
Typescript使用方式
github.com/le5le-com/t…
<template> <div class="home"> <topology /> </div></template><script lang="ts">import { Component, Vue } from 'vue-property-decorator';import topology from 'topology-vue';import 'topology-vue/topology-vue.css';@Component({ components: { topology, },})export default class Home extends Vue {}</script><style lang="scss">.home { height: calc(100vh - 80px);}</style>复制代码
JavaScript使用方式
github.com/le5le-com/t…
<template> <div class="home"> <!-- 使用topology组件 --> <topology /> </div></template><script>// 导入topology-vue组件import topology from "topology-vue";// 需要导入topology-vue.cssimport "topology-vue/topology-vue.css";export default { name: "Home", components: { topology, },};</script><style lang="scss">.home { height: 100vh;}</style>复制代码 2. 加载相关字体文件 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" rel="external nofollow" href="<%= BASE_URL %>favicon.ico"> <!-- 通用字体图标 --> <link rel="external nofollow" href="//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css" rel="stylesheet" /> <!-- 通用基础图形库 --> <link rel="external nofollow" href="//at.alicdn.com/t/font_1331132_qhyav2o6mp.css" rel="stylesheet"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 需要用到的工具js --> <script src="http://topology.le5le.com/js/canvas2svg.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> </body></html>复制代码 3. 加载相关js文件 <!-- 需要用到的工具js --><script src="http://topology.le5le.com/js/canvas2svg.js"></script><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>复制代码 页面效果
底层核心库开源
topology-vue基于开源核心库开发的上层应用
核心库GIthub： https://github.com/le5le-com/topology
免费在线使用：http://topology.le5le.com