JSFiddle - React, Tailwind, and code Playground

Echarts_Custom Lines OrigTime=Middle

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 tmpDate = new Date(dataRow[0]);
  var startDate = new Date(tmpDate.getTime() - bucketWidthHalfInMs);
  var endDate = new Date(tmpDate.getTime() + bucketWidthHalfInMs);
  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 work as expected
 * see: https://github.com/apache/incubator-echarts/issues/10222
 */
  // return echarts.graphic.clipPointsByRect(points, rect);
  console.log('rect', rect);
  // [xmin, ymin, xmax, ymax]
  var clipRect = [
    rect.x,
...