Echarts曲线内嵌svg

发表于

需求描述

项目中有这样的需求：通过曲线图来展示实时采集的风速风向数据，箭头长短代表风速、箭头方向代表风向。
具体效果如下图所示：

技术要点
  • 曲线采用Echart组件（功能非常强大，曲线图表你所能想到的用它几乎都可以实现）
  • Echart中，曲线坐标数据包含symbol属性（具体哪些曲线类型包含需要参考echarts官方文档），该属性包含常用图形，如cirle,rect等，还可以通过自定义svg图来表现
  • svg图缩放不会失真，图形可以任意绘制
代码实现

示例代码点击这里下载（密码：m9zw），包含文件如下：

  • index.html（页面）
  • echarts.min.js（ECharts组件，可访问官网自行下载）
  • arrow.svg（箭头的svg文件）

关键代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="echarts.min.js"></script>
		<style type="text/css">
	    /*将内容居中*/
			body{
				text-align: center;
				align-items: center;
			}
	    /*曲线样式-高宽以及边框*/
			#mychart{
				width:500px;
				height:350px;
				border:1px solid #888888;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<h4>echart symbol svg巧用</h4>
		<div id="mychart"></div> 

		<script type="text/javascript"> 
	    //定义x轴、y轴、值数组
			var xdata = ['0','1','2','3','4','5','6','7','8']; 
			var ydata = [0,1,2]; 
			var sData = [];
			for(var i=0;i<xdata.length;i++)
			{
				var arrowLen= 50+i*10;      //箭头长度
				var arrowangle = 0+i*20;    //箭头角度

				var oneData = new Object();
				oneData.value = [i.toString(),1]; 
				oneData.symbol='image://arrow.svg';
				oneData.symbolSize=[arrowLen,200];
				oneData.symbolRotate=arrowangle;
				oneData.symbolOffset=[0, 0];
				sData.push(oneData);
			} 
	
			var myOption = {
				xAxis: {
					type: 'category',
					data:  xdata,
					axisTick:{
						show:true
					}
				},
				yAxis: {
					type: 'value', 
					max:2,
					data:ydata
				},
				series: [{
					data: sData,
					type: 'scatter'
				}]
			}; 
			var myChart = echarts.init(document.getElementById('mychart')); 
			myChart.setOption(myOption,true); 
	
			var angleLen=60;
			var angleindex=0;
			var xindex=10;
			var t1=window.setInterval(refreshCount, 1000);
			function refreshCount() {
			   xindex++;  
			   angleindex++;
			   //seris data 添加一个数据到尾部并删掉第一个数据
			   var oneData = new Object();
			   oneData.value = [xindex.toString(),1];
			   oneData.symbol='image://arrow.svg';
			   oneData.symbolSize=[angleLen+angleindex%10,200];
			   oneData.symbolRotate=angleindex*20;
			   oneData.symbolOffset=[0, 0];
			   myOption.series[0].data.push(oneData);
			   myOption.series[0].data.shift(); 
			   //x轴添加一个数据到尾部并删掉第一个数据
			   myOption.xAxis.data.push(xindex.toString());
			   myOption.xAxis.data.shift();
			   
			   myChart.setOption(myOption);
			}
		</script>
	</body>    
</html>