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

<!-- **************************************NO.4 隐患*************************************** -->
<template>
	<div class="chart-container">
		<div id="danger" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'danger',
		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('danger');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
				var option;
				let data = [582, 421, 622, 625, 265]
				let indicator = [{
						name: '双辽市',
						max: 1000
					},
					{
						name: '梨树县',
						max: 1000
					},
					{
						name: '伊通县',
						max: 1000
					},
					{
						name: '铁东区',
						max: 1000
					},
					{
						name: '铁西区',
						max: 1000
					},
				]

				option = {

					radar: {
						center: ['50%', '50%'],
						radius: '89%',
						name: {
							formatter: function(name, indicator) {
								let arr;
								//   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
								//         arr = [
								//         '{a|'+name+'}{b|'+indicator.value+'万}'
								//     ]
								//   }else{
								arr = [
									'{a|' + name + '}'
								]
								//   }

								return arr.join('\n')
							},
							textStyle: {
								rich: { //根据文字的组设置格式
									a: {
										color: '#13ffdc',
										fontSize: 12,
										fontFamily: 'Source Han Sans CN',
									},
									// b:{
									//     fontSize:14,
									//     verticalAlign:'top',
									//     width:57,
									//     color:'#8E88FE',
									//     fontWeight:600,
									//     align:'center'
									// },
								}

							}
						},
						nameGap: 0,
						indicator: indicator,
						splitLine: {
							show: false

						},
						splitArea: {
							show: false
						},
						axisLine: {
							show: false
						}
					},
					series: [{
							// name: '家庭融合包',
							type: 'radar',
							data: [data],
							// value:14,
							label: {
								show: true,
								formatter: function(params) {
									console.log(params)
									return params.value ;
								},
								color: '#ffffff',
								// position:[-20,-10,-10,-10],
								align: 'right',
								distance: 10,
								align: 'right'
							},
							symbolSize: [6, 6],
							lineStyle: { //边缘颜色
								width: 0
							},
							itemStyle: {
								borderWidth: 1,
								color: '#fff',
								borderColor: '#F2F063',
							},
							areaStyle: {
								color: '#7D77F1',
								opacity: 0.6
							}
						},
						{
							type: 'radar',
							data: [
								[1000, 1000, 1000, 1000, 1000, 1000],
							],
							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.06
							}
						},
						{
							type: 'radar',
							data: [
								[900, 900, 900, 900, 900, 900],
							],

							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#2C72C8'
							},

							areaStyle: {
								color: '#2C72C8',
								opacity: 0.12
							}
						},
						{
							type: 'radar',
							data: [
								[800, 800, 800, 800, 800, 800]
							],

							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.18
							}
						},
						{
							type: 'radar',
							data: [
								[700, 700, 700, 700, 700, 700]
							],

							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.19
							}
						},
						{
							type: 'radar',
							data: [
								[600, 600, 600, 600, 600, 600],
							],

							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.17
							}
						},
						{
							type: 'radar',
							data: [
								[500, 500, 500, 500, 500, 500],
							],
							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.16
							}
						},
						{
							type: 'radar',
							data: [
								[400, 400, 400, 400, 400, 400],
							],

							symbol: 'none',
							lineStyle: {
								width: 0
							},
							itemStyle: {
								color: '#4175F5'
							},

							areaStyle: {
								color: '#4175F5',
								opacity: 0.13
							}
						},
					]
				};
				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>