利用echarts散点图实现图形运动轨迹动画效果
By
admin
at 2018-09-22 • 1人收藏 • 2360人看过
看到同事用labview的散点图标实现了一个类似gdi画板的功能,感觉蛮好玩的.
考虑用echarts实现下看看能不能.
3 个回复 | 最后更新于 2023-06-23
去掉了轴线, 更像是gdi画板了.
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
}
},
dataZoom: [
{
type: 'inside',
realtime: true,
start: 0,
end: 100,
}
],
tooltip: {
formatter: function (params) {
return 'X: ' + params.data[0] + '<br>Y: ' + params.data[1];
}
},
animation:false,
series: [{
type: 'effectScatter',
symbolSize: 12,
data: [],
itemStyle: {
color: '#A378C4'
}
}, {
symbolSize: 10,
data: [],
type: 'scatter',
itemStyle: {
color: '#00949C'
}
},{
symbolSize: 10,
data: [],
type: 'scatter',
itemStyle: {
color: '#FF3598'
}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>主函数:
import web.kit.form;//导入miniblink组件
var mb = web.kit.form(mainForm.custom);
import wsock.tcp.simpleHttpServer;
mb.go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") );
绘制图表 = function(_web,optionTab){
var str ="option = " ++ web.json.stringify(optionTab,false,false) ++ ";myChart.setOption(option);";
_web.doScript(str);
}
var retTab = {};
var setData = function(opTab,dataTab){
if(!opTab.series){
opTab.series = {{};{};{}}
}
if(!opTab.series[3].data){
opTab.series[3].data = {}
}
table.push(opTab.series[3].data,dataTab);
}
//设置完成点
var setEndPot = function(opTab,posTab){
if(!opTab.series){
opTab.series = {{};{};{}}
}
if(!opTab.series[2].data){
opTab.series[2].data = {}
}
table.push(opTab.series[2].data,posTab);
return #opTab.series[2].data;
}
//设置未完成点
var setLostPos = function(opTab){
if(!opTab.series){
opTab.series = {{}}
}
if(!opTab.series[3].data){
opTab.series[3].data = {}
}
var ret = table.shift(opTab.series[3].data);
return ret;
}
//设置移动点
var setMovePos = function(opTab,posTab){
if(!opTab.series){
opTab.series = {{}}
}
if(!opTab.series[1].data){
opTab.series[1].data = {}
}
opTab.series[1].data[1] = table.mixin(opTab.series.data,posTab);
绘制图表(mb,opTab);
}
var getLostLength = function(opTab){
return #opTab.series[3].data;
}
var eachdata = function(url){
import string.database;
var strDb = string.database(",");
var b = {};
var xmax,xmin,ymax,ymin;
var xmaxk,xmink,ymaxk,ymink;
var mfirstFlag = true;
var data = strDb.parse(string.load(url)); //解析数据
if( data ){
for(k,v in data){
if(k == 1) continue ;
table.push(b,{v[3];v[4]});
var v3value = tonumber(v[3]);
var v4value = tonumber(v[4]);
if(mfirstFlag){
mfirstFlag = false;
xmax = v3value;
xmin = v3value;
ymax = v4value;
ymin = v4value;
xmaxk = k-1;
xmink = k-1;
ymaxk = k-1;
ymink = k-1;
}else {
if(v3value > xmax) { xmax = v3value;xmaxk = k-1;}
if(v3value < xmin) {xmin = v3value;xmink = k-1;}
if(v4value > ymax) {ymax = v4value;ymaxk = k-1;}
if(v4value < ymin) {ymin = v4value;ymink = k-1;}
}
}
var leftPos3 = { xmin-500 ; (ymax-ymin)/2+ymin };
var leftPos2 = { xmin-500-120 ; (ymax-ymin)/2+ymin };
var leftPos1 = { xmin-500-120-120 ; (ymax-ymin)/2+ymin };
var rightPos1 = { xmax+500; (ymax-ymin)/2+ymin };
var rightPos2 = { xmax+500+120; (ymax-ymin)/2+ymin };
var rightPos3 = { xmax+500+120+120; (ymax-ymin)/2+ymin };
var topPos3 = { (xmax-xmin)/2+xmin; ymax+500 };
var topPos2 = { (xmax-xmin)/2+xmin; ymax+500+120 };
var topPos1 = { (xmax-xmin)/2+xmin; ymax+500+120+120 };
var buttomPos1 = { (xmax-xmin)/2+xmin; ymin-500 };
var buttomPos2 = { (xmax-xmin)/2+xmin; ymin-500-120 };
var buttomPos3 = { (xmax-xmin)/2+xmin; ymin-500-120-120 };
var buttomPos4 = { (xmax-xmin)/2+xmin; ymin-500-120-120-120 };
table.push(b,leftPos3);
table.push(b,leftPos2);
table.push(b,leftPos1);
table.push(b,rightPos1);
table.push(b,rightPos2);
table.push(b,rightPos3);
table.push(b,topPos3);
table.push(b,topPos2);
table.push(b,topPos1);
table.push(b,buttomPos4);
table.push(b,buttomPos3);
table.push(b,buttomPos2);
table.push(b,buttomPos1);
var i = 0;
return function(){
i = i + 1;
return b[i];
};
}else {
return null;
}
}
mainForm.button3.oncommand = function(id,event){
for(k in eachdata("C:\Users\popdes\Desktop\退位25um.csv")){
setData(retTab,k);
}
绘制图表(mb,retTab);
}
mainForm.button5.oncommand = function(id,event){
var tmId = mainForm.addtimer(
100,
function(hwnd,msg,id,tick){
var ret = setLostPos(retTab);
setEndPot(retTab,ret);
setMovePos(retTab,ret);
if(getLostLength(retTab)<=0){
mainForm.settimer(id,-1)
mainForm.killtimer(id);
}
}
)
}
登录后方可回帖
http://tushuo.baidu.com/wave/index#/gallery
在线定制工具, 可以学习里面的样式更改方法.