<template>
	<div id="FunnelChart"></div>
</template>
<script setup name="FunnelChart">
	import { onMounted } from 'vue'
	import * as echarts from 'echarts'

	const option = {
		title: {
			text: ''
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c}%'
		},
		toolbox: {
			feature: {
				dataView: { readOnly: false },
				restore: {},
				saveAsImage: {}
			}
		},
		legend: {
			data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
		},
		series: [
			{
				name: 'Funnel',
				type: 'funnel',
				left: '10%',
				top: 60,
				bottom: 60,
				width: '80%',
				min: 0,
				max: 100,
				minSize: '0%',
				maxSize: '100%',
				sort: 'descending',
				gap: 2,
				label: {
					show: true,
					position: 'inside'
				},
				labelLine: {
					length: 10,
					lineStyle: {
						width: 1,
						type: 'solid'
					}
				},
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					label: {
						fontSize: 20
					}
				},
				data: [
					{ value: 60, name: 'Visit' },
					{ value: 40, name: 'Inquiry' },
					{ value: 20, name: 'Order' },
					{ value: 80, name: 'Click' },
					{ value: 100, name: 'Show' }
				]
			}
		]
	}

	onMounted(() => {
		let Echarts = echarts.init(document.getElementById('FunnelChart'))

		// 绘制图表
		Echarts.setOption(option)
		// 自适应大小
		window.onresize = () => {
			Echarts.resize()
		}
	})
</script>

<style scoped></style>
