x轴为time类型的数据格式

对于数据集中的数据，需要包装成如下形式，才可被识别

data:[{ name: time, value: [time, value] },
      { name: time, value: [time, value] },
      ...
]

假设某点数据为{name:2022-2-9,value:[2022-2-9,10]}，其含义为时间为2022年2月9日时，其值为10

生成随机数据

源码

function randomData() {
  now = new Date(+now + oneDay); //创建一个日期对象
  value = value + Math.random() * 21 - 10; //初始化递增value值
  return {
    name: now.toString(),
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
      Math.round(value)
    ]
  };
}

return的返回形式即为可被匹配的数据形式

Date()日期对象

创建方法
new Date()

实例化方式

var d = new Date(); //返回当前时间
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

常用对象方法

方法	描述
getFullYear()	返回年份
getMonth()	返回月份(0-11)
getDate()	返回日期(1-31)
getHours()	返回小时(0-24)
getMinutes()	返回分钟(0-59)
getSeconds()	返回秒数(0-59)

初始化静态数据

let data = [];  // 初始化空的数据集
let now = new Date(1997, 9, 3); 
let oneDay = 24 * 3600 * 1000; // 一天的毫秒数
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
  data.push(randomData());
}

data：数据集，初始为空
now：起始时间
oneDay:循环中randomData()函数中时间每次的增量（单位：毫秒）
value：初始化value值
for循环：初始化1000个静态数据
randomData()规定了每次时间增量为1天，value随机递增

option配置项

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]
      );
    },

在列表中通过params[0]取到第一个字典值 (params详解见下文)
在函数中创建新变量date并通过字典取值方法初始化为该项数据的日期
return的形式则为日/月/年:值

params参数

function(params)的params参数为所需数据集，其形式为

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefied，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,
    // 饼图，漏斗图的百分比
    percent: number
}

官方文档：https://echarts.apache.org/zh/option.html#tooltip.formatter

[{…}]
    0:
    $vars: (3) ['seriesName', 'name', 'value']
    axisDim: "x"
    axisId: "\u0000series\u00000\u00000"
    axisIndex: 0
    axisType: "xAxis.time"
    axisValue: 1608567000000
    axisValueLabel: "2020-12-22 00:10:00"
    borderColor: undefined
    color: "#4992ff"
    componentIndex: 0
    componentSubType: "line"
    componentType: "series"
    data: {name: '2020-12-22 00:10:00', value: Array(2)}
    dataIndex: 17
    dataType: undefined
    dimensionNames: (2) ['x', 'y']
    encode: {x: Array(1), y: Array(1)}
    marker: "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#4992ff;\"></span>"
    name: "2000-4-18"
    seriesId: "\u0000Fake Data\u00000"
    seriesIndex: 0
    seriesName: "Fake Data"
    seriesType: "line"
    value: (2) ['2000-4-18', 409]
    [[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)

params在本实例中的实质是一个数组中包含一个字典

获取月份要加1的原因是返回值为0-11，也就是说1月的值为0，以此类推

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(function () {
  for (var i = 0; i < 5; i++) {
    data.shift();  // 删除data数组中的第一个元素
    data.push(randomData());  // 在数组末尾添加新的元素
  }
  myChart.setOption({
    series: [
      {
        data: data
      }
    ]
  });
}, 1000);

setInterval(function(),1000)会不停调用其中的函数
- data.shift():去除data数组中的第一个元素
- data.push()：在data数组末尾添加“递增的时间和随机的值（通过randomData()实现）
- myChart.setOption()更新表中data数据集
设置调用周期为1s（1000ms）

setInterval()方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式,相关语法如下