JSFiddle - React, Tailwind, and code Playground

Echarts_Custom Lines OrigTime=Start

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));
var bucketWidthInMs = 86000 * 1000;
var bucketWidthHalfInMs = bucketWidthInMs / 2;
var rawDataArr = [
  ["2016-01-02 00:00:00", 5, 8],
  ["2016-01-03 00:00:00", 15, 17],
  ["2016-01-04 00:00:00", 10, 18],
  ["2016-01-06 00:00:00", 7, 12],
  ["2016-01-09 00:00:00", 12, 16]
];

/**
 * we transform the time to start and end time (= width of the rectangle)
 * the start and end-time must be used for 'x:' in encode, so that the data-zomm
 * (which is set to filter mode 'weakFilter' knows where the data starts and ends)
 */
var dataArr = rawDataArr.map((dataRow, index) => {
  var startDate = new Date(dataRow[0]);
  var endDate;
  if (index < rawDataArr.length-1) {
  	var nextRow = rawDataArr[index+1];
    var nextDate = new Date(nextRow[0]);
    // here we could have some line-break logic based on the delta:
    // var delta = nextDate.getTime() - startDate.getTime();
     endDate = nextDate;  
  }
  if (!endDate) endDate = new Date(startDate.getTime() + bucketWidthInMs);
  
  return [dataRow[0], startDate.getTime(), endDate.getTime(), dataRow[1], dataRow[2], index];
});
var iTime = 0;
var iTimeStart = 1;
var iTimeEnd = 2;
var iMin = 3;
var iMax = 4;
var iIndex = 5;
console.log('dataArr', dataArr);

var filterMode = 'weakFilter';

option = {
  xAxis: {
    type: 'time',
  },
  tooltip: {
    //trigger: 'axis'
  },
  dataZoom: [{
    filterMode: filterMode,
    show: true
  }, {
    type: 'inside',
    filterMode: filterMode,
  }],
  yAxis: {
    type: 'value',
    max: 30,
    min: 0
  },
  series: [{
    name: 'series1',
    type: 'custom',
    animation: false,
    renderItem: renderItemFct,
    data: dataArr,
    dimensions: ['Time', 'Start', 'End', 'Minimum', 'Maximum'],
    encode: {
      x: [iTimeStart, iTimeEnd],
      y: [iMin, iMax],
      tooltip: [iTimeStart, iTimeEnd, iMin, iMax]
    }
  }]
};

myChart.setOption(option);

function clipPointsByRect(points, rect) {
/**
 * clipPointsByRect does not...