收藏
回答

echart无法获取后台数据?

使用折线图进行数据处理,如果使用静态数据没有问题,使用后台获得的数据就无法替换原来的静态数据,下面的代码后台请求的数据是列表类型数据,但是数据无法使用,请教什么问题。

getData() {
    let that = this
    var AlarmMsg=[4,4,5]
    var devicenum = '1222032091'
    var data1_x=[]
    var data1_y=[]
    var data2_x=[]
    var data2_y=[]
    wx.request({
      url: 'http://127.0.0.1:8000/wxdevicenum/'+devicenum,
      success:function(res){
        console.log(res);
        // that.setData({
        data1_x=res.data.datax;
        data1_y=res.data.datat;
        data2_x=res.data.datax;
        data2_y=res.data.datah;               
        // });
        console.log(data1_x);
      }
    })
    console.log(data2_y)
    barec1.setOption({
        tooltip: {
          trigger: 'axis'
        },
        renderAsImage: true//支持渲染为图片模式
        color: ["#41A4FF""#37C461"], //图例图标颜色 曲线数据点颜色
        legend: {
          show: true,
          itemGap: 25//每个图例间的间隔
          top: 20,
          // bottom: 15,
          x: 30//水平安放位置,离容器左侧的距离  'left'
          z: 100,
          textStyle: {
            color: '#A9A9A9' //'#383838'
          },
        },
        grid: { //网格
          top: 30,
          left:25,
          bottom: 5,
          containLabel: true//grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: { //横坐标
          type'category',
          // name: '(天)', //横坐标名称
          nameTextStyle: { //在name值存在下,设置name的样式
            color: 'black',
            fontStyle: 'normal',
            fontWeight: 'bold',
          },
          nameLocation: 'start',   //'end',
          boundaryGap: false, 
          data: data1_x, //this.data.data1_x,
          axisTick: {
            show: false//刻度线隐藏
          },
          axisLabel: {
            textStyle: {
              fontSize: 9,
              color: '#f0f5f5'
            }
          }
        },
        yAxis: { //纵坐标
          type'value',
          position: 'left',
          left: 20,
          scale:true,  //Y轴坐标值自适应
          nameLocation: 'end',  //'start'
          textStyle:{
            fontSize:9,
            color:'#f0f5f6' 
          },
          axisTick: {
            show: false//刻度线隐藏
            inside : false,        // 控制小标记是否在grid里
          },
          // splitNumber: 6, //坐标轴的分割段数
          splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {  //Y轴网格线
              type'solid'//type: 'dashed'虚线, solid实线
              width: 1,
              color: '#ADD8E6',
            }
          },
          axisLabel: {  //y轴刻度
            textStyle: {
              fontSize: 9,
              color: '#f0f5f6'
            }
          },
        },        
        series: [{
          type'line',
          data: data1_y,   //this.data.data1_y,
          smooth: true,
          symbol: 'roundRect',
          itemStyle: {
            normal: {
              lineStyle: {
                color: 'white',
                width:1
              }
            }
          }
        }],
      })
    barec2.setOption({
      tooltip: {
        trigger: 'axis'
      },
      renderAsImage: true//支持渲染为图片模式
      color: ["#37C461"], //图例图标颜色
      legend: {
        show: true,
        itemGap: 25//每个图例间的间隔
        top: 20,
        x: 20//水平安放位置,离容器左侧的距离  'left'
        z: 100,
        textStyle: {
          color: '#37C461'
        },
      },
      grid: { //网格
        left: 25,
        bottom: 5,
        top: 30,
        containLabel: true//grid 区域是否包含坐标轴的刻度标签
      },
      xAxis: { //横坐标
        type'category',
        // name: '(小时)', //横坐标名称
        nameTextStyle: { //在name值存在下,设置name的样式
          color: '#FFBE46',
          fontStyle: 'normal',
          fontWeight: 'bold',
        },
        nameGap: 3,
        nameLocation: 'end',//显示位置
        boundaryGap: false, 
        data: data2_x, //this.data.data2_x,
        axisTick: {
          show: false//刻度线隐藏
        },
        axisLabel: {
          textStyle: {
            fontSize: 9,
            color: '#F5F5F5'
          }
        },
      },
      yAxis: { //纵坐标
        type'value',
        position: 'left',
        left: 10,
        scale:true,
        axisTick: {
          show: false//刻度线隐藏
        },
          show: true,
          lineStyle: {
            type'solid'
          }
        },
        axisLabel: { 
          textStyle: {
            fontSize: 9,
            color: '#F5F5F5'
          }
        },
      },
      series: [{
        type'line',
        data: data2_y,   //this.data.data2_y,
        smooth: true,
        symbol: 'roundRect',
        itemStyle: {
          normal: {
            lineStyle: {
              color: 'white',
              width:1
            }
          }
        },
    }],
    })

data: {
    ec1: {
      onInit: function (canvas, width, height{
        barec1 = echarts.init(canvas, null, {
          width: width,
          height: height,
          // devicePixelRatio: dpr
        });
        canvas.setChart(barec1);
        return barec1;
      }
    },
    ec2: {
      // onInit:initChartHumi
      onInit: function (canvas, width, height{
        barec2 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barec2);
        return barec2;
      }
    },
回答关注问题邀请回答
收藏

2 个回答

  • brave
    brave
    2022-02-03

    异步。

    2022-02-03
    有用 2
    回复
  • 智敏
    智敏
    发表于移动端
    2022-02-03
    不知道我现在的代码哪里有问题
    2022-02-03
    有用
    回复
登录 后发表内容