使用echarts制作泡泡效果

公司项目需要泡泡效果，项目已经引入了vue和echarts框架，就按着两个框架找了找，在echarts官网找到个例子，再结合自己的需求制作而成。只是记录给自己看的，如能帮上别人的忙也是乐意的。

先给个效果图。

这里使用的是echarts的关系图做的，即series的type=graph。下面先上代码后解释。

<div class="paopao" ref="paopaoChart">
</div>

 这里是html。使用ref是因为我使用的vue框架，相当于id使用。如果不使用vue框架，可以写成id。echarts图表必须为它设置一个容器，需要设置div的长和宽，不报错但不显示图表有可能就是这个原因。css主要是背景图和大小，没什么好说的。

paopaoChart: {},  //用于初始化chart
paopaoOption: {
    //提示框
    tooltip: {},
    animationDurationUpdate: function(idx) {
	// 越往后的数据延迟越大
    return idx * 100;
    },
    animationEasingUpdate: 'bounceIn',
    series: [{
	type: 'graph',
	layout: 'force',
	force: {
		repulsion: 400,
		edgeLength: 10,
	},
	label: {
		show: true,
		formatter: [
		'{a|{c}}',
		'{b|{b}}'
		].join('\n'),
		fontWeight: '1000',
		fontSize: '18',
		align: 'center',
		verticalAlign: 'center',
		rich: {
		    a: {
			color: '#4a9ffe',
			fontSize: 25,
			lineHeight: 30,
			textBorderColor: 'transparent',
			textBorderWidth: 0,
			},
		    b: {
			color: '#4a9ffe',
			fontSize: 14,
			lineHeight: 30,
			textBorderColor: 'transparent',
			textBorderWidth: 0,
			},
		   },
	},
	data: [{
	        "name": "PH 1",
		"value": 7.7,
		"symbol": 'image://./img/red1.png',
		"symbolSize": 140,
		"draggable": true,
		}, {
		"name": "PM2.5 1",
		"value": 65,
		"symbol": 'image://./img/red2.png',
		"symbolSize": 110,
		"draggable": true,
		}, {
		"name": "氮氧化物 1",
		"value": 26,
		"symbol": 'image://./img/red3.png',
		"symbolSize": 90,
		"draggable": true,
		}, {
		"name": "PM2.5 2",
		"value": 57,
		"symbol": 'image://./img/blue1.png',
		"symbolSize": 140,
		"draggable": true,
		}, {
	        "name": "氮氧化物 2",
		"value": 56,
		"symbol": 'image://./img/blue2.png',
		"symbolSize": 120,
		"draggable": true,
		}, {
		"name": "PH 2",
		"value": 7.5,
		"symbol": 'image://./img/blue3.png',
		"symbolSize": 110,
		"draggable": true,
		}, {
		"name": "PH 3",
		"value": 6.5,
		"symbol": 'image://./img/yellow1.png',
		"symbolSize": 90,
		"draggable": true,
		}, {
		"name": "PM2.5 3",
		"value": 85,
		"symbol": 'image://./img/yellow2.png',
		"symbolSize": 90,
		"draggable": true,
		}, {
		"name": "氮氧化物 3",
		"value": 32,
		"symbol": 'image://./img/yellow3.png',
		"symbolSize": 90,
		"draggable": true,
		}]
	}]
}

这是js的主要部分，用来设置chart参数的。参数主要设置在option中。具体的一一记录下。

tooltip是提示框，即鼠标移动到泡泡上，显示数据。默认即可，如果有特殊需求，可以参考echarts官网进行修改。

animationDurationUpdate和animationEasingUpdate是初始动画效果，具体参考官网。

series是最主要的配置。type使用'graph'，关系图。layout，图的布局。'force' 采用力引导布局。官方解释：

力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。

其实对于我的目标来说，就是泡泡之间有间隙，会相互排斥。下面force的属性就是设置斥力因子和边的距离。

label属性是用来设置图形上的文本标签的。由于我的文本需要显示两行，而且样式不同，所以使用rich富文本属性。formatter是将需要显示的文本格式化样式。{a|{c}} {b|{b}}，这是固定写法。a表示rich属性中a样式，即把c数据设置成a样式。b同理。{c}和

{b}是固定写法，{a}（系列名称），{b}（数据项名称），{c}（数值）不全，具体去官网文档看。

data中name和value是需要展示的数据，这里是实验就写死了。symbol是该节点的图形，就是使用泡泡的图片url，size为大小。draggable为节点是否可拖拽，只有使用引力布局的时候有效。

let $this = this;
$this.paopaoChart = echarts.init($this.$refs.paopaoChart);

这是为echarts图表初始化。

//获取泡泡类型数据
		getpaopaoOptionData: function() {
			let $this = this;
			setInterval(function() {
				let random = (Math.random() * 100).toFixed(1) - 0;
				$this.paopaoOption.series[0].data[0].value = random;
				$this.paopaoOption.series[0].data[1].value = random;
				$this.paopaoOption.series[0].data[2].value = random;
				$this.paopaoOption.series[0].data[3].value = random;
				$this.paopaoOption.series[0].data[4].value = random;
				$this.paopaoOption.series[0].data[5].value = random;
				$this.paopaoOption.series[0].data[6].value = random;
				$this.paopaoOption.series[0].data[7].value = random;
				$this.paopaoOption.series[0].data[8].value = random;
				$this.paopaoChart.setOption($this.paopaoOption);
			}, 1000);
			
		},

这里为了实验的效果，设置了定时器，给data刷值，使页面数据成动态效果，主要的是setOption进行配置。