Project_yhfu/src/views/bigdata/chart-hydrant.vue

<!-- **************************************NO.13 消火栓*************************************** -->
<template>
	<div class="chart-container">
		<div id="hydrant" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

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


				var chartDom = document.getElementById('hydrant');
				var myChart = echarts.init(chartDom);
				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
				var option;
				 var trafficWay = [
				    {
				        name: '双辽市',
				        value: 20,
				    },
				    {
				        name: '梨树县',
				        value: 20,
				    },
				    {
				        name: '伊通县',
				        value: 20,
				    },
				    {
				        name: '铁东区',
				        value: 25,
				    },
				    {
				        name: '铁西区',
				        value: 20,
				    },
				];
				
				var data = [];
				var color = ['#F6C558', '#25EFBD', '#21bad6', '#3283F5', '#E44660'];
				for (var i = 0; i < trafficWay.length; i++) {
				    data.push(
				        {
				            value: trafficWay[i].value,
				            name: trafficWay[i].name,
				            itemStyle: {
				                normal: {
				                    borderWidth: 8,
				                    shadowBlur: 0,
				                    borderColor: color[i],
				                    shadowColor: color[i],
				                },
				            },
				        },
				        {
				            value: 3,
				            name: '',
				            labelLine:{
				              show:false  
				            },
				            itemStyle: {
				                normal: {
				                    label: {
				                        show: false,
				                    },
				                    labelLine: {
				                        show: false,
				                    },
				                    color: 'rgba(0, 0, 0, 0)',
				                    borderColor: 'rgba(0, 0, 0, 0)',
				                    borderWidth: 0,
				                },
				            },
				        }
				    );
				}
				var seriesOption = [
				    {
				        name: '',
				        type: 'pie',
				        clockWise:true,
				        radius: [70, 70],
				        hoverAnimation: true,
				        itemStyle: {
				            normal: {
				                label: {
				                    show: true
				                },
				            },
				        },
				        data: data,
				        labelLine: {
				            normal: {
				                length: 20,
				                length2: 20,
				                lineStyle: {
				                    type: 'solid',
				                    color: '#31FFFF',
				                },
				            },
				        },
				        label: {
				            normal: {
				                formatter: function (params) {
				                    var result = '';
				                    if (params.name) {
				                        result +=  params.name+'{blue|' + params.value  + '}';
				                    }
				                    return result;
				                },
				                borderWidth: 0,
				                borderRadius: 4,
				                padding: [60, 0],
				                height: 10,
				                fontSize: 10,
				                align: 'center',
				                color: '#DEDEDE',
				                rich: {
				                    blue: {
				                        fontSize: 10,
				                        lineHeight: 5,
				                        color: '#31FFFF',
				                        padding: [0, 5],
				                    },
				                },
				            },
				        },
				    },
				    {
				        type: 'pie',
				        radius: [60, 60],
				        hoverAnimation: false,
				        clockWise: false,
				        itemStyle: {
				            normal: {
				                borderColor: 'rgba(2,178,247,0.2)',
				                borderWidth: 10,
				            },
				        },
				        label: {
				            show: false,
				        },
				        data: [200],
				    },
				    {
				        type: 'pie',
				        radius: [0, '20%'],
				        zlevel: 3,
				        silent: true,
				        label: {
				            normal: {
				                show: false,
				            },
				        },
				        labelLine: {
				            normal: {
				                show: false,
				            },
				        },
				        data: [
				            {
				                value: 6,
				                name: '总数',
				                itemStyle: {
				                    normal: {
				                        color: {
				                            x: 0,
				                            y: 0,
				                            x2: 1,
				                            y2: 0,
				                            type: 'linear',
				                            global: false,
				                            colorStops: [
				                                {
				                                    offset: 0,
				                                    color: 'rgba(2,178,247,0.2)',
				                                },
				                                {
				                                    offset: 1,
				                                    color: 'rgba(2,178,247,0.2)',
				                                },
				                            ],
				                        },
				                    },
				                },
				            },
				        ],
				    },
				];
				option = {
				    color: color,
				    tooltip: {
				        show: false,
				    },
				    toolbox: {
				        show: false,
				    },
				    series: seriesOption,
				};
				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>