Vue2 Echarts刷新页面图形会消失

最新推荐文章于 2024-04-25 15:52:18 发布

姜来前端程序媛

最新推荐文章于 2024-04-25 15:52:18 发布

阅读量1.4k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_74285634/article/details/131552016

版权

文章讲述了在Vue项目中使用Echarts图表时遇到的问题，即数据从后台获取导致图表在页面刷新时消失。作者通过将图表配置封装为方法，在Vue的mounted生命周期中初始化图表，并使用watch监听数据变化，确保数据更新时重新配置并渲染图表，从而解决了该问题。

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

如果data是写死的数据，刷新页面是不会出现图形消失的问题；

之所以图形消失，是因为数据来自后台服务器。

我个人在做项目的时候，这个Echarts表是单独封装了一个组件，后在vue页面引入。

在vue页面的mounted生命周期dispatch对应的action，

在组件内部借用mapState辅助函数获取vuex仓库state内存储的数据。

1、将图表配置定义为一个方法

2、mounted生命周期调用图表配置的方法

3、watch监视随意的一个数据（immediate、deep），当数据更新，再次调用图表配置的方法

1、将图表配置定义为一个方法

  methods: {
    getPsgTimeOption() {
      this.psgTimeOption = {
        tooltip: {
          formatter: '{b}:-----{c}%',
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          left: 'center',
          bottom: 'bottom',
          // 图例单选
          selectedMode: "single",
          data: ['新派量（日）', '完成量（日）', '取消量（日）', '超7遗留量（日）', '新派量（月）', '完成率（月）', '取消率（月）']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.byDayArrx,
          }
        ],
        yAxis: [
          {
            type: "value",

            // axisLabel: { formatter: '{value} %' }
          },
        ],
        series: [
          {
            name: '新派量（日）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#dce7fc",
            },
            lineStyle: {
              color: "#5087ec",
            },
            itemStyle: {
              color: "#5087ec",
            },
            labelLine: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              focus: 'series'
            },
            data: this.byDayArry
          },
          {
            name: '完成量（日）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#e0f0f6",
            },
            lineStyle: {
              color: "#85d0dc",
            },
            itemStyle: {
              color: "#85d0dc",
            },
            label: {
              show: true,
              position: "top",
            },
            data: this.comByDayArry
          },
          {
            name: '取消量（日）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#dcece3",
            },
            lineStyle: {
              color: "#62b668",
            },
            itemStyle: {
              color: "#62b668",
            },
            label: {
              show: true,
              position: "top",
            },
            data: this.cancelByDayArry
          },
          {
            name: '超7遗留量（日）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#f6f0de",
            },
            lineStyle: {
              color: "#f6d269",
            },
            itemStyle: {
              color: "#f6d269",
            },
            label: {
              show: true,
              position: "top",
            },
            data: this.timeoutByDayArry
          },
          {
            name: '新派量（月）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#fce3d5",
            },
            lineStyle: {
              color: "#ee752f",
            },
            itemStyle: {
              color: "#ee752f",
            },
            label: {
              show: true,
              position: "top",
            },
            data: this.newOrderByMonthArry
          },
          {
            name: '完成率（月）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#f4dede",
            },
            lineStyle: {
              color: "#ee5846",
            },
            itemStyle: {
              color: "#ee5846",
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
            },
            data: this.comRateByMonthArry
          },
          {
            name: '取消率（月）',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#dce7fc",
            },
            lineStyle: {
              color: "#5087ec",
            },
            itemStyle: {
              color: "#5087ec",
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
            },
            data: this.cancelRateByMonthArry
          }
        ]
      };
      // 传递一个dom元素
      this.psgTimeCharts = echarts.init(this.$refs.psgTime)
      //传入一个配置项
      this.psgTimeCharts.setOption(this.psgTimeOption)
    }
  },

2、mounted生命周期调用图表配置的方法

  mounted() {
    this.getPsgTimeOption()
  },

3、watch监视随意的一个数据（immediate、deep），当数据更新，再次调用图表配置的方法

  watch: {
    cancelRateByMonthObj: {
      handler(nval) {
        if (nval) {
          this.getPsgTimeOption()
        }
      },
      immediate: true,
      deep: true
    }
  }