Test Echarts Step Line

Only happen when data is placed inside dataset

by YeongCY

HTML

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <div id="main"></div>
  </body>
</html>

CSS

#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

JavaScript

var container = document.getElementById('main');
var chart = echarts.init(container);

var option = {
  tooltip: {},
  xAxis: {
    type: 'time'
  },
  yAxis: {},
  series: [{
  		encode: {
      	x: 'datetime',
        y: 'value1'
      },
      name: 'value1',
      /*         data: [
                ['2020-10-13', 3],
                ['2020-10-14', 4],
                ['2020-10-15', 5]
              ],  */
      type: 'line',
      step: 'start',
      areaStyle: {
      	color: 'blue'
      },
      lineStyle: {
      	join: 'mitter',
        mitterLimit: 0
      }
      
    },
    {
  		encode: {
      	x: 'datetime',
        y: 'value2'
      },
      name: 'value2',
/*       data: [
                ['2020-10-13', 3],
                ['2020-10-14', 4],
                ['2020-10-15', 5]
              ], */
      type: 'line',
      step: 'start',
      areaStyle: {
      	color: 'green'
      }
    }
  ],
  dataset: {
    dimensions: ['datetime', 'value1', 'value2'],
    source: [{
        datetime: '2019-01-10',
        value1: 100,
        value2: 200
      },
      {
        datetime: '2020-10-11',
        value1: null,
        value2: 500
      },
      {
        datetime: '2020-10-08 23:59:52',
        value1: 300,
        value2: 500
      },
      {
        datetime: '2020-10-09 23:59:55',
        value1: 0,
        value2: 500
      },
      {
        datetime: '2020-10-10 23:59:58',
        value1: 300,
        value2: 500
      }
    ]
  },
  dataZoom:[{
  	type: 'slider'
  }]

};

//plot chart
chart.setOption(option);

//context menu
chart.on('contextmenu', (params) => {
  alert('contextmenu', params);
});