JT-CIM/src/views/Map3d/components/waterChart.vue

<template>
	<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
	import * as echarts from "echarts";

	export default {
		data() {
			return {
				xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
				yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
				taskDate: [10, 11, 9, 17, 14, 13, 14],
				myChartStyle: {
					float: "left",
					width: "100%",
					height: "279rem"
				} //图表样式
			};
		},
		mounted() {
			this.initEcharts();
		},
		methods: {
			initEcharts() {
				// 多列柱状图
				const mulColumnZZTData = {
					xAxis: {
						data: this.xData,
					},
					// 图例
					legend: {
						data: ["人数", "任务数"],
						top: "5%",
						textStyle: {
							color: '#ffffff' //字体颜色
						},

					},
					yAxis: {},
					series: [{
							type: "bar", //形状为柱状图
							data: this.yData,
							name: "人数", // legend属性
							label: {
								// 柱状图上方文本标签，默认展示数值信息
								show: false,
								position: "top"
							}
						},
						{
							type: "bar", //形状为柱状图
							data: this.taskDate,
							name: "任务数", // legend属性
							label: {
								// 柱状图上方文本标签，默认展示数值信息
								show: false,
								position: "top"
							}
						}
					]
				};
				const myChart = echarts.init(document.getElementById("mychart"));
				myChart.setOption(mulColumnZZTData);
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			}
		}
	};
</script>
<style lang="scss" scoped>

</style>