element+echarts+nwjs开发单个应用程序的流程图教程

qq_38963694

已于 2024-01-15 15:06:29 修改

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue nwjs

于 2019-11-18 11:56:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38963694/article/details/103119570

教程程序使用vue+html5的静态开发

程序直接使用html引用vue.js的方式开发，不依赖node.js和nginx等前端服务器来启动应用，保证程序的效率和降低资源占用成本。

引入echarts，画出graph关系图

教程里面的流程图使用echarts的graph关系图，如下引入echarts.js，然后配置好对应的配置项，即可画出流程图。

<head>
    <!-- 引入 echarts.js -->
    <script src="../../js/echarts/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:800px;"></div>
</body>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
    paramsName = params.name;
    popoverTitle = '“'+params.name+'”操作选择';
    if(params.dataType == "node") {
        currentGridData = tempGridData[params.name];
    }
    if(params.dataType == "edge") {
        currentGridData = tempGridData[params.data.source]==undefined?[]:tempGridData[params.data.source];
        curr