echarts网络拓扑图动态流程图

networkMap V1.0

直接下载打包代码:
https://download.csdn.net/download/qq_32442967/11258784

样式:
在这里插入图片描述


可直接粘贴下面代码,修改js和图片路径即可实现。 需要引入js
echarts.min.js     (必须) 
purple-passion.js     echarts主题文件(非必须但样式会改变)
networkMap.js     页面js(必须)

页面 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts</title>
	</head>
	<body>
		<div id="chart" style="height: 500px;width: 100%;">
		</div>
	</body>
</html>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/purple-passion.js"></script>
<script type="text/javascript" src="js/networkMap.js"></script>

networkMap.js

//中间数据
var nodesM = [{
    name: '服务器'
}];
//上下图表数据
var nodes = [{
    name: '采集设备01',
    state: '1'
},
    {
        name: '采集设备002',
        state: '1'
    },
    {
        name: '采集设备02',
        state: '1'
    },
    {
        name: '采集设备1',
        state: '1'
    },
    {
        name: '采集设备2',
        state: '1'
    },
    {
        name: '采集设备3',
        state: '1'
    },
    {
        name: '采集设备4',
        state: '1'
    },
    {
        name: '采集设备5',
        state: '0'
    },
    {
        name: '采集设备6',
        state: '1'
    },
    {
        name: '采集设备7',
        state: '1'
    },
    {
        name: '采集设备8',
        state: '0'
    },
    {
        name: '采集设备9',
        state: '1'
    },
    {
        name: '采集设备10',
        state: '1'
    },
    {
        name: '采集设备11',
        state: '1'
    },
    {
        name: '采集设备12',
        state: '1'
    },
    {
        name: '采集设备13',
        state: '0'
    },
    {
        name: '采集设备14',
        state: '1'
    },
    {
        name: '采集设备15',
        state: '1'
    },
    {
        name: '采集设备16',
        state: '1'
    },
    {
        name: '采集设备17',
        state: '1'
    }
];

var charts = {
    nodes: [],
    links: [],
    linesData: []
};
var x = 0;
var y = 1;
var dataMap = new Map();
var aValue = [];
for (var j = 0; j < nodes.length; j++) {
    if (j % 2 == 0) { //偶数
        aValue = [x, y];
    } else {
        aValue = [x, y - 2];
        x += 2;
    }
    var node = {
        name: nodes[j].name,
        value: aValue,
        symbolSize: 40,
        // symbol: 'image://images/' + nodes[j].img,
        symbol: 'image://images/chart/bd1.png',
        itemStyle: {
            normal: {
                color: '#12b5d0',
                fontSize: 12,
                fontWeight: 'normal'
            }
        }
    };
    dataMap.set(nodes[j].name, aValue);
    charts.nodes.push(node);
}
//中间数据显示
for (var k = 0; k < nodesM.length; k++) {
    var node = {
        name: nodesM[k].name,
        value: [x / 2 + k - 1, y - 1],
        symbolSize: 100,
        // symbol: 'image://images/' + nodesM[k].img
        symbol: 'image://images/chart/bgm.png'
    };
    dataMap.set(nodesM[k].name, [x / 2 + k - 1, y - 1]);
    charts.nodes.push(node)
}

//画线
var labelName = '';
for (var i = 0; i < nodes.length; i++) {
    //通过传输状态state 显示传输文字提示
    if (nodes[i].state === '1') {
        labelName = '数据传输中'
    } else {
        labelName = '暂停传输'
    }
    var link = {
        source: nodes[i].name,
        target: nodesM[0].name,
        label: {
            normal: {
                show: true,
                formatter: labelName,
                color: '#ed46a2',
                fontSize: 12,
                fontWeight: 'normal'
            }
        },
        lineStyle: {
            normal: {
                color: '#ed46a2',
                width: .5
            }
        }
    };
    charts.links.push(link);

    //判断传输状态1 传输动效改变线条颜色
    if (nodes[i].state === '1') {
        link.lineStyle.normal.color = '#27b0fe';
        link.label.normal.color = '#27b0fe';
        var lines = [{
            coord: dataMap.get(nodes[i].name)
        }, {
            coord: dataMap.get(nodesM[0].name)
        }];
        charts.linesData.push(lines)
    }
}

option = {
    title: {
        text: '采集拓扑图'
    },
//  backgroundColor: "#0e1735",
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 50,
        label: {
            normal: {
                show: true,
                position: 'bottom',
                color: '#ffffff'
            }
        },
        lineStyle: {
            normal: {
                shadowColor: 'none',
                opacity: 1, //尾迹线条透明度
                curveness: .1 //尾迹线条曲直度
            }

        },
        edgeSymbolSize: 8,
        data: charts.nodes,
        links: charts.links,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: function (item) {
                        return item.data.name
                    }
                }
            }
        }
    }, {
        name: 'A',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        effect: {
            show: true,
            period: 4, //箭头指向速度,值越小速度越快
            trailLength: 0.02,
            symbol: 'pin',
            color: '#ffaa5f',
            symbolSize: 10

        },
        lineStyle: {
            color: '#fff',
            curveness: .1 //尾迹线条曲直度
        },
        data: charts.linesData
    }]
};


/*采集拓扑图 chart*/
var dom = document.getElementById("chart");
var myChartNM = echarts.init(dom, 'purple-passion');
myChartNM.setOption(option);
window.onresize = myChartNM.resize;

//添加点击事件
myChartNM.on('click', function (params) {
    // 弹窗打印数据的名称
    if (params.dataType == "node") {
        alert("节点名称:" + params.name);
    } else if (params.dataType == "edge") {
        alert("from:" + params.data.source + "=====to:" + params.data.target);
    }
});

purple-passion.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    echarts.registerTheme('purple-passion', {
        "color": [
            "#27b0fe",
            "#6818cf",
            "#ffaa5f",
            "#ed46a2",
            "#2f66f6",
            "#2d8dfe"
        ],
        // "backgroundColor": "#0b122c",
        "backgroundColor": "#0e1735",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#ffffff"
            },
            "subtextStyle": {
                "color": "#cccccc"
            }
        },
        "line": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "3"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true
        },
        "radar": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "3"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true
        },
        "bar": {
            "itemStyle": {
                "normal": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                },
                "emphasis": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            }
        },
        "pie": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "scatter": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "boxplot": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "parallel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "sankey": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "funnel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "gauge": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "candlestick": {
            "itemStyle": {
                "normal": {
                    "color": "#e098c7",
                    "color0": "transparent",
                    "borderColor": "#e098c7",
                    "borderColor0": "#8fd3e8",
                    "borderWidth": "2"
                }
            }
        },
        "graph": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "color": "#aaa"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true,
            "color": [
                "#27b0fe",
                "#ed46a2",
                "#2f66f6",
                "#ffaa5f",
                "#2d8dfe",
                "#6818cf"
            ],
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        },
        "map": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#eee",
                    "borderColor": "#444",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(224,152,199,1)",
                    "borderColor": "#444",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(255,255,255)"
                    }
                }
            }
        },
        "geo": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#eee",
                    "borderColor": "#444",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(224,152,199,1)",
                    "borderColor": "#444",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(255,255,255)"
                    }
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "logAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "timeAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "toolbox": {
            "iconStyle": {
                "normal": {
                    "borderColor": "#999"
                },
                "emphasis": {
                    "borderColor": "#666"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#cccccc"
            }
            ,"icon":"circle"
            ,"itemWidth":10
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#ccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#ccc",
                    "width": 1
                }
            }
        },
        "timeline": {
            "lineStyle": {
                "color": "#8fd3e8",
                "width": 1
            },
            "itemStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderWidth": 1
                },
                "emphasis": {
                    "color": "#8fd3e8"
                }
            },
            "controlStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                }
            },
            "checkpointStyle": {
                "color": "#8fd3e8",
                "borderColor": "rgba(138,124,168,0.37)"
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                }
            }
        },
        "visualMap": {
            "color": [
                "#8a7ca8",
                "#e098c7",
                "#cceffa"
            ]
        },
        "dataZoom": {
            "backgroundColor": "rgba(0,0,0,0)",
            "dataBackgroundColor": "rgba(255,255,255,0.3)",
            "fillerColor": "rgba(167,183,204,0.4)",
            "handleColor": "#a7b7cc",
            "handleSize": "100%",
            "textStyle": {
                "color": "#333"
            }
        },
        "markPoint": {
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        }
    });
}));


本文由

echarts社区
中查找修改

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页