ECharts多図表連動機能の実現過程

8469 ワード
echats グラフ 連動する
展示が必要なデータが多い場合、一つのグラフに置いて展示する効果はあまりよくないので、二つのグラフを使って連動して展示することも考えられます。
EChartsは、多グラフ連動機能を提供しており、接続された複数のグラフはコンポーネントイベントを共有し、写真を保存する際のオートスティッチングを実現することができます。多図表連動は直角系下tooltipの連動をサポートします。
EChartにおける多グラフ連動を実現するには、以下の2つの方法が使用されてもよい。
（1）EChartオブジェクトごとに同じグループ値を設定し、EChartオブジェクトのconnect方法を呼び出した際にグループ値を入力することにより、複数のEChartオブジェクトを用いて連動関係を構築する。フォーマットは以下の通りである。
myChart 1.group='group 1'  //第1のEChartsオブジェクトにグループ値を設定します。
myChart.2 group='group 1'  //2番目のEChartsオブジェクトに同じグループ値を設定します。
echarts.co nnect('group 1')  //EChartオブジェクトのconnectメソッドを呼び出すと、group値が入ります。
（2）EChartsのconnectメソッドを直接呼び出し、パラメータは複数の連動が必要なEChartsオブジェクトからなる配列であり、フォーマットは以下の通りである。
echarts.co nnect([myChart 1,myChart 2])
既存の多グラフ連動を解除したいなら、disConnectメソッドを呼び出すことができます。フォーマットは以下の通りです。
echarts.dis Connect('group 1')
ある学院の2019年と2020年の専門学生募集状況を利用してヒストグラムの連動図表を作成します。
図から分かるように、上と下の二つの柱図があり、それぞれ2019、2020の二年間の募集状況のまとめを表しています。多図表連動を確立したので、2019年または2020年の人工知能専門柱体をマウスが滑ると、システムは同時に2019年、2020年の人工知能専門分野において、対応する詳細ヒントボックス（tooltip）を自動的に起動する。

<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//      dom，   ECharts  
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //   1          
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba     0.1
			title: { text: '   2019          ', left: 40, top: 5 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019   '], left: 422, top: 8 },
			xAxis: [{
				data: ["   ", "   ", "Oracle", "ERP", "    ",
					"    ", "    ", "    "],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //   1        
				name: '2019   ',
				type: 'bar', barWidth: 40,  //             
				data: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//      dom,   ECharts  
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //   2          
			color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba     0.1
			title: { text: '   2020          ', left: 40, top: 8 },
			tooltip: { show: true },
			legend: { data: ['2020   '], left: 422, top: 8 },
			xAxis: [{
				data: ["   ", "   ", "Oracle", "ERP", "    ",
					"    ", "    ", "    "],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //   2        
				name: '2020   ',
				type: 'bar', barWidth: 40,  //             
				data: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1);  // myChart1      
		myChart2.setOption(option2);  // myChart2      
		//         1：      echarts   group 
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
	//         2：         echarts  myChart1，myChart2
	//echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>
ある大学の各専攻の2016－2020年の募集状況を利用して円グラフとヒストグラムの連動図表を作成します。
図から分かるように、上の円グラフと下の棒グラフ（ヒストグラムは道具箱を通して折れ線図にも転じることができる）。マウスが円グラフのあるセクタを滑った時、円グラフに現れた詳細ヒントボックスには、該当セクタの対応する年度の学生募集人数と各年の総学生募集人数の割合が表示されます。同時にヒストグラム（または折れ線図）も相応して詳細が表示されます。

ソースコードは以下の通りです

<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//      dom，   ECharts  
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //   1   option1       
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //     ，rgba     0.1
			title: { text: '              ', x: 'center', y: 12 },
			tooltip: { trigger: "item", formatter: "{a}<br/>{b}:{c}({d}%)" },
			legend: {
				orient: 'vertical', x: 15, y: 15,
				data: ['2016', '2017', '2018', '2019', '2020']
			},
			series: [{  //   1        
				name: '   :', type: 'pie',
				radius: '70%', center: ['50%', 190],
				data: [
					{ value: 1695, name: '2016' }, { value: 1790, name: '2017' },
					{ value: 2250, name: '2018' }, { value: 2550, name: '2019' },
					{ value: 2570, name: '2020' }]
			}]
		};
		myChart1.setOption(option1);  //               
		//      dom，   ECharts  
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //   2          
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //     ，rgba     0.1
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },  //       
			legend: {  //      
				left: 42, top: 25,
				data: ['   ', 'Oracle', '   ', '    ', '    ']
			},
			toolbox: {  //   2         
				show: true, orient: 'vertical', left: 550, top: 'center',
				feature: {
					mark: { show: true }, restore: { show: true }, saveAsImage: { show: true },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }
				}
			},
			xAxis: [{
				type: 'category',
				data: ['2016', '2017', '2018', '2019', '2020']
			}],  //   2    x    
			yAxis: [{ type: 'value', splitArea: { show: true } }],  //   2    y    
			series: [  //   2        
				{
					name: '   ', type: 'bar', stack: '  ',
					data: [301, 334, 390, 330, 320], barWidth: 45,
				},
				{ name: 'Oracle', type: 'bar', stack: '  ', data: [101, 134, 90, 230, 210] },
				{ name: '   ', type: 'bar', stack: '  ', data: [191, 234, 290, 330, 310] },
				{ name: '    ', type: 'bar', stack: '  ', data: [201, 154, 190, 330, 410] },
				{ name: '    ', type: 'bar', stack: '  ', data: [901, 934, 1290, 1330, 1320] }
			]
		};
		myChart2.setOption(option2);  //                  
		//         1：      echarts   group 
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
 	    //         2：         echarts  myChart1，myChart2
	    //echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>
締め括りをつける
ここで、ECharts多図表連動の実現に関する文章を紹介します。EChart多図表連動の内容については、以前の文章を検索したり、下記の関連文章を引き続き閲覧したりしてください。これからもよろしくお願いします。