1、首先在main.js中引入依赖，并挂载到原型链上：
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
2、创建一个组件来当echart图表的模板，做到可重用。我给这个组件命名为mqChart.vue。内容为：
<!-- 为了方便使用，将echarts封装成组件 -->
<template>
<div class="chart" :id="id" style="width: 100%;height: 300px;"></div>
</template>
<script>
export default {
props: ['parOption', 'id', 'domWidth'],
data () {
return {
chart: ''
}
},
created () {
},
mounted () {
this.init()
},
components: {
},
methods: {
init () {
this.chart = this.$echarts.init(document.getElementById(this.id))
this.chart.setOption(this.parOption,true)
}
},
watch: {
parOption: {
handler (val, oldVal) {
if (this.chart) {
this.chart.setOption(val,true)//不适用true的话，每次set属性，会保留上一次
}
},
deep: true
},
domWidth (val, oldVal) { // 刷新图表
this.chart.resize()
}
}
}
</script>
<style>
.chart{
width: 100%;
height: 100%;
}
</style>
3、做好上面两步之后，开始请求后端拿到数据，并构造x轴y轴数据。如果有多条线在一个图表中，使用循环就可以解决。
下面是我代码中定义的几个业务属性，略作解释，开发时根据业务去定义属性就行。
this.pod_net_bytes_received_name_x：是x轴数据，因为一次请求回来不管有几条线，只要他们是一个图表中，它的x轴（世时间轴）肯定是一样的。
this.pod_net_bytes_received_name_arr：是所有折现放在一块形成的名称数组，用来在图表中展示的。也就是这个东东：
pod_net_bytes_received_name_series_arr：折现的属性，name是折线名，type是类型，我用的line也就是折现图。data就是这条线y轴的数据。
上面这几个属性要是明确的知道，可以直接写死也无所谓。根据你业务定。
我这里采用了循环是因为线段不一定有几条，要是明确知道有几条，可以不用循环。直接拿到属性，定义好有几条，赋值即可。
4、上方把xy轴，还有名字数组，以及折线属数据都构造好了，接下来将这些属性构造成图表的属性，给图表传过去，就可以渲染了。
先引入我们自己定义的图表组件，然后定义option1（图表属性）,doWidth（图表宽度）两个属性。
开始构造option1属性：
代码如下：
this.option1 = {
title: {
text: '网络流入速率'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + '<strong>' +params[i].value+ '/Kbps' + '</strong>'
}
return relVal;
}
},
legend: {
data:this.pod_net_bytes_received_name_arr
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {//横坐标
name: "时间",
type: 'category',
boundaryGap: false,
data: this.pod_net_bytes_received_name_x
},
yAxis: {
name: "Kbps",
type: 'value'
},
//三条折线就有三种series，可以更改type以改变是否为折线
series: this.pod_net_bytes_received_name_series_arr
}
具体参数什么意思，百度echart图表+参数名就行了。
效果如下：
流程就是request请求到后端拿数据，拿到数据对数据自定义处理，构造x，y轴数据，线段名的数组，折现的属性，然后构造option数据就完成了。这些都是在一次request请求内做完的。
因为写的零散，为了防止小伙伴迷惑，特附上总体伪代码如下：
//开始发送请求
reqwest({
url: ---,
method: 'GET',
headers: {
'its-token':----
},
data: ---,
type: 'json',
}).then(data => {
//处理数据
//构造数据
//构造option属性
})
附1：多表一起渲染
如果有多个表格需要在一个页面展示，让他们option不同，id不同就行。像这样定义：
附2： 定时刷新表格
如果表格要定时刷新，写个方法递归调用request请求就行。因为所有数据处理和option我们都是在request请求中做的。
定义个定时器名，方便调用和停止。
在我们获取数据的那个request请求（getchartsInfo方法）中，判断是否是定时器调用的request请求方法（getchartsInfo方法）。如果不是定时器调用的，说明是我们进页面调用的，那就应该开启定时器。如果是定时器递归调用的，说明定时器已经启动，并且递归刷新图表，就不用启动定时器了。不加判断会导致不断开启新的定时器去调用request请求方法（getchartsInfo方法）。实现代码如下：
记得清除定时器：
