Echart在vue中的简单使用--按需引入 ECharts 图表和组件

Echart新手使用：

学习echarts推荐：
https://echarts.apache.org/zh/
https://v-charts.js.org/#/

一、vue的项目中通过import按需导入

在项目中我用的是这个import按需导入

1、首先npm安装echarts

	npm i v-charts echarts -S

2、新建一个单独的文件夹存放这个引入的组件
比如plugins文件夹新建一个vcharts.js。
根据https://v-charts.js.org/#/的文档指引，可以按需导入需要的某个图

vcharts.js

	//格式一般是Ve+图的名字（首字母大写）
	import VeRing from 'v-charts/lib/ring.common';
	//要注册的前提要先引入Vue
	import Vue from "vue";
	//记得引入后要注册
	Vue.component(VeRing.name, VeRing)
	

3、下一步是将这个vcharts.js文件引入到main.js（也就是配置到全局）里面，其他组件需要时可以使用。

main.js

	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'
	import store from './store'
	import './plugins/element.js'
	//引入了vchart.js
	import './plugins/vcharts'
	
	Vue.config.productionTip = false
	
	new Vue({
   
	  router,
	  store,
	  render: h => h(App)
	}).$mount('#app')

4、在组件中使用，比如

	<template>
		//ve-ring就是注册的组件名VeRing
		<ve-ring :data="chartData" :settings="chartSettings"></ve-ring