H5/shehong-vehicle-supervision.git

			@@ -213,7 +213,7 @@
			return {
			activeIndex: "1",
			activeIndex2: "1",
			countList: [], //预警情况统计数据
			countList: [1, 2, 3], //预警情况统计数据
			rankList: [
			{ name: "射洪客运公司", value: 90 },
			{ name: "滴滴网约车客运公司", value: 80 },
			@@ -260,10 +260,7 @@
			window.shotScreen = () => {
			this.shotScreen();
			};
			},
			onload() {
			// if (this.carList.length > 0) {
			// }

			},
			mounted() {
			let arr = [
			@@ -350,6 +347,8 @@
			this.initMap();
			setTimeout(() => {
			this.addMarker(this.carList, [105.444444, 31.523333]);
			this.getCountList();

			}, 1000);
			},
			methods: {
			@@ -537,133 +536,189 @@
			}
			},
			chartTnit(x, y1, y2) {
			// 基于准备好的dom，初始化echarts实例
			// 基于准备好的dom，初始化echarts实例 grid: {
			// width: "auto",
			// height: "auto",
			// left: "0",
			// right: "5%",
			// bottom: "0",
			// top: "15%",
			// containLabel: true,
			// },
			const myChart = echarts.init(document.getElementById("countChart"));
			console.log('22222222222222222',myChart)

			// 绘制数量图表
			myChart.setOption({
			tooltip: {
			trigger: "axis",
			axisPointer: {
			// 坐标轴指示器，坐标轴触发有效
			type: "cross", // 默认为直线，可选为：'line' \| 'cross'
			type: "shadow",
			},
			// formatter: '{b}月\n'
			},
			legend: {
			x: "right",
			itemWidth: 12,
			itemHeight: 12,
			itemGap: 56, // 设置间距
			textStyle: {
			color: "rgba(68, 68, 68, 0.65)",
			fontSize: 16,
			padding: [0, 0, 0, 8],
			},
			data: ["充电电费", "充电服务费"],
			},
			grid: {
			width: "auto",
			height: "auto",
			left: "0",
			right: "5%",
			bottom: "0",
			top: "15%",
			top: "5%",
			left: "3%",
			right: "4%",
			bottom: "0%",
			containLabel: true,
			},
			xAxis: {
			type: "category",
			axisLabel: {
			color: "rgba(80, 105, 122, 1)",
			fontSize: 15,
			lineHeight: 23,
			fontFamily: "PingFangSC, PingFang SC",
			// formatter:'{value}月'
			},
			axisTick: {
			show: true,
			},
			axisLine: {
			lineStyle: {
			color: "RGBA(234, 234, 234, 1)",
			xAxis: [
			{
			type: "category",
			data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],
			axisTick: {
			alignWithLabel: true,
			lineStyle: {
			color: "#777777",
			},
			},
			axisLabel: {
			color: "rgba(0, 0, 0, 0.45)",
			},
			},
			splitLine: {
			// 去掉网格线
			show: false,
			],
			yAxis: [
			{
			type: "value",
			},
			data: x,
			},
			yAxis: {
			type: "value",
			axisLabel: {
			color: "rgba(80, 105, 122, 1)",
			fontSize: 15,
			lineHeight: 23,
			fontFamily: "PingFangSC, PingFang SC",
			formatter: "{value} 元",
			},
			splitLine: {
			// show: false // 去掉网格线
			color: "rgb(242, 242, 242, 1)",
			},
			axisTick: {
			alignWithLabel: true,
			},
			},
			],
			series: [
			{
			name: "充电服务费",
			type: "bar",
			barMaxWidth: 13,
			// showBackground: true,
			barWidth: "20px",
			itemStyle: {
			color: new echarts.graphic.LinearGradient(
			0,
			0,
			0,
			1, // x0, y0, x1, y1
			[
			{ offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色
			{ offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色
			]
			),
			borderRadius: [20, 20, 20, 20],
			color: (params) => {
			console.log("111111", params);
			return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
			params.dataIndex
			];
			},
			},
			// label: {
			// show: true,
			// fontSize: 12,
			// lineHeight: 17,
			// // align:'right',
			// color: 'rgba(123, 123, 123, 1)',
			// position: 'right', // 设置标签显示在柱状条右侧
			// // formatter: function (params) {
			// // return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'
			// // } // 使用模板字符串保留两位小数

			// },
			data: y1,
			},
			{
			name: "充电电费",
			type: "bar",
			barMaxWidth: 13,
			// showBackground: true,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(
			0,
			0,
			0,
			1, // x0, y0, x1, y1
			[
			{ offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色
			{ offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色
			]
			),
			},

			data: y2,
			data: [10, 52, 20, 33, 39, 30, 20],
			},
			],
			});

			// myChart.setOption({
			// tooltip: {
			// trigger: "axis",
			// axisPointer: {
			// // 坐标轴指示器，坐标轴触发有效
			// type: "cross", // 默认为直线，可选为：'line' \| 'cross'
			// },
			// // formatter: '{b}月\n'
			// },
			// legend: {
			// x: "right",
			// itemWidth: 12,
			// itemHeight: 12,
			// itemGap: 56, // 设置间距
			// textStyle: {
			// color: "rgba(68, 68, 68, 0.65)",
			// fontSize: 16,
			// padding: [0, 0, 0, 8],
			// },
			// data: ["充电电费", "充电服务费"],
			// },

			// xAxis: {
			// type: "category",
			// axisLabel: {
			// color: "rgba(80, 105, 122, 1)",
			// fontSize: 15,
			// lineHeight: 23,
			// fontFamily: "PingFangSC, PingFang SC",
			// // formatter:'{value}月'
			// },
			// axisTick: {
			// show: true,
			// },
			// axisLine: {
			// lineStyle: {
			// color: "RGBA(234, 234, 234, 1)",
			// },
			// },
			// splitLine: {
			// // 去掉网格线
			// show: false,
			// },
			// data: x,
			// },
			// yAxis: {
			// type: "value",
			// axisLabel: {
			// color: "rgba(80, 105, 122, 1)",
			// fontSize: 15,
			// lineHeight: 23,
			// fontFamily: "PingFangSC, PingFang SC",
			// formatter: "{value} 元",
			// },
			// splitLine: {
			// // show: false // 去掉网格线
			// color: "rgb(242, 242, 242, 1)",
			// },
			// axisTick: {
			// alignWithLabel: true,
			// },
			// },
			// series: [
			// {
			// name: "充电服务费",
			// type: "bar",
			// barMaxWidth: 13,
			// // showBackground: true,
			// itemStyle: {
			// color: new echarts.graphic.LinearGradient(
			// 0,
			// 0,
			// 0,
			// 1, // x0, y0, x1, y1
			// [
			// { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色
			// { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色
			// ]
			// ),
			// },
			// // label: {
			// // show: true,
			// // fontSize: 12,
			// // lineHeight: 17,
			// // // align:'right',
			// // color: 'rgba(123, 123, 123, 1)',
			// // position: 'right', // 设置标签显示在柱状条右侧
			// // // formatter: function (params) {
			// // // return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'
			// // // } // 使用模板字符串保留两位小数

			// // },
			// data: y1,
			// },
			// {
			// name: "充电电费",
			// type: "bar",
			// barMaxWidth: 13,
			// // showBackground: true,
			// itemStyle: {
			// color: new echarts.graphic.LinearGradient(
			// 0,
			// 0,
			// 0,
			// 1, // x0, y0, x1, y1
			// [
			// { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色
			// { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色
			// ]
			// ),
			// },

			// data: y2,
			// },
			// ],
			// });
			myChart.resize();
			},
			// 获取预警排行榜数据
			@@ -1106,7 +1161,7 @@
			.warnCount {
			position: relative;

			.countChart {
			#countChart {
			width: 453px;
			height: 150px;
			}