echart动态获取数据不显示

缺乏、安全感 2021-10-23 13:58 1079阅读 0赞

当时写完echart,然后当模拟数据动态显示的时候,把里面的data直接替换成获取回来的数据不显示,后来发现是当页面初始加载的时候就已经取数据了且只取一次,所以就用了一个watch监视,监视变化需要在重新渲染,但是发现一直在发送请求,所以后来就在获取数据之后再创建echart示例就好了呀,代码如下

drawLine() {
          getLine(this.lineQuery).then(response => {
            // 基于准备好的dom，初始化echarts实例,发送请求回来再创建实例
            this.lineDatas = response.data
            this.myChart = echarts.init(document.getElementById('myChart'))
            const option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6c6c6c'
                  },
                  lineStyle: {
                    color: '#004E52',
                    opacity: 0.5,
                    width: 2
                  }
                }
              },
              legend: {
                data: this.lineDatas.emotionLevel,
                icon: 'circle'
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: this.lineDatas.statTime
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: this.lineDatas.emotionCharts[0].emotionLevel,
                  type: 'line',
                  itemStyle: {
                    normal: {
                      color: '#F56C6C',
                      lineStyle: {
                        color: '#F56C6C'
                      }
                    }
                  },
                  data: this.lineDatas.emotionCharts[0].statNum
                },
                {
                  name: this.lineDatas.emotionCharts[1].emotionLevel,
                  type: 'line',
                  itemStyle: {
                    normal: {
                      color: '#E6A23C',
                      lineStyle: {
                        color: '#E6A23C'
                      }
                    }
                  },
                  data: this.lineDatas.emotionCharts[1].statNum
                },
                {
                  name: this.lineDatas.emotionCharts[2].emotionLevel,
                  type: 'line',
                  itemStyle: {
                    normal: {
                      color: '#409EFF',
                      lineStyle: {
                        color: '#409EFF'
                      }
                    }
                  },
                  // stack: '总量',
                  data: this.lineDatas.emotionCharts[2].statNum
                }
              ]
            }
            // 绘制折线
            this.myChart.setOption(option)
          }).catch(() => {})
        },

转载于:https://www.cnblogs.com/zhaocainiao/p/10861300.html