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

最新推荐文章于 2024-08-01 13:53:35 发布

咧嘴笑的小孩

最新推荐文章于 2024-08-01 13:53:35 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_42094027/article/details/101546358

版权

本文介绍了如何在Vue项目中使用ECharts创建雷达图，并针对移动端实现自适应布局。通过实例代码展示如何初始化图表并调整大小以适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

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: {
			    			lineSty