关于在vue项目中添加echarts图表的问题(动态数据 + 时间坐标轴)

官网给出的代码是这样的(option收起来了)
官网实例代码
关于在vue项目中添加echarts图表的问题(动态数据 + 时间坐标轴)_第1张图片
我修改了几处,大致是:
关于在vue项目中添加echarts图表的问题(动态数据 + 时间坐标轴)_第2张图片
关于在vue项目中添加echarts图表的问题(动态数据 + 时间坐标轴)_第3张图片
下方是具体代码

    random_Data() { //把代码封装到一个方法里
      function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
            Math.round(value)
          ]
        };
      }
      var data = [];
      var now = +new Date(1997, 9, 3);
      var oneDay = 24 * 3600 * 1000;
      var value = Math.random() * 1000;
      for (var i = 0; i < 1000; i++) {
        data.push(randomData());
      }
      let myChart = this.$echarts.init(document.getElementById("container"));//自己加的代码
      let option = { //加个let
        title: {
          text: "动态数据 + 时间坐标轴"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "模拟数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }
        ]
      };

      setInterval(function() {
        for (var i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }
        //这个换成下方的一句代码,不然会报错(series.type should be specified.)
        // myChart.setOption({
        //   series: [
        //     {
        //       data: data
        //     }
        //   ]
        // });
        myChart.setOption(option);
      }, 1000);
    }

如果报错series.type should be specified.,就将

        myChart.setOption({
          series: [
            {
              // type: "line",
              data: data
            }
          ]
        });

修改为myChart.setOption(option);
不要管series的type了type: "line",,这里面改不管用的

你可能感兴趣的:(vue,echarts,前端)