<!-- **************************************NO.17 探测器*************************************** -->
<template>
	<div class="chart-container">
		<div id="detector1" style="width: 100%; height:25vh; ">
		</div>
		<div id="detector2" style="width: 100%; height:30vh; ">
		</div>
	</div>
</template>

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

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=gK9VdA5_F06NTrpr
			myEcharts1() {
				var chartDom = document.getElementById('detector1');
				var myChart = echarts.init(chartDom);
				var option;
				 option = {
				    tooltip: {
				        trigger: 'item',
				    },
				    color: ['#f7c778', '#d77169', '#c14f60', '#4d9564', '#215b85', ],
				  
				    series : [
				        {
				            name:'探测器分布',
				            type:'funnel',
				            x: '10%',
				            y: 15,
				            //x2: 80,
				            y2: 15,
				            width: '80%',
				            // height: {totalHeight} - y - y2,
				            min: 0,
				            max: 100,
				            minSize: '40%',
				            maxSize: '100%',
				            sort : 'descending', // 'ascending', 'descending'
				            gap :0,
				            data:[
				                {value:60, name:'双辽市'},
				                {value:40, name:'梨树县'},
				                {value:20, name:'伊通县'},
				                {value:80, name:'铁东区'},
				                {value:100, name:'铁西区'}
				            ].sort(function (a, b) { return a.value - b.value}),
				            roseType: true,
				            label: {
				                normal: {
				                    color:'#fff',
				                    formatter:'{b} {c}',
				                    position: 'center',
				                    rich:{
				                        style:{
				                            fontSize:'20px',
											color:'#ffffff',
				                        },
				                      
				                    }
				                }
				            },
				            itemStyle: {
				                normal: {
				                    borderWidth: 0,
				                    shadowBlur: 30,
				                    shadowOffsetX: 0,
				                    shadowOffsetY: 10,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				            
				        }
				        
				    ]
				};
				option && myChart.setOption(option);
			},

			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=APfCRAFKxpN_qWeq
			myEcharts2() {
				var chartDom = document.getElementById('detector2');
				var myChart = echarts.init(chartDom);
				var option;
				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
				let dataArray = {
				    xdataName: ['类型1', '类型1', '类型3', '类型3', '类型4', '类型5', '类型6'],
				    contractnum: [9999, 8888, 7777, 6666, 5555, 4444, 3333]
				}
				
				
				let color2 = [
				    [{ offset: 0, color: '#ff8881' }, { offset: 0.15, color: '#ff564c' },{ offset: 1, color: 'rgba(255,86,76, 0.08)' }],
				    [{ offset: 0, color: '#fff9e1' }, { offset: 0.15, color: '#ffe376' },{ offset: 1, color: 'rgba(255,209,26, 0.08)' }],
				    [{ offset: 0, color: '#f7ff98' }, { offset: 0.15, color: '#efff37' },{ offset: 1, color: 'rgba(239,255,55, 0.08)' }],
				    [{ offset: 0, color: '#32ffee' }, { offset: 0.15, color: '#cdfffb' },{ offset: 1, color: 'rgba(50,255,238, 0.1)' }],
				]
				// tooltip
				let tooltip = {
				    trigger: 'axis',
				    textStyle: { fontSize: 10 },
				    axisPointer: { type: 'cross' },
				    formatter: v => {
				        let [a] = v
				        return `
				            <div class='u-p-2'>
				                <div>${a.name}：${a.value}</div>
				            </div>
				        `
				    }
				}
				
				// grid
				let grid = { top: '20%', left: '10%', right: '10%', bottom: '20%' }
				
				// xAxis
				let xAxis = {
				    type: 'category',
				    boundaryGap: true,
				    data: dataArray.xdataName,
				    axisLine: { lineStyle: { color: '#fff' } },
				    axisLabel: {
				        textStyle: { fontSize: 10, color: '#fff' },
				        rotate: 0
				    },
				    axisTick: { show: false }, //坐标轴刻度
				}
				
				// yAxis
				let yAxis = {
				     show: false
				}
				
				// series
				let series = [{
				    name: '中高风险地区',
				    type: 'pictorialBar',
				    barWidth: 15,
				    // 三角矢量柱状图
				    symbol: 'path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z',
				    // 是否裁剪图形
				    symbolClip: false,
				    data: dataArray.contractnum,
				     itemStyle: {
				        color: params => {
				            return params.name === dataArray.xdataName[0] 
				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[0]) 
				            : params.name === dataArray.xdataName[1] 
				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[1]) 
				            : params.name === dataArray.xdataName[2]
				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[2]) 
				            : new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[3]) 
				        } 
				    },
				    label: {
				        show: true,
				        position: 'top',
				        formatter: params => { 
				            return params.name === dataArray.xdataName[0] 
				            ? `{a|${params.value}}` 
				            : params.name === dataArray.xdataName[1] 
				            ? `{b|${params.value}}` 
				            : params.name === dataArray.xdataName[2]
				            ? `{c|${params.value}}` 
				            : `{d|${params.value}}` 
				        },
				        rich: {
				            a: { color: '#ff564c' },
				            b: { color: '#ffd11a' },
				            c: { color: '#efff37' },
				            d: { color: '#32ffee' },
				
				        },
				        textStyle: { fontSize: 16 }
				    },
				}]
				
				// 渲染
				option = { tooltip, grid, xAxis, yAxis, series }
				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;
		flex-direction: column;
	}
</style>
