3.Echart----如何赋值数据

STRAT

• 本文收藏于系列 EChart-系列文章_lazyTomato出品
• 编写时间 2022/04/21

正文

话不多数，见代码~

<template>
  <div class="tomato3">
    <h1>演示一下数据初始化</h1>
    <div id="main" class="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lazy_tomato",
  data() {
    return {};
  },
  created() {
    // 1.1 created钩子函数中去初始化数据，需要使用`this.$nextTick(()=>{})`等待dom加载完毕
    this.initData();
  },
  mounted() {
    // 1.2 mounted钩子中去请求我们的数据。mounted钩子函数中dom已经渲染完毕，所以不需要`this.$nextTick`
    // setTimeout(() => {
    //   let data = [100, 200, 300, 140, 500, 180];
    //   this.initMap(data);
    // }, 100);
  },
  methods: {
    initData() {
      // 2. 请求数据一般我们是异步的, 比如`axios`和`setTimeout定时器` 就是异步的,异步的 不会阻塞后续代码逻辑执行.
      setTimeout(() => {
        console.log("setTimeout");
        this.$nextTick(() => {
          let data = [100, 200, 300, 140, 500, 180];
          this.initMap(data);
        });
      }, 100);

      console.log("后续代码");


      /**
      * 3.
      * + 上述为了演示异步效果，我就使用了定时器。
      * + 正常的渲染逻辑是 `数据请求完毕之后，再去初始化地图的数据；` 上述代码执行结果可以看到：先打印"后续代码"再打印"setTimeout";
      * + 没有数据，那肯定不会渲染地图
      * + *JS中代码的执行机制很有意思，有兴趣可以看看博客了解一下，例如：https://juejin.cn/post/6844903512845860872#heading-10 *
      */
    },

    initMap(data) {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data,
            type: "line",
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.tomato3 {
  .main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
  }
}
</style>

运行截图