vue图表统计--采用echarts

项目中不乏会遇到图表统计功能，小白一枚。发现echarts非常好用，简单易上手。可参考官方文档：https://echarts.apache.org/zh/index.html，有多种图表类型，任俊采洁。
我呢简单实现了折线图和饼图，浅谈如何与后端数据交互来更改图标内容展示，最重要的是拿到后端返回值去调用相应的setOption并向其对应位置填充值就行。

1.折线图：

drawLine(id) {
	this.charts = echarts.init(document.getElementById(id));
	this.charts.setOption({
		color: ["#b9ddff"],

		//设置标题,副标题,以及标题位置居中
		title: {
			text: "项目统计",
			x: "center",
		},
		tooltip: {
			//设置tip提示
			trigger: "axis",
		},
		legend: {
			//设置区分（那条线属于什么）
			data: ["项目面积统计 "],
		},
		grid: {
			left: "3%",
			right: "7%",
			bottom: "3%",
			containLabel: true,
        },
        
        //工具框，可以选择
		// toolbox: {
		// 	feature: {
		// 		saveAsImage: {}, //下载工具
		// 	},
		// },
		xAxis: {
			//设置x轴
			type: "category",
			boundaryGap: false, //坐标轴两边不留白
			data: this.mounth,
			name: "月份", //x轴name
		},
		yAxis: {
			//设置y轴
			type: "value",
			name: "面积(㎡)",
			data: [],
		},

		series: [
			{
				name: "项目面积统计",
				type: "line", //类型为折线图
				stack: "面积",
				data: this.opinionData,
				areaStyle: {},
			},
		],
	});
},

若要和后端返回数据绑定，需要拿到后端返回数据向charts.setOption中的x、y轴做数据绑定：

getexcproc("sp_qyxmmjfqtj", {
				pkg: "pkg_qyxx",
				info: { kssj: kssj, jssj: jssj, qyid: qyid },
			}).then((Response) => {
				if (Response != null && Response.data.length > 0) {
					console.log("项目面积统计", Response);
					this.temp = Response.data;
					for (let i = 0; i < this.temp.length; i++) {
						var str = "";
						var date = "";
						str += this.temp[i].面积;
						date += this.temp[i].年月;
						this.opinionData.push(str);
						this.mounth.push(date);
					}
					this.charts.setOption({
						xAxis: {
							//设置x轴
							type: "category",
							boundaryGap: false, //坐标轴两边不留白
							data: this.mounth,
							name: "月份", //x轴name
						},
						series: [
							{
								name: "项目面积统计",
								type: "line", //类型为折线图
								stack: "面积",
								data: this.opinionData,
							},
						],
					});
				}

本身的toolbox属性可实现下载功能。

2.饼状图：
eg：

drawPieChart() {
			this.chartPie = echarts.init(document.getElementById("chartPie"));
			this.chartPie.setOption({
				//设置标题,副标题,以及标题位置居中
				title: {
					text: "人员统计",
					x: "center",
				},
				//具体点击某一项触发的样式内容
				tooltip: {
					trigger: "item",
					formatter: "{a} 
{b} : {c} ({d}%)",
				},
				//左上侧分类条形符
				legend: {
					orient: "vertical",
					right: 180,
					data: ["认证", "未认证"],
				},
				//饼状图类型以及数据源
				series: [
					{
						name: "统计数量",
						type: "pie",
						hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
						data: this.peoples,
						radius: ["50%", "70%"],
						//设置饼状图扇形区域的样式
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
						},
					},
				],
				color: ["#59d4d4", "#5db1ff"],
			});
		},

数据绑定同折线图，都需要调用chartPie.setOption.，相对应位置填值即可：

getexcproc("sp_qyrytj", {
			pkg: "pkg_qyxx",
			info: { kssj: kssj, jssj: jssj, qyid: qyid },
		}).then((Response) => {
			if (Response != undefined && Response.data) {
				let keyArray = Object.keys(Response.data[0]);
				for (var item in keyArray) {
					this.approveName.push(keyArray[item]);
				}
				for (let i = 0; i < Response.data.length; i++) {
					this.peoples[i].value = Response.data[i].认证;
					this.peoples[i].name = this.approveName[i];
					this.peoples[i + 1].value = Response.data[i].未认证;
					this.peoples[i + 1].name = this.approveName[i + 1];
				}
				this.chartPie.setOption({
					legend: {
						orient: "vertical",
						left: "left",
						data: this.approveName,
					},
					//饼状图类型以及数据源
					series: [
						{
							name: "统计数量",
							type: "pie",
							hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
							data: this.peoples,
							radius: ["50%", "70%"],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: "rgba(0, 0, 0, 0.5)",
								},
							},
						},
					],
				});
			}
		});
	},