echarts example

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<div id="main" style="height:320px;"></div>
<div id="main1" style="height:320px;"></div>

JavaScript

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

var networkColorPalette = ["#a2c9e7","#8bbce1","#73aedc","#4594d0","#2e86ca","#1779c4","#006cbf","#0063ae","#00599d","#d0e4f3"]

var storageColorPallete = ["#EFEFF0", "#E0E0E1", "#D1D1D2", "#C2C2C3", "#B3B3B4", "#A3A3A5", "#949496", "#858587", "#767678", "#676769", "#58585B", "#505053", "#49494B", "#414143", "#39393A", "#303032"]


var computeColorPalette = ["#DBCEC1", "#CFBDAC", "#C3AD97", "#B79D83", "#AB8D6E", "#9F7C59", "#936C45", "#875C30", "#7B4C1C", "#70461A", "#653F17"]

var deviceSubTypeSeriesData = [
  {
    "name": "Router",
    "value": 310,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },
  {
    "name": "Switch",
    "value": 234,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },
  {
    "name": "Firewall",
    "value": 135,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },
  {
    "name": "vSwitch",
    "value": 135,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },{
    "name": "Nutanix Switch",
    "value": 135,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },{
    "name": "IOM",
    "value": 135,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },{
    "name": "Fabric Interconnect",
    "value": 135,
    "category": "Network",
    "itemStyle": {
    	"color": _.sample(networkColorPalette)
    } 
  },
  {
    "name": "VM",
    "value": 310,
    "category": "Compute",
    "itemStyle": {
    	"color": _.sample(computeColorPalette)
    } 
  },
  {
    "name": "Bare Metal",
    "value": 310,
    "category": "Compute",
    "itemStyle": {
    	"color": _.sample(computeColorPalette)
    } 
  },
  {
    "name": "Hypervisor",
    "value": 310,
    "category": "Compute",
    "itemStyle": {
...