vue中echarts爬坑笔记（三） 雷达图

过程中遇到的问题：

1. npm引入的echarts，加载过慢，页面加载竟然超过14s，尝试通过按需引入并没有有效的解决问题
   解决方案： 通过使用cdn引入

	// index.html (官方推荐的cdn)
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2"></script>
  
	// vue.config.js
	configureWebpack: config => {
    config.externals = {
      'echarts': 'echarts'
    }
  },

2. 雷达图的标题出现截断，上下左右展示不全
   解决方案： radar中配置radius: ‘75%’
3. tab切换后再切回会出现雷达图的尺寸缩小
   解决方案：增加延时

setTimeout(() => { // 为了解决组件销毁后再重新展示后图变形的问题
  state.mychart = state.echarts.init(state.radarRef)
  state.mychart.setOption(option, true)
}, 500)

4. 警告提示 Can’t get dom width or height！
   解决方案： 宽高设定确定的宽高，不能使用百分比

效果图

关键代码

<div id="myChart" :style="{width: '375px', height: '202px'}"></div>
// 宽高不能使用百分比，会提示获取不到dom的宽高

// 引入
import * as echarts from 'echarts'
// 配置项
const option = {
  color: ['rgba(64, 119, 255, 0.6)', 'rgba(236, 112, 192, 0.6)'], // 雷达图两项圈线的颜色
  legend: { // 图例
    data: ['Allocated Budget', 'Actual Spending'], //与series的name对应
    bottom: '0px', // 图例距底距离
     orient: 'horizontal', // 水平方向， 'vertical' 竖直方向
    itemWidth: 10, // 图例图形宽高
    itemHeight: 8,
    itemGap: 30, // 图例各项之间距离
    textStyle: { // 图例字样式
      color: '#999',
      fontSize: 12,
      lineHeight: 14
    }
  },
  radar: {
  	radius: '75%', // 雷达图半径，可以解决标题展示不全的问题
    indicator: [{ 
	   	name: 'Sales', // 如需换行的内容用'\n'连接
	   	max: 6500, 最大值
	   	axisLabel: {
	   		show: true, // 展示刻度线，不设置默认不展示
			color: '#8c8c8c', // 刻度颜色
	           fontSize: 6 // 刻度字号
		 	} },
	      { name: 'Administration', max: 16000 },
	      { name: 'Information Technology', max: 30000 },
	      { name: 'Development', max: 52000 },
	      { name: 'Marketing', max: 25000 }]
    splitNumber: 4, // 分割线条数
    axisName: { // 坐标名样式
      color: '#333',
      lineHeight: 17,
      textAlign: 'center'
    },
    axisNameGap: 5, // 坐标名和图中间距离
    splitArea: { // 分割区域样式，默认为白灰间隔展示
      areaStyle: {
        color: '#fff'
      }
    }
  },
  series: [{
      name: 'Budget vs spending',
      type: 'radar',
      symbol: 'none', // 去掉折线连接处的圆点
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget',
          areaStyle: { // 区域样式
            color: '#4077FF',
            opacity: 0.1
          }
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending',
          areaStyle: {
            color: '#EC70C0',
            opacity: 0.1
          }
        }
      ]
    }]
}
setTimeout(() => { // 为了解决组件销毁后再重新展示后图变形的问题
  state.mychart = state.echarts.init(state.radarRef)
  state.mychart.setOption(option, true)
}, 500)