vue下使用axios动态请求并加载echart折线图

axios请求Echarts折线图

动态加载折线图

<div class="view_diagram" id="main1" style="height:100%;height:70%;" ref="chart"></div>

在vue下定义一个画图方法

    drawTempMap(id){
              //初始化echarts实例
    // 基于准备好的dom，初始化echarts实例
    var mychart = this.$refs.chart
    if(mychart){
        var mychart = echarts.init(document.getElementById('main1'));

        mychart.setOption( {
            title:{
                text:'温度(℃)',
                x:'center',
                y:'top',
                padding: 5,
                textStyle:{
                    color:'rgba(255,255,255,.6)'
                }
            },
             backgroundColor: '#2B4B6B',
            //  backgroundColor:'rgba(128, 128, 128, 0.1)',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter(params) {
                    // console.log(params)
                    const item = params[0]
                    return `温度: ${item.data} ℃`
                },
            },

            grid: {
                left: '2%',
                top:'50px',
                right: '5%',
                bottom: '10px',
                containLabel: true,
                // y2:140
            },
            xAxis: [{
                type: 'category',
                data: this.tempDateList,//[]'2020-8-20 06:24:42','2020-8-20 06:29:45','2020-8-20 08:15:00','2020-8-20 08:16:14','2020-8-20 08:23:18'
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: true,
                    alignWithLabel: true
                },
                axisLabel:  {
                    margin:'15',
                    interval: 0,
                    rotate:40,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '13',
                    },
                    formatter:function(params){
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 10;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";// 表示每一次截取的字符串
                                var start = p * provideNumber;// 开始截取的位置
                                var end = start + provideNumber;// 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                    // 最后一次不换行
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;// 最终拼成的字符串
                            }

                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }
                },
            }],
            yAxis: [{
                type: 'value',
                // min:20,
                // max:25,
                axisLabel: {
                    //formatter: '{value} %'
                    show:true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '14',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                type: 'line',
                data: this.tempValueList,//[][2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],2, 3, 3, 9, 15
                //barWidth:'30%', //柱子宽度
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color:'#2f89cf',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }
            ]
        })
    }else{
        console.log('mychart为空')
    }
      },

定义获取数据的方法

      getTempData(id){
          var _this = this
            axios.get(`http://localhost:7585/aiotv_view/temperature/gettempall?id=`+id+`&shelfNo=`+this.shelveNum).then(res=>{
            console.log(res.data);
            //console.log(res.data[0]);
            if(id == 0){

                for (let i = 0; i <res.data.length ; i++) {



                _this.tempDateList.push(res.data[i].updateTime);
                _this.tempValueList.push(res.data[i].updateValue);

                }
                console.log(_this.tempDateList);
                console.log(_this.tempValueList);
                
                _this.drawTempMap(id)
                var avg = 0
                var sum = 0
                // console.log(_this.valueList)
                for(var j = 0;j<_this.tempValueList.length;j++){
                sum += _this.tempValueList[j]
                // console.log(sum)
            }
                _this.avgTemp = sum / _this.tempValueList.length
                _this.avgTemp = _this.avgTemp.toFixed(2)
                console.log(_this.avgTemp)
                _this.id +=6  //由于我的请求是一次返回五条数据，下一次最新的一条数据需要加上6
            }
            else {
                _this.tempDateList.shift()
                _this.tempValueList.shift()
                _this.tempDateList.push(res.data[0].updateTime);
                _this.tempValueList.push(res.data[0].updateValue);
                console.log(res.data[0])
                _this.deviceNum = res.data[0].deviceId
                _this.shelveNum = res.data[0].shelfNo
                console.log(_this.tempDateList);
                console.log(_this.tempValueList);
                
                _this.drawTempMap(id)
                var avg = 0
                var sum = 0
                // console.log(_this.valueList)
                for(var j = 0;j<_this.tempValueList.length;j++){
                sum += _this.tempValueList[j]
                // console.log(sum)
            }
                _this.avgTemp = sum / _this.tempValueList.length
                _this.avgTemp = _this.avgTemp.toFixed(2)
                console.log(_this.avgTemp)
                console.log('你好牛逼啊')
                _this.id +=1
            }
        })
      },

在creaetd下获取数据画出图

  created(){
      this.getTempData(this.id)
  }

根据id值不断绘图，在mount下实现

  mounted() {
      var _this = this
      setInterval(function(){
          _this.getTempData(_this.id)
      },10000)
  },

由于是小白，肯定还有很多逻辑上漏洞或者是代码不严谨的方式，请求指正。