利用echarts散点图实现图形运动轨迹动画效果

By admin at 2018-09-22 • 0人收藏 • 351人看过

看到同事用labview的散点图标实现了一个类似gdi画板的功能,感觉蛮好玩的.

考虑用echarts实现下看看能不能.

GIF.gif

2 个回复 | 最后更新于 2018-09-22
2018-09-22   #1

http://tushuo.baidu.com/wave/index#/gallery

在线定制工具, 可以学习里面的样式更改方法.

2018-09-22   #2

去掉了轴线, 更像是gdi画板了.

image.png

<!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);
			}
		} 
	)
}


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
黑猫Aar教程网:简码编程
C大Aardio论坛:Aar爱好者论坛
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...