echarts 24小时折线图在具体时间打点，单独设置每个折点的颜色和大小

1.在echarts中定义x轴为时间类型（type: 'time'）。

2.设置x轴的最小值和最大值，以覆盖需要显示的时间范围。

3.在series中定义数据，数据格式为时间和对应的值。

4.可以通过设置 series 中的 itemStyle 和 symbolSize 属性来单独设置每个折点的颜色和大小。

例如：

option = {
    xAxis: {
        type: 'time',
        min: '2022/10/09 12:00:00',
        max: '2022/10/10 12:00:00'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            ['2022-10-09 16:59:55', 1],['2022-10-09 18:59:56', 2]
        ],
        type: 'scatter', // 标记的图形-去除折线
        symbol: "circle",  // 配置折线拐点为实心
        //symbolSize: 10,    // 配置折线拐点的大小
        itemStyle: {
            color: function(params) {
            // 设置每个折点的颜色
            switch (params.value[1]) {
             	case 0:
               		return 'rgb(111, 111, 111)';
              case 1:
              		return 'rgb(444, 0, 0)';
            	case 2:
              		return 'rgb(111, 222, 0)';
             	default:
               		return 'rgb(0, 0, 0)';
        }
      }
    },
         symbolSize: function(params) {
         // 设置每个折点的大小
         return (params[1]+1)*5;
    }
    }]
};

在 itemStyle 中设置 color 属性，通过函数的形式来设置每个折点的颜色

在 symbolSize 中设置函数，通过 params来获取每个数据的值设置每个折点的大小

效果图如下：