vis389/src/views/bigScreen/drivingCabin/left1.vue

<template>
	<div>
		<container2 title="经营责任书完成概况">
			<div class="wrap">
				<el-row class="content1">
					<el-col :span="24">
						<div id="left1" ref="left1" class="chart1"></div>
					</el-col>
				</el-row>
				<div class="box">
					<span style="font-size: 25px; margin-right: 3px">·</span>
					<span>总完成任务/完成率</span>
					<i class="num">55/80%</i>
					<progressBar :percentage="70" />
					<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
				</div>
			</div>
		</container2>
		<container2 title="收入概况" style="margin-top: 10px">
			<div style="height: 100%; width: 100%" ref="left2"></div>
			<!-- <div class="wrap">
				<el-row class="content2">
					<el-col :span="24" style="height: 100%">
						<div id="left2" ref="left2" class="chart2"></div>
					</el-col>
				</el-row>
			</div> -->
		</container2>
	</div>
</template>

<script>
import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	// mixins: [resize],
	name: 'left1',
	components: {
		rocketTit,
		container2,
		bigScreenTabs,
		progressBar,
	},
	data() {
		return {
			index: 0,
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
			this.initLine()
		})
	},
	beforeDestroy() {},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$refs.left1, 'macarons')
			this.setOptions()
		},
		setOptions() {
			this.chart.setOption({
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)',
				},
				legend: {
					data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
					orient: 'vertical',
					// left: '60%',
					right: '2%',
					y: 'center',
					textStyle: {
						//图例文字的样式
						color: '#fff',
						fontSize: 16,
					},
				},
				series: [
					{
						name: '概括',
						type: 'pie',
						radius: [0, '85%'],
						center: ['35%', '50%'],
						label: {
							formatter: '{d}%',
							position: 'inner',
							fontSize: 14,
						},
						labelLine: {
							show: false,
						},
						data: [
							{ value: 154, name: '类别一' },
							{ value: 775, name: '类别二' },
							{ value: 679, name: '类别三' },
							{ value: 679, name: '类别四' },
							{ value: 679, name: '类别五' },
							{ value: 679, name: '类别六' },
							{ value: 679, name: '类别七' },
							{ value: 679, name: '类别八' },
						],
					},
				],
			})
		},
		initLine() {
			this.chart = echarts.init(this.$refs.left2)
			this.setOptions2()
		},
		setOptions2() {
			this.chart.setOption({
				tooltip: {
					trigger: 'axis',
					formatter: '{a1}<br/>{b1}：{c1}%',
				},
				legend: {
					data: ['收入', '实际', '目标'],
					textStyle: {
						color: '#fff', //legend字体颜色
					},
				},
				grid: {
					containLabel: true,
					left: 50,
					top: 30,
					bottom: 50,
				},
				xAxis: {
					data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08'],
					axisLine: {
						lineStyle: {
							color: 'rgb(255, 255, 255)',
						},
					},
				},
				dataZoom: {
					type: 'slider',
					start: 0,
					end: 50,
				},
				color: ['#ccc', 'red'],
				yAxis: {
					splitLine: {
						show: true,
						//  改变轴线颜色
						lineStyle: {
							// 使用深浅的间隔色
							color: ['rgba(255, 255, 255,.5)'],
						},
					},
					axisLabel: {
						formatter: '{value}%',
					},
					axisLine: {
						lineStyle: {
							color: 'rgb(255, 255, 255)',
						},
					},
				},
				series: [
					{
						name: '收入',
						type: 'bar',
						z: '-1',
						barGap: '-75%',
						barWidth: 30,
						itemStyle: {
							color: 'rgba(85, 197, 162, .3)',
						},
						data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
					},
					{
						name: '实际',
						type: 'bar',
						barWidth: 15,
						position: [0, 0],
						itemStyle: {
							color: 'rgba(90, 216, 166, 0.85)',
						},
						data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95],
					},
					{
						name: '目标',
						type: 'scatter',
						symbol: 'rect',
						symbolSize: [30, 4],
						symbolOffset: [3, 0],
						position: [0, 0],
						itemStyle: {
							color: '#F6D97E',
						},
						data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20],
					},
				],
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	.box {
		padding: 0 0 5px 15px;
		display: flex;
		align-items: center;
		.num {
			font-size: 24px;
			font-weight: 600;
			margin: 0 10px;
		}
	}
}

.content1 {
	// height: 200px;
	height: 100%;

	.chart1 {
		margin: 0 auto;
		width: 100%;
		height: 192px;
		background: transparent;
	}
}

.num {
	font-size: 30px;
	font-family: Roboto-BlackItalic, Roboto;
	font-weight: normal;
	color: #91d5fe;
	vertical-align: sub;
	//   margin-right: 3px;
}

.content2 {
	padding: 20px;
	flex: 1;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.chart2 {
		height: 100%;
	}

	.tit {
		font-size: 16px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #ffffff;
		line-height: 22px;
		position: relative;
		padding-left: 15px;
	}
	.tit::after {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 0px;
		width: 4px;
		height: 16px;
		background: #00ffff;
	}
}
</style>