JSFiddle - React, Tailwind, and code Playground

Echarts_Custom Scatter

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.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]
];

/**
 * 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 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',
    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 renderItemFct(params, api) {
  if (params.context.rendered) {
    console.log('api', api);
    params.context.rendered = true;
    return;
  }

  //console.log('params', params);
  //console.log('api', api);
  // .context.rendered = true;
  var sampleStartDateTime = api.value(iTimeStart);
  var sampleEndDateTime = api.value(iTimeEnd);
  var sampleMin = api.value(iMin);
 ...