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="http://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="main" style="width: 100%;height:400px;"></div>

JavaScript

var data = [{"Timestamp":1533079285739,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533086966849,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533089848456,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533090328051,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533177457657,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533243706020,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533246106217,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"},{"Timestamp":1533309231679,"value":1,"ID":"0b83f942629f5ccb3b72abb20e7ac631bbbfa153"}]
;

var colorMap = {}
_.chain(data).map("ID").uniq().map(
  function(o){
    var hex = Math.floor( Math.random() * 0xFFFFFF );
  	var colorVal = "#" + hex.toString(16);
  	var _obj = {};
  	colorMap[o] = colorVal;
  }
).value()


var chartData = _.map(data, function(o) {
  console.log(o.ID);
  return {
  	value: [o.Timestamp, 1],
    itemStyle: {
    	normal: {
      	color: colorMap[o.ID]
       }
    }
    }
})

console.log(JSON.parse(JSON.stringify(chartData)));
console.log(colorMap)

option = {
  grid: {
    left: '3%',
    right: '6%',
    bottom: '4%',
    containLabel: true
  },
  tooltip: {
    trigger: 'item',
    showDelay: 0,
    formatter: function(params) {
      return '产品数量： ' +
        params.value[0] + '<br/> ' + '产品价格: '+params.value[1];


    },
    axisPointer: {
      show: true,
      type: 'cross',
      lineStyle: {
        type: 'dashed',
        width: 1
      }
    }
  },

  xAxis: [{
    type: 'time',
    name:'数量',
    scale: true,
    axisLabel: {
      formatter: '{value}'
    },
    nameTextStyle: {
      color: '#3259B8',
      fontSize: 14,
    },
    axisTick: {
      show: true,
    },
    axisLine: {
      lineStyle: {
        color: '#3259B8',
      },
      symbol:['none','arrow']
    },
    splitLine: {
      show: true,
      lineStyle:...