vue中用echarts折现图表（多图表与定时函数刷新图表处理方案在附表1、2中）

原创

小哥 3年前 (2022-11-09) 阅读数 9 #大杂烩

1、首先在main.js引入了依赖关系并安装在原型链上：

import * as echarts from echarts
Vue.prototype.$echarts = echarts;

2，在何时创建组件。echart图表模板可重复使用。我将此组件命名为mqChart.vue。内容为：

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 += 
 + params[i].marker + params[i].seriesName +  :  +  +params[i].value+ /Kbps +  
                                            }
                                            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方法），确定计时器是否调用它。requestRequest方法(getchartsInfo方法）。如果计时器没有被调用，这意味着我们在页面上调用了它，那么计时器应该被打开。如果计时器被递归调用，那么计时器已经被启动，图表也被递归刷新，所以不需要启动计时器。不进行判断会导致新计时器被打开并被调用。requestRequest方法(getchartsInfo方法）。实现代码如下：