<!-- **************************************NO.12 处理中心*************************************** -->
<template>
	<div class="chart-container">
		<div id="processing" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
			myEcharts() {


				var chartDom = document.getElementById('processing');
				var myChart = echarts.init(chartDom);
				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
				var option;
				let dataList = [{
				    name: '双辽市',
				    value: '56'
				}, {
				    name: '梨树县',
				    value: '75'
				}, {
				    name: '伊通县',
				    value: '85'
				}, {
				    name: '铁东区',
				    value: '78'
				}, {
				    name: '铁西区',
				    value: '76'
				}];
				
				option = {
				        grid: {
				            left: "16%", //距离左边的距离
				            right: "12%", //距离右边的距离
				            bottom: "15%", //距离下边的距离
				            top: "10%" //距离上边的距离
				        },
				        title: {
				            text: '',
				            left: 26,
				            top: 26,
				            textStyle: {
				                color: '#FFFFFF',
				                fontSize: 15,
				                fontWeight: 50000,
				                fontFamily: 'PingFang SC'
				            }
				        },
				        tooltip: {
				            trigger: "axis",
				            axisPointer: {
				                type: "shadow",
				                crossStyle: {
				                    color: "#134d74"
				                }
				            },
				        },
				        xAxis: [{
				            type: "category",
				            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
				            axisLabel: {
				                textStyle: {
				                    color: "#42a7ff",
				                    fontSize: 10,
				                }
				            },
				            axisLine: {
				                show: false
				            },
				            axisTick: {
				                show: false
				            }
				        }],
				        yAxis: [{
				                type: "value",
				                axisLabel: {
				                    formatter: "{value}%",
				                    textStyle: {
				                        color: "#42a7ff",
				                        fontSize: 10,
				                    },
				                },
				                splitLine: {
				                    lineStyle: {
				                        color: "#1f3335"
				                    }
				                },
				                axisLine: {
				                    show: false
				                },
				                axisTick: {
				                    show: false
				                }
				            },
				            
				        ],
				        dataZoom: [{
				            type: 'inside',
				            start: 0,
				            end: dataList.length > 15 ? 35 : 100
				        }],
				        series: [{
				                name: "",
				                type: "bar",
				                data: dataList,
				                barGap: '-100%',
				                barCategoryGap: '80%',
				                itemStyle: {
				                    normal: {
				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                                offset: 0,
				                                color: 'rgba(27,168,240,1)'
				                            },
				                            {
				                                offset: 1,
				                                color: 'rgba(32,40,95,0.3)'
				                            }
				                        ])
				                    },
				                    emphasis: {
				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                                offset: 0,
				                                color: 'rgba(27,168,240,1)'
				                            },
				                            {
				                                offset: 1,
				                                color: 'rgba(27,168,240,0.3)'
				                            }
				                        ])
				                    }
				                },
				            },
				            
				        ]
				};
				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>
