今天浏览了百度的echarts插件，发现了一个好玩的东西，那就算echarts实现动态图，不停的生成红色的小球球，并且有的用线连接起来了，非常有立体感，在这里分享给大家如何实现
一、新建静态页面demo.html，引入百度echarts的js库
<!-- V型知识库 www.vxzsk.com 原创--> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
二、在<body></body>之间添加如下代码
<div id="container" style="height: 500px"></div>
上述div块便是动态图的容器
3，javascript实现代码
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = '动态图';
var data = [{
fixed: true,
x: myChart.getWidth() / 2,
y: myChart.getHeight() / 2,
symbolSize: 20,
id: '-1'
}];
var edges = [];
option = {
series: [{
type: 'graph',
layout: 'force',
animation: false,
data: data,
force: {
// initLayout: 'circular'
// gravity: 0
repulsion: 100,
edgeLength: 5
},
edges: edges
}]
};
setInterval(function () {
data.push({
id: data.length
});
var source = Math.round((data.length - 1) * Math.random());
var target = Math.round((data.length - 1) * Math.random());
if (source !== target) {
edges.push({
source: source,
target: target
});
}
myChart.setOption({
series: [{
roam: true,
data: data,
edges: edges
}]
});
// console.log('nodes: ' + data.length);
// console.log('links: ' + data.length);
}, 500);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>4，用浏览器打开demo.html，效果如下
根据上面的js代码显示500毫秒生成一个，感觉很好玩，但是作者本人目前没发现上述动态图用在什么项目上，见谅。
5、完整静态页面html代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body >
<div id="container" style="height: 500px"></div>
<!-- V型知识库 www.vxzsk.com -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = '动态图';
var data = [{
fixed: true,
x: myChart.getWidth() / 2,
y: myChart.getHeight() / 2,
symbolSize: 20,
id: '-1'
}];
var edges = [];
option = {
series: [{
type: 'graph',
layout: 'force',
animation: false,
data: data,
force: {
// initLayout: 'circular'
// gravity: 0
repulsion: 100,
edgeLength: 5
},
edges: edges
}]
};
setInterval(function () {
data.push({
id: data.length
});
var source = Math.round((data.length - 1) * Math.random());
var target = Math.round((data.length - 1) * Math.random());
if (source !== target) {
edges.push({
source: source,
target: target
});
}
myChart.setOption({
series: [{
roam: true,
data: data,
edges: edges
}]
});
// console.log('nodes: ' + data.length);
// console.log('links: ' + data.length);
}, 500);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1877.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：weui Panel面板
下一篇：初步引入小程序weui样式库
^