echarts example

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 oldOptions = 
    [{
      "dataZoom": [
        {
          "showDetail": true,
          "height": 20,
          "type": "slider",
          "show": false,
          "textStyle": {
            "fontSize": 9
          },
          "start": 0,
          "end": 100,
          "left": "30%",
          "right": "30%",
          "bottom": "0px",
          "width": "40%"
        },
        {
          "type": "inside"
        }
      ],
      "angleAxis": {
        "type": "category",
        "data": [
          "win-2012-r2-cn1",
          "win2k12sql12",
          "fs-dell-svr6",
          "appserver4",
          "fs-dell-svr22",
          "qa29-dc1",
          "fs-dell-svr21",
          "qa233-nce3",
          "fs-dell-svr5",
          "qa-cluster-nce2"
        ],
        "axisLabel": {},
        "textStyle": {
          "fontSize": 7
        }
      },
      "radiusAxis": {
        "show": false
      },
      "polar": {
        "radius": "50%"
      },
      "tooltip": {
        "trigger": "item",
        "position": "right",
        "padding": [
          10,
          5,
          5,
          5
        ],
        "enterable": true
      },
      "series": [
        {
          "type": "bar",
          "data": [
            {
              "name": "win-2012-r2-cn1",
              "deviceId": "2ff984f0-c70c-46c2-9fa2-426e3f7d1ff8",
              "value": 100,
              "itemStyle": {
                "emphasis": {
                  "shadowColor": "#ccc",
                  "shadowOffsetX": 1,
                  "shadowOffsetY": 1,
                  "opacity": ".8",
                  "shadowBlur": 10
                },
                "normal": {}
              },
              "tab": "cpuMetrics",
              "instance": "1184:svchost#11",
              "Maximum": 100
            },
            {
              "name": "win2k12sql12",
              "deviceId": "9bc8156c-40f3-4760-ac5b-d7861126ecf3",
              "value": 100,
              "itemStyle": {
...