The scatter plot, described in the previous section, contains only two variables. If you want to add more variables, you can use the size of the point. Because it contains points of different sizes, like bubbles, it is called a bubble. Therefore, the bubble diagram differs from the scatter diagram in that the bubble diagram adds a dimension to the base scatter diagram, i.e. the bubble size represents a new dimension. In addition, the most intuitive difference between bubble graphs and scatter graphs is that the data points in scatter graphs are of the same size, while the bubbles in bubble graphs are of different sizes.

  1. Draw standard bubble chart

The standard bubble chart can be used to observe the relationship between the three indicators. Observe the relationship of three values in each element using 100 elements automatically generated by the system using random functions, as shown in the figure. As can be seen from the figure, two grayscale bubbles, named Bubble1 and Bubble2, appear in the figure, and each bubble has a different size.

The legend source code is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Function random() {var r = math.round (math.random () * 90); function random() {var r = math.round (math.random () * 90); return (r * (r % 2 == 0 ? 1:1)); Return a random number of (-90,90)} // Generate an array of 100 elements, each element has three values, the first two elements of the array are in the range of (-90,90), Function randomDataArray() {var d = []; // Function randomDataArray() {var d = []; var len = 100; while (len--) { d.push([random(), random(), Math.abs(random()),]); } return d; } var option = {color: ['#FFCCCC', 'green'], // configure the bubble color series title: {// configure the title component x: 40, text: 'standard bubble example ', subtext: }, tooltip: {// Configure tooltip components trigger: 'axis', showDelay: 0, axisPointer: {show: true, type: 'cross', lineStyle: {type: 'bootstrap ', width: 1}}}, legend: {x: 240, data: ['bubble1', 'bubble2']}, // Configure toolbox: {// configure toolbox components show: true, x: 450, feature: { mark: { show: true }, dataZoom: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'value', splitNumber: 4, scale: True}], yAxis: [{type: 'value', splitNumber: 4, scale: true}], series: [// configure the data series {// set the data series bubble1 name: 'bubble1', type: 'scatter', symbol: 'circle', symbolSize: function (value) { return Math.round(value[2] / 5); }, data: Bubble2 name: 'bubble2', type: 'Scatter ', Symbol: 'circle', symbolSize: function (value) { return Math.round(value[2] / 5); }, data: randomDataArray() }] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code

In the standard bubble diagram instance code, there are two groups of bubble arrays bubble1 and Bubble2. Each bubble array has 100 elements, and each element in the array has three values, which are automatically generated by the system using random functions. The first two values of the element are random numbers in the range (-90,90) that represent the location of the data. The third value of the element is a random number in the range [0,90] that represents the size of the bubble

  1. Plot bubbles of life expectancy and GDP for each country

Based on the data of life expectancy and GDP of each country in 1990 and 2015, the relationship between GDP per capita, life expectancy per capita, total population, country name and year was observed, as shown in the figure. As can be seen from the figure, the abscissa represents GDP per capita, the ordinate represents life expectancy, the size of the circle represents the number of people in the country, and different gray scales represent years. When you point over a circle, the country and year of the circle will appear above it.

The legend source code is as follows:

<html> <head> <meta charset = "utf-8"> <! <script SRC = "js/echarts.js"></script> </head> <body> <! <div id = "main" style = "width: 900px; height: 600px"></div> <script type = "text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var data = [[[28604, 77, 17096869, 'A', 1990], [31163, 77.4, 27662440, 'B', 1990], [1516, 68, 1154605773, 'C', 1990], [13670, 74.7, 10582082, 'D', 1990], [28599, 75, 4986705, 'E', 1990], [29476, 77.1, 56943299, 'F', 1990, [31476, 75.4, 78958237, 'G', 1990], [28666, 78.1, 254830, 'H', 1990], [1777, 57.7, 870601776, 'I', 1990], [29550, 79.1, 122249285, 'J', 1990], [2076, 67.9, 20194354, 'K', 1990], [12087, 72, 42972254, 'L', 1990], [24021, 75.4, 3397534, 'M', 1990], [43296, 76.8, 4240375, 'N', 1990], [10088, 70.8, 38195258, 'O', 1990], [19349, 69.6, 147568552, 'P', 1990], [10670, 67.3, 53994605, 'Q', 1990], [26424, 75.7, 57110117, 'R', 1990], [37062, 75.4, 252847810, 'S', 1990], [[44056, 81.8, 23968973, 'A', 2015], [43294, 81.7, 35939927, 'B', 2015], [13334, 76.9, 1376048943, 'C', 2015], [21291, 78.5, 11389562, 'D', 2015], [38923, 80.8, 5503457, 'E', 2015], [37599, 81.9, 64395345, 'F', 2015], [44053, 81.1, 80688545, 'G', 2015], [42182, 82.8, 329425, 'H', 2015], [5903, 66.8, 1311050527, 'I', 2015], [36162, 83.5, 126573481, 'J', 2015, [1390, 71.4, 25155317, 'K', 2015], [34644, 80.7, 50293439, 'L', 2015], [34186, 80.6, 4528526, 'M', 2015, [64304, 81.6, 5210967, 'N', 2015], [24787, 77.3, 38611794, 'O', 2015], [23038, 73.13, 143456918, 'P', [19360, 76.5, 78665830, 'Q', 2015], [38225, 81.4, 64715810, 'R', 2015], [53354, 79.1, 321773631, 'S', 2015]; Var option = {backgroundColor: new echarts. Graphic. RadialGradient (0.3, 0.3, 0.8, [{offset: 0, color: '#f7f8fa'}, {offset: 1, color: '#cdd0d5'}]), title: {x: 20, y: 5, text: '1990 & 2015 average life expectancy & GDP'}, legend: {x: Data: ['1990', '2015']}, grid: {top: '10%', // Distance between component and top of container, percentage string or integer number left: Right: '12%', bottom: '3%', containLabel: true // Whether the grid area contains the calibration labels for the axes,}, xAxis: {splitLine: {lineStyle: {type: 'dashed'}}, name: 'GDP ($100 million) '}, yAxis: {splitLine: {lineStyle: {type: 'dashed'}}, name: 'GDP ($100 million) '}, yAxis: {splitLine: {lineStyle: {type: 'Dashery'}}, scale: true, name: 'dashery'}, Series: [{name: '1990', data: data[0], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, position: 'top', formatter: function (param) { return (param.data[3] + "," + param.data[4]); } } }, itemStyle: { normal: { shadowBlur: 10, shadowOffsetY: 5, shadowColor: 'roffsety (120, 36, 50, 0.5)', color: New echarts. Graphic. RadialGradient (0.4, 0.3, 1, [{offset: 0, color: 'RGB (251, 118, 123)}, {offset: 1, the color: 'rgb(204, 46, 72)' }]) } } }, { name: '2015', data: data[1], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, position: 'top', formatter: function (param) { return (param.data[3] + "," + param.data[4]); } } }, itemStyle: { normal: { shadowBlur: 10, shadowOffsetY: 5, shadowColor: 'roffsety (25, 100, 150, 0.5)', color: New echarts. Graphic. RadialGradient (0.4, 0.3, 1, [{offset: 0, color: 'RGB (129, 227, 238)}, {offset: 1, the color: 'rgb(25, 183, 207)' }]) } } }] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code
  1. Draw air pollution index bubble map of city A, city B and city C

The air pollution index data of city A, City B and city C were used to observe the relationship between AQI index (Air quality Index), PM2.5, sulfur dioxide (SO2) and other indicators, as shown in the figure. As can be seen from the figure, the abscissa represents the days of the month, the ordinate represents the AQI index, the size of the circle represents the value of PM2.5 on the day, and the light and shade of the circle represents the value of sulfur dioxide on the day. A mouse pointer over a circle in the map shows different readings of the city’s air pollution index for that day.

The legend source code is as follows:

<html>

<head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var dataBJ = [  //城市A的空气污染指数数据
			[1, 55, 9, 56, 0.46, 18, 6, "良"], [2, 25, 11, 21, 0.65, 34, 9, "优"],
			[3, 56, 7, 63, 0.3, 14, 5, "良"], [4, 33, 7, 29, 0.33, 16, 6, "优"],
			[5, 42, 24, 44, 0.76, 40, 16, "优"], [6, 82, 58, 90, 1.77, 68, 33, "良"],
			[7, 74, 49, 77, 1.46, 48, 27, "良"], [8, 78, 55, 80, 1.29, 59, 29, "良"],
			[9, 267, 216, 280, 4.8, 108, 64, "重污"], [10, 185, 127, 216, 2.52, 61, 27, "中污"],
			[11, 39, 19, 38, 0.57, 31, 15, "优"], [12, 41, 11, 40, 0.43, 21, 7, "优"],
			[13, 64, 38, 74, 1.04, 46, 22, "良"], [14, 108, 79, 120, 1.7, 75, 41, "轻污"],
			[15, 108, 63, 116, 1.48, 44, 26, "轻污"], [16, 33, 6, 29, 0.34, 13, 5, "优"],
			[17, 94, 66, 110, 1.54, 62, 31, "良"], [18, 186, 142, 192, 3.88, 93, 79, "中污"],
			[19, 57, 31, 54, 0.96, 32, 14, "良"], [20, 22, 8, 17, 0.48, 23, 10, "优"],
			[21, 39, 15, 36, 0.61, 29, 13, "优"], [22, 94, 69, 114, 2.08, 73, 39, "良"],
			[23, 99, 73, 110, 2.43, 76, 48, "良"], [24, 31, 12, 30, 0.5, 32, 16, "优"],
			[25, 42, 27, 43, 1, 53, 22, "优"], [26, 154, 117, 157, 3.05, 92, 58, "中污"],
			[27, 234, 185, 230, 4.1, 123, 69, "重污"], [28, 160, 120, 186, 2.77, 91, 50, "中污"],
			[29, 134, 96, 165, 2.76, 83, 41, "轻污"], [30, 52, 24, 60, 1.03, 50, 21, "良"],
			[31, 46, 5, 49, 0.28, 10, 6, "优"]];
		var dataGZ = [  //城市B的空气污染指数数据
			[1, 26, 37, 27, 1.163, 27, 13, "优"], [2, 85, 62, 71, 1.195, 60, 8, "良"],
			[3, 78, 38, 74, 1.363, 37, 7, "良"], [4, 21, 21, 36, 0.634, 40, 9, "优"],
			[5, 41, 42, 46, 0.915, 81, 13, "优"], [6, 56, 52, 69, 1.067, 92, 16, "良"],
			[7, 64, 30, 28, 0.924, 51, 2, "良"], [8, 55, 48, 74, 1.236, 75, 26, "良"],
			[9, 76, 85, 113, 1.237, 114, 27, "良"], [10, 91, 81, 104, 1.041, 56, 40, "良"],
			[11, 84, 39, 60, 0.964, 25, 11, "良"], [12, 64, 51, 101, 0.862, 58, 23, "良"],
			[13, 70, 69, 120, 1.198, 65, 36, "良"], [14, 77, 105, 178, 2.549, 64, 16, "良"],
			[15, 109, 68, 87, 0.996, 74, 29, "轻污"], [16, 73, 68, 97, 0.905, 51, 34, "良"],
			[17, 54, 27, 47, 0.592, 53, 12, "良"], [18, 51, 61, 97, 0.811, 65, 19, "良"],
			[19, 91, 71, 121, 1.374, 43, 18, "良"], [20, 73, 102, 182, 2.787, 44, 19, "良"],
			[21, 73, 50, 76, 0.717, 31, 20, "良"], [22, 84, 94, 140, 2.238, 68, 18, "良"],
			[23, 93, 77, 104, 1.165, 53, 7, "良"], [24, 99, 130, 227, 3.97, 55, 15, "良"],
			[25, 146, 84, 139, 1.094, 40, 17, "轻污"], [26, 113, 108, 137, 1.481, 48, 15, "轻污"],
			[27, 81, 48, 62, 1.619, 26, 3, "良"], [28, 56, 48, 68, 1.336, 37, 9, "良"],
			[29, 82, 92, 174, 3.29, 0, 13, "良"], [30, 106, 116, 188, 3.628, 101, 16, "轻污"],
			[31, 118, 50, 0, 1.383, 76, 11, "轻污"]];
		var dataSH = [  //城市C的空气污染指数数据
			[1, 91, 45, 125, 0.82, 34, 23, "良"], [2, 65, 27, 78, 0.86, 45, 29, "良"],
			[3, 83, 60, 84, 1.09, 73, 27, "良"], [4, 109, 81, 121, 1.28, 68, 51, "轻污"],
			[5, 106, 77, 114, 1.07, 55, 51, "轻污"], [6, 109, 81, 121, 1.28, 68, 51, "轻污"],
			[7, 106, 77, 114, 1.07, 55, 51, "轻污"], [8, 89, 65, 78, 0.86, 51, 26, "良"],
			[9, 53, 33, 47, 0.64, 50, 17, "良"], [10, 80, 55, 80, 1.01, 75, 24, "良"],
			[11, 117, 81, 124, 1.03, 45, 24, "轻污"], [12, 99, 71, 142, 1.1, 62, 42, "良"],
			[13, 95, 69, 130, 1.28, 74, 50, "良"], [14, 116, 87, 131, 1.47, 84, 40, "轻污"],
			[15, 108, 80, 121, 1.3, 85, 37, "轻污"], [16, 134, 83, 167, 1.16, 57, 43, "轻污"],
			[17, 79, 43, 107, 1.05, 59, 37, "良"], [18, 71, 46, 89, 0.86, 64, 25, "良"],
			[19, 97, 71, 113, 1.17, 88, 31, "良"], [20, 84, 57, 91, 0.85, 55, 31, "良"],
			[21, 87, 63, 101, 0.9, 56, 41, "良"], [22, 104, 77, 119, 1.09, 73, 48, "轻污"],
			[23, 87, 62, 100, 1, 72, 28, "良"], [24, 168, 128, 172, 1.49, 97, 56, "中污"],
			[25, 65, 45, 51, 0.74, 39, 17, "良"], [26, 39, 24, 38, 0.61, 47, 17, "优"],
			[27, 39, 24, 39, 0.59, 50, 19, "优"], [28, 93, 68, 96, 1.05, 79, 29, "良"],
			[29, 188, 143, 197, 1.66, 99, 51, "中污"], [30, 174, 131, 174, 1.55, 108, 50, "中污"],
			[31, 187, 143, 201, 1.39, 89, 53, "中污"]];
		var schema = [  //定义数据的模式
			{ name: 'date', index: 0, text: '日' },
			{ name: 'AQIindex', index: 1, text: 'AQI指数' },
			{ name: 'PM25', index: 2, text: 'PM2.5' },
			{ name: 'PM10', index: 3, text: 'PM10' },
			{ name: 'CO', index: 4, text: '一氧化碳（CO）' },
			{ name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
			{ name: 'SO2', index: 6, text: '二氧化硫（SO2）' }];
		var myitemStyle = {  //自定义数据项样式
			normal: {
				opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0,
				shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		};
		var option = {  //指定图表的配置项和数据
			color: ['red', '#fec42c', '#4169E1'],
			legend: {  //配置图例组件
				y: 11, data: ['城市A', '城市B', '城市C'],
				textStyle: { color: 'black', fontSize: 16 }
			},
			grid: { x: '10%', x2: 150, y: '18%', y2: '10%' },  //配置网格组件
			tooltip: {  //配置工具箱组件
				padding: 10, backgroundColor: '#222',
				borderColor: '#777', borderWidth: 1,
				formatter: function (obj) {
					var value = obj.value;
					return '<div style="border-bottom:1px solid rgba(255,255,255,.3);\
					font-size:18px;padding-bottom:7px;margin-bottom:7px">'
						+ obj.seriesName + ' ' + value[0] + '日：' + value[7] + '</div>'
						+ schema[1].text + '：' + value[1] + '<br>'
						+ schema[2].text + '：' + value[2] + '<br>'
						+ schema[3].text + '：' + value[3] + '<br>'
						+ schema[4].text + '：' + value[4] + '<br>'
						+ schema[5].text + '：' + value[5] + '<br>'
						+ schema[6].text + '：' + value[6] + '<br>';
				}
			},
			xAxis: {  //配置x轴坐标系
				type: 'value', name: '日期', nameGap: 16,
				nameTextStyle: { color: 'black', fontSize: 14 },
				max: 31, splitLine: { show: false },
				axisLine: { lineStyle: { color: 'black' } }
			},
			yAxis: {  //配置y轴坐标系
				type: 'value', name: 'AQI指数', nameLocation: 'end', nameGap: 20,
				nameTextStyle: { color: 'black', fontSize: 16 },
				axisLine: { lineStyle: { color: 'black' } },
				splitLine: { show: true }
			},
			visualMap: [  //配置视觉映射组件
				{
					left: 678, top: '7%', dimension: 2, min: 0,
					max: 250, itemWidth: 30, itemHeight: 120, calculable: true,
					precision: 0.1, text: ['圆形大小：PM2.5'], textGap: 30,
					textStyle: { color: 'black' },
					inRange: { symbolSize: [10, 70] },
					outOfRange: { symbolSize: [10, 70], color: ['rgba(255,255,255,.2)'] },
					controller: { inRange: { color: ['#c23531'] }, outOfRange: { color: ['#444'] } }
				},
				{
					left: 695, bottom: '2%', dimension: 6, min: 0,
					max: 50, itemHeight: 120, calculable: true, precision: 0.1,
					text: ['明暗：二氧化硫'], textGap: 30,
					textStyle: { color: 'black' }, inRange: { colorLightness: [1, 0.5] },
					outOfRange: { color: ['rgba(255,255,255,.2)'] },
					controller: { inRange: { color: ['#c23531'] }, outOfRange: { color: ['#444'] } }
				}
			],
			series: [  //配置指定数据系列
				{ name: '城市A', type: 'scatter', itemStyle: myitemStyle, data: dataBJ },
				{ name: '城市B', type: 'scatter', itemStyle: myitemStyle, data: dataSH, },
				{ name: '城市C', type: 'scatter', itemStyle: myitemStyle, data: dataGZ, }]
		};
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option); 
	</script>
</body>

</html>
Copy the code