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方法)。实现代码如下:
记得清除定时器: