首先安装echarts

npm install echarts --save

在main.js中引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在vue中使用v-for循环渲染数据并生成多个图表，但是echarts的容器名称只能使用id，这个时候v-for的index参数就起到了作用`

<div :key="index" v-for="(item,index) in sortArray">
	<div :id="'my_echarts'+index"></div>
</div>

在initCharts中初始化echarts实例并通过setOption方法生成折线图（这里是折线图的例子）

// 第一个参数：为了图表和容器对应
// 第二个参数：数据和图表想对应 因为请求下来的是多个对象 通过varietyType让图表和循环的数据对应
initCharts(index,val) {
	var chart = this.$echarts.init(document.getElementById('my_echarts'+index))
	// 图表参数数据接口
	this.$http.getQuota().then(res => {
		var XData = res
		chart.setOption({
			grid: {
				show: 'true',
				borderWidth: '0
			},
			xAxis: {
				// 去除网格线
				show: false,
				data: xData[val]
			},
			yAxis: {
				show: false
				scale: true
			},
			series:[{
				data: xData[val],
				type: 'line',
				itemStyle: {
					normal: {
						color:'#fd5965'
					}
				}
			}]
		})
	)
}

给图表传入参数,v-for中只是为了生成图表容器

setEcharts() {
	this.sortArray.forEcah((item,index) => {
		this.initCharts(index,item.varietyTye)
	})
}

在挂载阶段生成图表

	mounted(){
		this.setEcharts()
	}