项目踩坑之Echarts数据视图不更新问题

问题描述

Echarts检测到数据更新不会立即更新相应的视图。也就是说即使series中data

或者value的值发生变化，Echarts也不会发生改变。

​​​​解决方法

发送请求获取数据以后重新定义Echarts的series中的data值或者value值。

完整代码：

<template>
  <div class="lineargraph">
    <div id="bug"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { thirdAxios } from "../../../api/BackstageApi";
export default {
  mounted () {
    this.change()
  },
  methods: {
    change(){
      var myChart = echarts.init(document.getElementById("bug"));
      myChart.setOption({
        title: {
          text: "用户增长分布图",
          left: "20px",
          top: "18px",
          // 标题样式
          textStyle: {
            fontSize: 20,
            fontWeigth: 600,
            color: "black"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增用户", "活跃用户", "临时停车用户"],
          top: "12%",
          right: "30%"
        },
        // 整个折线图位置调整
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        // x轴的刻度及x轴的显示
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          type: "category",
          boundaryGap: false,
          data: [
            "1日",
            "3日",
            "6日",
            "9日",
            "12日",
            "15日",
            "18日",
            "21日",
            "24日",
            "27日",
            "30日"
          ],
          // 背景网格图
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#cfcfcf"
            }
          }
        },
          // 背景网格图
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#cfcfcf"
            }
          }
        },
        series: [
          {
            name: "新增用户",
            symbol: "none",
            type: "line",
            smooth: true,
            data: [],
            // data:this.num1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio", 
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#5034fe" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#8ac8ff" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "活跃用户",
            type: "line",
            smooth: true,
            data: [],
            // data:this.num2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "green" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "red" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "临时停车用户",
            smooth: true,
            type: "line",

            data: [],
            // data:this.num3,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#fd972e" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#f6bc6b" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          }
        ]

      })  
// option结束


thirdAxios().then( res =>{

if(res.code == 200){
  
let arr1 = res.data.num1;
let arr2 = res.data.num2;
let arr3 = res.data.num3;
// console.log(arr1,arr2,arr3);

myChart.setOption({
  series: [
          {
            name: "新增用户",
            symbol: "none",
            type: "line",
            smooth: true,
            data: arr1,
            // data:this.num1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#5034fe" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#8ac8ff" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "活跃用户",
            type: "line",
            symbol: "none",
            smooth: true,
            data: arr2,
            // data:this.num2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#8cc265" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#6bdb20" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "临时停车用户",
            smooth: true,
            type: "line",
            symbol: "none",
            data: arr3,
            // data:this.num3,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#fd972e" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#f6bc6b" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          }
        ]
})

}
} )
      
    }
  }

}
</script>
<style lang="less" scoped>
.lineargraph {
  height: 400px;
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px 0 #848b7f;
    background: white;

  #bug{
    width: 100%;
    height: 100%;
    // background: red;
  }
}
</style>

运行结果：

 用户增长分布图会根据后端生成的随机数据进行更改。