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>300</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>人数：30人</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>人数：30人</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>人数：30人</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>人数：30人</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: [150, 110, 160, 155, 110]
			      }]
		  })
	  }
  },
  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>