解决echart渲染不更新的问题

最新推荐文章于 2024-06-05 09:57:16 发布

原创最新推荐文章于 2024-06-05 09:57:16 发布 · 394 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #前端框架 #前端 #vue.js

本文讲述了在Vue应用中使用ECharts遇到渲染不更新问题的解决方案，重点介绍了如何通过watch监听父组件传入的数据并使用$nextTick确保图表在数据变化后及时更新。

解决echart渲染不更新的原因

在写echart的时候，相信有很多小伙伴遇到过这种情况，明明写了，但是echart就是不显示，检查代码元素也没有报错。本文使用了watch去监听数据
首先先看来看一下最终的效果图
在这里插入图片描述

第一步先设置好echart的容器

 <div ref="myecharts" id="myechart" style="width: 892px;height:450px;"></div>

第二步也是至关重要的一步，js代码

export default {
//props通过父组件将横向坐标的数据和data数据传递过来
 props: {
    xAxis: {
      type: Array,
      required: true
    },
    Data: {
      type: Array,
      required: true
    }
  },
data() {
    return {
      myChart: null  //一个变量
    }
  },
    // 解决页面加载时echart不渲染的问题
    watch: {
   //对Data数据进行监听，这个Data就是父组件中传递过来的Data
    Data: {
      handler(newval) {
        this.$nextTick(() => {
          this.myChart.setOption({
          //标题
            title: {
              text: '近七天实时数据',
              left: '27px'
            },
            xAxis: {
              type: 'category',
              // x坐标轴两边留白 
              boundaryGap: true,
              axisTick: { show: false },
              axisLabel: { width: 30 }, // 设置标签的宽度，单位是像素
              data: this.xAxis  //通过父组件传递过来的
            },
            yAxis: {
              type: 'value',
              axisTick: { show: false },
              axisLine: { show: false }
            },
            series: [
              {
              	// 通过父组件传递过来的
                data: this.Data,
                type: 'line',
                symbol: 'none',
                color: ['#1881D2'], // 设置线条颜色为蓝色#1881D2
                smooth: true,
                stack: 'x',
                // 实现渐变作用域块的代码
                areaStyle: {
                  normal:
                      {
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: '#E3F2FF' // 0% 处的颜色
                          },
                          {
                            offset: 1, color: '#FDFEFF' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      }
                }
              }
            ]
          })
        })
      }
    },
    // 立即监听
    immediate: true,
    // 深度监听
    deep: true
  },
  mounted() {
  	// 初始化
    this.myChart = this.$echarts.init(this.$refs.myecharts)
  }
}

第三步在父组件中引用

 <MyEchart :Data="Data" :xAxis="xAxis"></MyEchart>
  //js代码
 import MyEchart from 'components/Myechart.vue'  //导入echart组件 
 export default {
 	components: {
    		MyEchart: MyEchart   //注册
  }, 
  data(){
  return{
   	 // 存放echart表数据的信息
      Data: [0, 0, 0, 0, 258, 258, 258],
      // 存放echart表数据x轴的信息
      xAxis: ['2023-11-03', '2023-11-04', '2023-11-05', '2023-11-06', '2023-11-07', '2023-11-08', '2023-11-09'],
}
	}
 }