echars请求数据渲染的问题_echars知识图谱渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42174401/article/details/108223300

本文详述了在使用ECharts绘制图标时遇到的数据渲染问题及解决方案，包括如何正确处理数据并将其应用于xAxis和series部分，以及如何在数据加载完成后渲染图表。此外，还分享了解决ECharts鼠标缩放功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中把echars图标画好了,之后还得处理数据渲染的问题,
当把数据拿到了之后应该怎么渲染呢
首先我想的是直接复制给data

 xAxis: {
        type: 'category',
        data:this.datatime
    },

为什么会直接赋值给data,是因为之前自己弄了一个时间轴,直接赋值是可以渲染的,但是似乎这次,不太行,
其实后来想想也想到原因了

    mounted() {
      console.log(this.datatime)
      this.$nextTick(()=>{
        this.statis()
      })
   
  },

因为实在mounted里面开始渲染图表的,在之前打印数据,发现数据根本没取到
解决方法就是把图标的渲染放在axios请求数据回来之后

   async getDataList() {
        let arrDate = []
        let arrValue = []
       let res = await getCardPerDayUsage(this.id)
          res.data.data.forEach(item => {
            //处理数据
          arrDate.push(item.currentDate.split("-")[1]+'-'+item.currentDate.split("-")[2])
          arrValue.push(item.flowDosage)
        });     
        this.datavalue = arrValue
        this.datatime = arrDate
        //拿到数据渲染图表
        this.statis()
    }

这样就可以成功渲染折线图了
还有一个小问题搜了很久,禁止echars鼠标缩放的问题
不过好在是找到了
在这里插入图片描述