yj_vue3/src/components/Rightnav.vue

<template>
	<div class="right-nav">
		<div class="nav-cont">
			<div class="nav-tit">
				<div class="nav-circle">
					<img src="../assets/images/yj-tity1.png" />
				</div>
				<p>救援队伍</p>
			</div>
			<div class="jydw-zs">
				<span>救援队伍总数：</span>
				<b>150</b>
				<span>人</span>
			</div>
			<div id="Jydw"></div>
			<div class="jydw-list scroll h-50">
				<div class="jydw-li">
					<img src="../assets/images/yj-img1.png"/>
					<div class="jydw-txt">
						<h2>长胜村救援队伍</h2>
						<p>队长：周含章</p>
						<p>人数：36人</p>
					</div>
				</div>
				<div class="jydw-li">
					<img src="../assets/images/yj-img1.png"/>
					<div class="jydw-txt">
						<h2>兴安村救援队伍</h2>
						<p>队长：杨文琴</p>
						<p>人数：30人</p>
					</div>
				</div>
				<div class="jydw-li">
					<img src="../assets/images/yj-img1.png"/>
					<div class="jydw-txt">
						<h2>太阳村救援队伍</h2>
						<p>队长：张洁玲</p>
						<p>人数：28人</p>
					</div>
				</div>
				<div class="jydw-li">
					<img src="../assets/images/yj-img1.png"/>
					<div class="jydw-txt">
						<h2>实现村救援队伍</h2>
						<p>队长：刘志义</p>
						<p>人数：32人</p>
					</div>
				</div>
				<div class="jydw-li">
					<img src="../assets/images/yj-img1.png"/>
					<div class="jydw-txt">
						<h2>勤劳村救援队伍</h2>
						<p>队长：周铭宇</p>
						<p>人数：24人</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'Rightnav',
		props: {

		},
		methods:{
			initCharts (){
				let myChart = echarts.init(document.getElementById('Jydw'));
				myChart.setOption({
					tooltip: {
						show: true,
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'line', // 默认为直线，可选为：'line' | 'shadow'
							//修改指识线的颜色
							lineStyle: {
								color: "transparent"
							}
						},
						formatter: function(params) {
							console.log(params)
						},
					},
					grid: {
						top: 20,
						bottom: 20,
						left: 30,
						right: 20
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false,
							alignWithLabel: true, //true 的时候有效，可以保证刻度线和标签对齐
						},
						axisLine: {
							lineStyle: {
								color: "#fff"
							}
						},
						data: ['长胜村', '兴安村', '太阳村', '实现村', '勤劳村']
					}, ],
					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(136, 159, 204, .2)"
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#fff"
							}
						},
						axisTick: {
							show: false
						},
					}],
					//手势放大柱状图折线图
					dataZoom: {
						type: "inside"
					},
					series: [{
						//给折线图下方添加阴影
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
											offset: 0,
											color: 'rgba(0, 102, 255,0.4)'
										},
											{
												offset: 1,
												color: 'rgba(0, 102, 255,0)'
											}
										],
										false
								),
								shadowColor: 'rgba(59, 34, 201,1)',
								shadowBlur: 10
							}
						},
						name: '',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								show: false,
								color: "#00a0fc", //改变折线点的颜色
								lineStyle: {
									color: "#00a0fc" //改变折线颜色
								},
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#999999',
										fontSize: 10
									}
								},

							},
							emphasis: {
								show: true,
								color: "#00a0fc",
								borderColor: "#ffffff",
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#fff',
										fontSize: 10,
										padding: [10, 10, 10, 10],
										backgroundColor: "rgba(24, 71, 185, .6)",
										borderRadius: 4,
									}
								}
							}
						},
						data: [36, 30, 28, 32, 24]
					}]
				})
			}
		},
		mounted(){
			this.initCharts();
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.right-nav{
		background: url("../assets/images/yj-rightnavbg.png") no-repeat center;
		background-size: cover;
		position: absolute;
		right: 0px;
		top:0px;
		height: 100vh;
		z-index: 3;
		width: 382px;
	}
	.nav-cont{
		width: 330px;
		height: calc(100vh - 17vh);
		margin-top: 10vh;
		margin: 8vh 19px 0px 0px;
		float: right;
	}
	.jydw-zs{
		display: flex;
		flex-direction: row;
		margin:15px 0px;
		padding-left: 15px;
		align-items: baseline;
	}
	.jydw-zs span{
		font-size: 14px;
		color: #fff;
	}
	.jydw-zs b{
		font-size: 28px;
		color: #23d6df;
		padding: 0px 5px;
		font-family: myfont2;
	}
	#Jydw{
		width: 98%;
		height: 200px;
		margin-left: 20px;
	}
	.jydw-list{
		display: flex;
		flex-direction: column;
		margin: 20px 20px;
	}
	.jydw-list .jydw-li{
		display: flex;
		flex-direction: row;
		margin-bottom: 5px;
		cursor: pointer;
		width: 100%;
		text-align: left;
		padding: 4px 0px;
	}
	.jydw-list .jydw-li:hover{
		background: rgb(13 69 155 / 43%);
	}
	.jydw-list .jydw-li img{
		width: 100px;
		height: 68px;
		margin-right: 15px;
	}
	.jydw-list .jydw-li h2{
		color: #23d6df;
		font-size: 16px;
		font-weight: 900;
		padding-bottom: 5px;
	}
	.jydw-list .jydw-li p{
		color: #fff;
		font-size: 14px;
		line-height: 20px;
	}


</style>