vue-chartjs 是基于 Chart.js 实现的 vue 版本

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网

1. vue-chartjs
2. vue-chartjs-docs

需要写在前面的注意点

不同图表该使用什么名称进行引用

1. 个人认为不论是安装方式，还是使用方式，chartjs 的文档都写的比较清晰
2. 但唯独不同图表类型的引用名称，真的很难以找到
3. 于是翻阅源码查找到如下对应名称

Radar 雷达图的使用

目录结构

1. 使用如下目录结构是因为图表存在多种类型，每种都需要单独引用，所以应该单独创建一个初始化组件

组件内容

1. 根据官方文档中的实现方式，在引用组件时，需要先将组件进行一次实现，之后再到具体的 DOM 结构中引用这个实现

<script>
  import { Radar, mixins } from 'vue-chartjs'

  const {reactiveProp} = mixins

  export default {
    name: 'inRadar',
    extends: Radar,
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

组件引用

1. 按照如下引用方式，一开始很容易会认为在初始化数据中除了 datasets[0].data 是动态数据，其他都是静态数据，可以放置到一开始的变量声明中指定
2. 但其实不行，整个图表的初始化 都需要在 DOM 元素加载之后才能进行，所以必须将所有指定的规则一起初始化
3. 对于图表大小的控制，最简单的方式还是将图表通过父容器包裹，然后控制父容器的大小

<div class="chart-item">
  <in-radar :chart-data="radarData1"></in-radar>
</div>

<script>
	import inRadar from 'components/in-chart/in-radar'
	
	export default {
		data() {
			return {
				radarData1: {}
			}
		},
		mounted() {
			this._initChar()
		},
		methods: {
			_initChar() {
				this.radarData1 = {
  				labels: ['抗压力', '精力', '适应力', '表达力', '逻辑力'],
  				datasets: [{
    					label: '',
    					borderColor: 'rgba(72,207,173,0.9)',
    					backgroundColor: 'rgba(72,207,173,0.5)',
    					data: currentFeature.radarData.one
  				}]
				}
			}
		},
		components: {
 			inRadar
		}
	}
</script>