<!-- **************************************NO.3 企业*************************************** -->
<template>
	<div class="chart-container">
		<div id="enterprise" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'enterprise',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			this.myEcharts()

		},

		methods:{
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
			
			myEcharts() {
				
				
				var chartDom = document.getElementById('enterprise');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
				var option;
				 var value = [987, 634, 413, 312, 123];
				var temp = 0;
				option = {
				  
				    tooltip: {
				        trigger: 'item',
				        formatter: '{a} <br/>{b} : {c} ',
				    },
				   
				    legend: {
				        // show: false,
						textStyle:{
							color:'#fffff',
							fontSize:10
						},
						itemWidth:19,
						top:'2%',
				        data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
				    },
				    series: [
				        {
				            name: '企业分布',
				            type: 'funnel',
							top:'25%',
				            left: '10%',
				            width: '70%',
							height:'68%',
							
				            label: {
				                show: true,
				                color: '#07faa9',
				                formatter: function () {
				                    for (var i in value) {
				                        console.log(value[i]);
				                        if (i == temp) {
				                            temp++;
				                            return value[i] ;
				                        }
				                    }
				                },
				            },
				            labelLine: {
				                show: true,
				            },
				            itemStyle: {
				                opacity: 1,
				            },
				            emphasis: {
				                label: {
				                    position: 'inside',
				                    // formatter: '{b}Expected: {c}%',
				                },
				            },
				            data: [
				                { value: 100, name: '双辽市', itemStyle: { color: '#4672F7' } },
				                { value: 80, name: '梨树县', itemStyle: { color: '#4C9DFF' } },
				                { value: 60, name: '伊通县', itemStyle: { color: '#36DC88' } },
				                { value: 40, name: '铁东区', itemStyle: { color: '#FBC71B' } },
				                { value: 20, name: '铁西区', itemStyle: { color: '#F9A646' } },
				            ],
				        },
				    ],
				};
				option && myChart.setOption(option);
			},

		},


	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.chart-container {
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 10px;
		display: flex;
	}




</style>
