vue 项目中 echarts 雷达图在移动端自适应

initCharts(){
let myChart = this.$echarts.init(document.getElementById(“myEcharts”));

**window.addEventListener("resize", function() {//雷达图自适应屏幕
					myChart.resize();
				})
```**
			    let option = {
			    	title: {
			    		text: ''
			    	},
			    	color:['#6A60FF','#44E1B2'],
			    	legend: {
			    		data: ['张三', '李四']
			    	},
			    	radar: [
			    	{
			    		splitArea: {
			    			areaStyle: {
			    				color: ['rgba(114, 172, 209, 0.2)',
			    				'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
			    				'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
			    				shadowColor: 'rgba(0, 0, 0, 0.3)',
			    				shadowBlur: 10
			    			}
			    		},
			    		axisLine: {
			    			lineStyle: {
			    				color: 'rgba(255, 255, 255, 0.5)'
			    			}
			    		},
			    		splitLine: {
			    			lineStyle: {
			    				color: 'rgba(255, 255, 255, 0.5)'
			    			}
			    		}
			    	},
			    	{
			    		indicator: [
			    		{ text: '语文', max: 150 },
			    		{ text: '数学', max: 150 },
			    		{ text: '英语', max: 150 },
			    		{ text: '物理', max: 120 },
			    		{ text: '化学', max: 108 },
			    		{ text: '生物', max: 72 }
			    		],
			    		center: ['50%', '55%'],
			    		radius: 100
			    	}
			    	],
			    	series: [
			    	{
			    		name: '成绩单',
			    		type: 'radar',
			    		radarIndex: 1,
			    		data: [
			    		{
			    			value: [120, 118, 130, 100, 99, 70],
			    			name: '张三',
			    			areaStyle: {
			    				normal: {
			    					opacity: 0.7,
			    					color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
			    					{
			    						color: '#6A60FF',
			    						offset: 0
			    					},
			    					{
			    						color: '#6A60FF',
			    						offset: 1
			    					}
			    					])
			    				}
			    			},
			    			label: {
			    				normal: {
			    					show: true,
			    					formatter:function(params) {
			    						return params.value;
			    					}
			    				}
			    			}
			    		},
			    		{
			    			value: [90, 113, 140, 30, 70, 60],
			    			name: '李四',
			    			label: {
			    				normal: {
			    					show: true,
			    					formatter:function(params) {
			    						return params.value;
			    					}
			    				}
			    			},
			    			areaStyle: {
			    				normal: {
			    					opacity: 0.7,
			    					color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
			    					{
			    						color: '#44E1B2',
			    						offset: 0
			    					},
			    					{
			    						color: '#44E1B2',
			    						offset: 1
			    					}
			    					])
			    				}
			    			}
			    		}
			    		]
			    	}
			    	]
			    }
    			myChart.setOption(option);
			},

你可能感兴趣的:(vue 项目中 echarts 雷达图在移动端自适应)