vue使用vue-echarts图表插件

最近使用vue做一个图表插件，可能以为会遇到一些坑，谁知道过程还是很顺利的，下面和大家分享下如何使用图表插件，注意我这里使用的是vue-cli3.0+，3.0以下的webpack可能需要配置。

安装插件：

npm install echarts vue-echarts --save

在组件中使用：

import 'echarts/lib/chart/pie' //导入echarts的图形类型
import ECharts from 'vue-echarts'

然后在组件中挂载模板

components: {
			'v-chart': ECharts
		},

全部代码如下：

<template>

	<div>
		<el-row>
			<el-col :span="12">
				<v-chart :options="polar" />
			</el-col>
			<el-col :span="12">
				<v-chart :options="companyPolar" />
			</el-col>
		</el-row>


	</div>
</template>

<script>
	import 'echarts/lib/chart/pie'
	import ECharts from 'vue-echarts'

	let arr = [];
	//不规范饼状图表配置
	var option = {

		title: {
			text: 'xxxx',
			left: 'left',
			textStyle: {
				color: '#000'
			}
		},

		legend: {
			bottom: 10,

		},
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		series: [{
			name: '不规范个人信息',
			type: 'pie',
			radius: '65%',
			center: ['50%', '50%'],
			selectedMode: 'single',
			data: [
			],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};

	//公司信息认证图表配置
	var companyOption = {
		backgroundColor: '#2c343c',

		title: {
			text: '企业认证信息处理',
			left: 'left',
			top: 20,
			textStyle: {
				color: '#fff'
			}
		},

		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},

		
		series: [{
			name: '企业认证信息处理',
			type: 'pie',
			radius: '55%',
			center: ['50%', '50%'],
			data: [

			],
			roseType: 'radius',
			label: {
				normal: {
					textStyle: {
						color: 'rgba(255, 255, 255, 0.3)'
					}
				}
			},
			labelLine: {
				normal: {
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.3)'
					},
					smooth: 0.2,
					length: 10,
					length2: 20
				}
			},
			itemStyle: {
				normal: {
					color: '#c23531',
					shadowBlur: 200,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			},

			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function(idx) {
				return Math.random() * 200;
			}
		}]
	};
	export default {
		components: {
			'v-chart': ECharts
		},
		data() {
			return {
				polar: option,
				companyPolar: companyOption,
				arrList: [],
				companyData: []
			}
		},
		watch: {
			arrList(newVal, oldVal) {
				option.series[0].data = newVal
			},
			companyData(newVal, oldVal) {
					
				companyOption.series[0].data=newVal
				
			}
		},
		created() {
			this.getPeoInfo();
			this.getCompany();
		},
		methods: {
			getPeoInfo() {
				this.$axios.get('/api/info').then(res => {
					if (res.data.status == 0) {
						let data = res.data.result;
						data.forEach(item => {
							if (item._id == 0) {
								this.arrList.push({
									value: item.total_num,
									name: '未成功'
								})
							} else if (item._id == 1) {
								this.arrList.push({
									value: item.total_num,
									name: '已成功'
								})
							} else if (item._id == 3) {
								this.arrList.push({
									value: item.total_num,
									name: '未操作'
								})
							}
						})

					}
				}).catch(error => {
					this.$message.error('error')
				})
			},
			getCompany() {
				this.$axios.get('/api/company').then(res => {
					if (res.data.status == 0) {
						let datas = res.data.result;

						datas.forEach(item => {
							if (item._id == 0) {
								this.companyData.push({
									value: item.total_num,
									name: '未操作'
								})
							} else if (item._id == 1) {
								this.companyData.push({
									value: item.total_num,
									name: '已失败'
								})
							} else if (item._id == 2) {
								this.companyData.push({
									value: item.total_num,
									name: '已成功'
								})
							}
						})


					}
				}).catch(error => {
					this.$message.error(error)
				})
			},
		}
	}
</script>

<style>

</style>

关于配置可以打开官网，然后选择你需要的图表打开，把配置项复制到你的项目即可