js实现折线、柱形、散点、扇形统计图之间的转换

先引入echarts插件

		<script src="./js/echarts.js"></script>

1，先构建一个容器

			<div id="box" style="width: 90%;height:650px;margin-left: 5%;"></div>

<div class="xin">
			<div id="zhi" onclick="zhixian()">转换为折线统计图</div>
			<div id="zhu" onclick="zhuxing()">转换为柱形统计图</div>
			<div id="qiu" onclick="qiuxing()">转换为散点统计图</div>
			<div id="wcy" onclick="round()">转换为扇形统计图</div>
			<div id="bolang" onclick="bor()">折线统计图2.0版本</div>
		</div>

2，在js中引入假数据或外部接口并通过相应的点击事件赋给统计图type相应属性

let arr = new XMLHttpRequest();
			arr.open('get', "js/index.json");
			arr.send();
			arr.onreadystatechange = function() {
				if (arr.readyState == 4 && arr.status == 200) {
					let at = arr.responseText;
					obj = JSON.parse(at);
					console.log(obj[0].color);
					// 折线统计图
					zhi.onclick = function() {
						for (let i = 0; i < obj.length; i++) {
							obj[i].type = "line"
						}
						fun(obj)
					}
					// 柱形统计图
					zhu.onclick = function() {
						for (let i = 0; i < obj.length; i++) {
							obj[i].type = "bar"
						}
						fun(obj)
					}
					// 散点统计图
					qiu.onclick = function() {
						for (let i = 0; i < obj.length; i++) {
							obj[i].type = "scatter";
						}
						fun(obj)
					}
					fun(obj);
					// 扇形统计图
					wcy.onclick = function() {
						let num = [];
						let add = [];
						let zo = [];
						let get;
						add = [];
						let zzx = [];
						for (let i = 0; i < obj.length; i++) {
							obj[i].type = "pie";
							let http = 0;
							for (let a = 0; a < obj[i].data.length; a++) {
								http += obj[i].data[a].value;
								num.push(obj[i].name);
								console.log(http);
							}
							zo.push(JSON.parse(http));
							get = {
								value:zo[i],
								name:obj[i].name
							}
							zzx.push(get);
							let jy = {
								name:"测试总成绩",
								type:"pie",
								data:zzx
							}
							add.push(jy)
						}
						console.log(add);
						let option = {
							title: {
								text: '测试单科总成绩'
							},
							tooltip: {
								trigger: 'item'
							},
							xAxis: {
								show: 0 ,
								type: 'category',
								data: there
							},
							toolbox: {
								feature: {
									restore: {},
									saveAsImage: {},
								}
							},
							series: add
						};
						box.setOption(option);
					}
					bol.onclick = function(){
						let num = [];
						let there = ["小华", "小张", "小赵", "老魏", "小明"];
						let add = [];
						let zo = [];
						let get;
						add = [];
						let zzx = [];
						for(let i = 0 ; i < obj.length ; i++){
							obj[i].type = "line";
							num.push(obj[i].name);
							get = {
								name: obj[i].name,
								type: obj[i].type,
								stack: 'Total',
								smooth: true,
								lineStyle: {
								  width: 0
								},
								showSymbol: false,
								areaStyle: {
								  opacity: 0.6,
								  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, obj[i].color),
								},
								emphasis: {
								  focus: 'series',
								},
								data: obj[i].data,
							}
							add.push(get)
							console.log(add);
						}
						let option = {
							color: ['#55ff00', '#ff0000', '#ff00ff'],
							title: {
								text: '测试成绩'
							},
							tooltip: {
								trigger: 'axis',
							},
							legend: {
								data: num
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							toolbox: {
								feature: {
									restore: {},
									saveAsImage: {},
								}
							},
							xAxis: {
								show: 1 ,
								type: 'category',
								data: there
							},
							yAxis: {
								type: 'value'
							},
							series: add
						};
						box.setOption(option);
					}
				}
			}
			
			
			function fun(obj) {
				let get;
				add = [];
				for (let i = 0; i < obj.length; i++) {
					num.push(obj[i].name);
					get = {
						name: obj[i].name,
						type: obj[i].type,
						data: obj[i].data,
					}
					add.push(get);
				}
				thank();
			}

			function thank() {
				let option = {
					color: ['#55ff00', '#ff0000', '#ff00ff'],
					title: {
						text: '测试成绩',
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: num,
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					toolbox: {
						feature: {
							restore: {},
							saveAsImage: {},
						}
					},
					xAxis: {
						show: 1 ,
						type: 'category',
						data: there
					},
					yAxis: {
						type: 'value'
					},
					series: add
				};
				box.setOption(option);
			}

注：转扇形统计图时需要重新书写统计函数