echarts example

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script>
<script src="https://gallerybox.echartsjs.com/dep/dat.gui.min.js"></script>
<div id="main" style="width: 100%;height:600px;"></div>

JavaScript

var data = [
  {
    "name": "Documents",
    "value": [
      0,
      "2020-02-20",
      "2020-02-21",
      9153
    ],
    "itemStyle": {
      "normal": {
        "color": "#bd6d6c"
      }
    }
  }
]

var startTime = moment.now();
console.log("startTime :: ", startTime)
const day = 1000 * 60 * 60 * 24;

var categories = [
  'event-1', 'event-2', 'event-3', 'event-4', 'event-5', 'event-6'
];

function renderItem(params, api) {
	console.log(categoryIndex);
  console.log(api.value(0));
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.6;
	console.log(start, end)
  var rectShape = echarts.graphic.clipRectByRect({
    x: start[0],
    y: start[1], // - height / 2,
    width: end[0]-start[0],
    height: 10
  }, {
    x: params.coordSys.x,
    y: params.coordSys.y,
    width: params.coordSys.width,
    height: params.coordSys.height
  });


  let result = rectShape && {
    type: 'rect',
    shape: rectShape,
    style: api.style({text: "", textFill: "#000", "textPosition": "top"}),
    styleEmphasis: {
      textStroke: null
    }
  };
  
  return result
}

option = {
  tooltip: {
    formatter: function (params) {
      return params.marker + params.name + ': ' + params.value[3] + ' ms';
    }
  },
  title: {
    text: 'Profile',
    left: 'center'
  },

  xAxis: {
    boundaryGap : false,
    data: Array(30).fill(0).map((item, index) => {
    	console.log(moment(startTime + day * index).format("YYYY-MM-DD"))
      return moment(startTime + day * index).format("YYYY-MM-DD")
    })
  },
  yAxis: {
    data: categories
  },
  series: [{
    type: 'custom',
    renderItem: renderItem,
    itemStyle: {
      normal: {
        opacity: 0.8
      }
    },
    encode: {
      x: [1, 2],
      y: 0
    },
    data: data
  }]
};


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