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" />
				</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 colorList from '@/utils/colorPalette'
// 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 {
			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: '类别八' },
			],
			colorList,
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
			this.initLine()
		})
	},
	beforeDestroy() {},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$refs.left1, 'macarons')
			this.setOptions()
		},
		setOptions() {
			const calcAverageValue = (data, name) => {
				const items = data.filter(d => d.name === name)
				return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
			}
			this.chart.setOption({
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)',
				},
				color: this.colorList,
				legend: {
					data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
					orient: 'vertical',
					// left: '60%',
					right: '2%',
					y: 'center',
					textStyle: {
						//图例文字的样式
						color: '#fff',
						fontSize: 16,
					},
					// formatter: value => {
					// 	return value + calcAverageValue(this.data, value)
					// },
				},
				series: [
					{
						name: '概括',
						type: 'pie',
						radius: [0, '85%'],
						center: ['35%', '50%'],
						label: {
							formatter: '',
							position: 'inner',
							fontSize: 14,
						},
						labelLine: {
							show: false,
						},
						data: this.data,
					},
				],
			})
		},
		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字体颜色
					},
					// selectedMode: false,
				},
				grid: {
					containLabel: true,
					left: 20,
					right: 10,
					top: 30,
					bottom: 50,
				},
				xAxis: {
					data: [
						'2021-01',
						'2021-02',
						'2021-03',
						'2021-04',
						'2021-05',
						'2021-06',
						'2021-07',
						'2021-08',
						'2021-09',
						'2021-10',
						'2021-11',
						'2021-12',
					],
					axisLine: {
						lineStyle: {
							color: 'rgb(255, 255, 255)',
						},
					},
				},
				dataZoom: {
					type: 'slider',
					start: 0,
					end: 50,
				},
				color: ['#ccc', 'red'],
				yAxis: [
					{
						name: '件',
						splitLine: {
							show: true,
							//  改变轴线颜色
							lineStyle: {
								// 使用深浅的间隔色
								color: ['rgba(255, 255, 255,.5)'],
							},
						},
						axisLabel: {
							formatter: '{value}',
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
					{
						type: 'value',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value} %',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						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, 10, 20, 30, 10, 70, 75],
					},
					{
						name: '目标',
						type: 'scatter',
						symbol: 'rect',
						symbolSize: [30, 4],
						symbolOffset: [3, 0],
						position: [0, 0],
						itemStyle: {
							color: '#F6D97E',
						},
						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
					},
				],
			})
		},
	},
}
</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>