Vuetify Basic

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.2.2/echarts.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12>
          <div id="main" style="width: 1100px; height:5000px;"></div>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

JavaScript

Vue.use(Vuetify);


var vm = new Vue({
  el: "#app",
  mounted() {
    this.drawOctetViewChart()
  },
  methods: {
    drawOctetViewChart(){
      const vm = this;
      const subnets = _.keys(this.response.data);
      const myChart = echarts.init(document.getElementById('main'));
      const symbolSize = 10
      let gridConfig = {
        left: '14%',
        width: '900px',
        height: 40
      }
      let chartGridConfig = [{
        left: gridConfig.left,
        top: 50,
        width: gridConfig.width,
        height: '0px'
      }];
      let top = 0;
      _.each(subnets, function (o) {
        top = top + 60;
        chartGridConfig.push({
          left: gridConfig.left,
          top: top,
          width: gridConfig.width,
          height: gridConfig.height
        });
      });
      let xAxisConfig = [{
        min: 0,
        max: 63,
        position: 'top',
        gridIndex: 0,
        type: 'value',
        splitNumber: 63,
        show: true,
        axisLine: {
          onZero: false,
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: 10
          },
          color: 'grey',
          show: true,
          rotate: 270,
          fontSize: '2px',
          formatter: function (o) {
            var val = Number(o);
            return val * 4 + " - " + (val * 4 + 3);
          },
        },
        axisTick: {
          show: true
        }
      }]

      let i = 1;
      _.each(subnets, function (o) {
        xAxisConfig.push({
          min: 0,
          max: 63,
          position: 'top',
          gridIndex: i++,
          type: 'value',
          splitNumber: 63,
          show: true,
          axisLine: {
            onZero: false,
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        })
      });


      let yAxisConfig = [{
        min: 0,
        max: 0,
        gridIndex:...