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-col :span="12">
            <div class="record">
              <div>0进展指标 <span class="num">2</span>个</div>
            </div>
          </el-col> -->
				</el-row>
			</div>
		</container2>
		<container2 title="收入概况" style="margin-top: 10px">
			<div class="wrap">
				<el-row class="content2">
					<el-col :span="24">
						<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 {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
export default {
	// mixins: [resize],
	name: 'left1',
	components: {
		rocketTit,
		container2,
		bigScreenTabs,
	},
	data() {
		return {
			index: 0,

			data: [
				{
					year: '2021-01',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-02',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-03',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-04',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-05',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-06',
					value: ~~(Math.random() * 100),
					category: '部门一',
				},
				{
					year: '2021-01',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
				{
					year: '2021-02',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
				{
					year: '2021-03',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
				{
					year: '2021-04',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
				{
					year: '2021-05',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
				{
					year: '2021-06',
					value: ~~(Math.random() * 100),
					category: '部门二',
				},
			],
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
			this.initLine()
		})
	},
	beforeDestroy() {},
	methods: {
		initChart() {
			const { Liquid, Pie } = G2Plot
			const data = [
				{ type: '类别一', value: 235 },
				{ type: '类别二', value: 565 },
				{ type: '类别三', value: 927 },
				{ type: '类别四', value: 574 },
				{ type: '类别五', value: 214 },
				{ type: '类别六', value: 214 },
				{ type: '类别七', value: 214 },
				{ type: '类别八', value: 214 },
				{ type: '类别九', value: 214 },
				{ type: '类别十', value: 214 },
			]
			const calcAverageValue = (data, type) => {
				const items = data.filter(d => d.type === type)
				return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
			}
			const liquidPlot = new Pie(this.$refs.left1, {
				data: data,
				angleField: 'value',
				colorField: 'type',
				legend: {
					itemHeight: 13,
					pageNavigator: {
						marker: {
							style: {
								// 非激活，不可点击态时的填充色设置
								inactiveFill: '#fff',
								inactiveOpacity: 0.45,
								// 默认填充色设置
								fill: '#fff',
								opacity: 0.8,
								size: 12,
							},
						},
						text: {
							style: {
								fill: '#fff',
								fontSize: 8,
							},
						},
					},
					offsetX: -30,
					itemName: {
						style: {
							fill: '#fff',
						},
					},
					itemValue: {
						formatter: (text, item) => {
							return calcAverageValue(data, item.value)
						},
						style: (item, index) => {
							return {
								fill: '#fff',
							}
						},
					},
				},
				// legend: {
				//   position: 'right-top',
				//   offsetX: 8,
				//   title: {
				//     text: '产品类别 (平均销售量）',
				//     spacing: 8,
				//   },
				//   itemName: {
				//     style: (item, index) => {
				//       return {
				//         fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green',
				//       };
				//     },
				//   },
				//   itemValue: {
				//     formatter: (text, item) => {
				//       return calcAverageValue(data, item.value);
				//     },
				//     style: (item, index) => {
				//       return {
				//         fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green',
				//       };
				//     },
				//   },
				// },
				color: ['#4e7cde', '#4eba97', '#506186', '#d2a31d', '#c65a49'],
				radius: 0.9,
				label: {
					type: 'inner',
					offset: '-30%',
					content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
					style: {
						fontSize: 14,
						textAlign: 'center',
					},
				},
				interactions: [{ type: 'element-active' }],
				pieStyle: {
					lineWidth: 0,
				},
			})
			// const liquidPlot = new Liquid(this.$refs.left1, {
			//   percent: 0.25,
			//   statistic: {
			//     content: {
			//       style: {
			//         color: 'rgb(255,255,255)',
			//         fontSize: 18,
			//       },
			//       customHtml: (container, view, { percent }) => {
			//         const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
			//         return `<div>${text}</div>`;
			//       },
			//     }
			//   },
			//   outline: {
			//     border: 4,
			//     style: {
			//       stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)'
			//     }
			//   },
			//   wave: {
			//     length: 128,
			//   },
			// });
			console.log(liquidPlot.render())
			// liquidPlot.render();
		},
		initLine() {
			const { Line } = G2Plot
			let arr = this.data
			const line = new Line(this.$refs.left2, {
				//
			})
			// line.render()
		},
	},
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

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

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

	.record {
		display: flex;
		align-items: center;
		height: 192px;
		padding-left: 30px;
		> div {
			flex: 1;
			position: relative;
			::before {
				content: '';
				display: inline-block;
				width: 9px;
				height: 9px;
				background: #ffffff;
				border-radius: 50%;
				position: absolute;
				left: -18px;
				top: 18px;
			}
		}
	}
}

.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;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.titWrap {
		height: 30px;
	}

	.tabContent {
		flex: 1;
	}
	.tabContent > div {
		width: 100%;
		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>