在 Echarts 中有没有一种方法可以显示一整天的系列图表，然后将值绘制到上面？

Question

我正在建立一个宠物项目来帮助控制我的糖尿病。我是 echarts 的新手，所以如果我能得到一些指示，我将不胜感激。

我想问的是，有没有一种方法可以显示图表（每天）并显示空白 space 如果当时没有输入值。我正在使用 JSDOM 导出每天的图像并稍后将它们附加到 pdf。

目前的情况是，图表从第一个输入的值开始到最后一个结束，您应该可以在附图中看到。

我希望图表从 00:00 开始并在 23:59 结束。然后将我的读数添加到每日图表中。 echarts可以吗？

我附上了我的选项对象：

const option = {
    title: {
        textStyle: {
            color: '#000000'
        }
    },
    dataset: {
        source: eval(chartData),
        dimensions: [{name: 'timestamp', type: 'time'}, {name: 'reading', type: 'float'}]
    },
    xAxis: {
        type: 'time',
        name: 'Time',
    },
    yAxis: {
        type: 'value',
        name: 'mmol/L',
        nameLocation: 'middle',
        nameTextStyle: {
            color: '#000000',
            fontSize: 15,
            padding: 15,
            fontStyle: 'italic',
            fontWeight: 'normal'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [{
        name: 'reading',
        type: 'scatter',
        color: '#000000',
        encode: {
            x: 'timestamp',
            y: 'reading'
        },
        radius: '100%',
        smooth: true,
        markArea: {
            itemStyle: {
                color: 'rgba(210,210,210,0.4)'
            },
            data: [ [{
                yAxis: '4'
            }, {
                yAxis: '10'
            }]]
        },
        padding: '0',
        margin: '0',
        showSymbol: true
    }]
};

感谢您的帮助:)

Answer 1

如果我没理解错的话，你需要从00:00到23:59的连续线吗？ Echarts不知道哪个值是起点和终点，所以取第一个和最后一个。

要得到你想要的，你需要用零填空。也尝试使用 null 代替零。

Answer 2

function chartData() {
  return [{
      timestamp: new Date('2021-12-20T01:10:00').getTime(),
      reading: 1.1
    },
    {
      timestamp: new Date('2021-12-20T02:20:00').getTime(),
      reading: 2.2
    },
    {
      timestamp: new Date('2021-12-20T03:30:00').getTime(),
      reading: 3.3
    },
    {
      timestamp: new Date('2021-12-20T04:40:00').getTime(),
      reading: 4.4
    },
    {
      timestamp: new Date('2021-12-20T05:50:00').getTime(),
      reading: 5.5
    },
    {
      timestamp: new Date('2021-12-20T06:00:00').getTime(),
      reading: 6.6
    },
    {
      timestamp: new Date('2021-12-20T07:10:00').getTime(),
      reading: 7.7
    },
    {
      timestamp: new Date('2021-12-20T08:20:00').getTime(),
      reading: 8.9
    },
  ]
}

const option = {
  title: {
    textStyle: {
      color: '#000000'
    }
  },
  dataset: {
    source: chartData(),
    dimensions: [{
      name: 'timestamp',
      type: 'time'
    }, {
      name: 'reading',
      type: 'float'
    }]
  },
  xAxis: {
    type: 'time',
    name: 'Time',
    min: new Date('2021-12-20T00:00:00').getTime(),
    max: new Date('2021-12-20T23:59:00').getTime(),
    splitNumber: 24,
    //interval: 60,
    axisLabel: {
      formatter: '{HH}:{mm}',
    }
  },
  yAxis: {
    type: 'value',
    name: 'mmol/L',
    nameLocation: 'middle',
    nameTextStyle: {
      color: '#000000',
      fontSize: 15,
      padding: 15,
      fontStyle: 'italic',
      fontWeight: 'normal'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [{
    name: 'reading',
    type: 'scatter',
    color: '#000000',
    encode: {
      x: 'timestamp',
      y: 'reading'
    },
    radius: '100%',
    smooth: true,
    markArea: {
      itemStyle: {
        color: 'rgba(210,210,210,0.4)'
      },
      data: [
        [{
          yAxis: '4'
        }, {
          yAxis: '10'
        }]
      ]
    },
    padding: '0',
    margin: '0',
    showSymbol: true
  }]
};

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="main" style="width:1024px; height:400px"></div>

在 Echarts 中有没有一种方法可以显示一整天的系列图表，然后将值绘制到上面？

Is there a way in Echarts to show a series chart for a full day then plot the values onto it?

node.js

jsdom

echarts