prb_autorefresh

src/components/GazTrends/BofGazTrend.vue

@@ -1,66 +1,83 @@
 <template>
-  <v-col style="min-width:550px; max-width:550px;" cols="1">
-    <!-- <LineChart :data="chartData" /> -->
-    <div class="grid">
-      <div v-for="(item, index) in items" :key="index" class="grid-item">
-        {{ item.name }}
-        <LineChart :id="item.name" :data="item.data" />
-      </div>
-    </div>
-
-
-  </v-col>
+  <div>
+    <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
+    <button @click="load">load</button>
+  </div>
 </template>
-
+ 
 <script>
-
-
-import { Chart, LineController, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';
-import { Line as LineChart } from 'vue-chartjs';
-Chart.register(LineController, LineElement, CategoryScale, LinearScale, PointElement);
-
-
-export default {
-  components: { LineChart },
-  data: () => ({
-    items: [
-      {
-        name: "A",
-        data: {
-          labels: ["Resource Usage", '456'],
-          datasets: [
-            {
-         labels: ["Resource Usage", '456'],
-              backgroundColor: "#41b883",
-              data: [90, 99, 99, 20, 10]
+import VueHighcharts from 'vue2-highcharts'
+const asyncData = {
+  name: 'Tokyo',
+  marker: {
+    symbol: 'square'
+  },
+  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
+    y: 26.5,
+    marker: {
+      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
+    }
+  }, 23.3, 18.3, 13.9, 9.6]
+}
+export default{
+    components: {
+        VueHighcharts
+    },
+    data(){
+      return{
+        options: {
+          chart: {
+            type: 'spline'
+          },
+          title: {
+            text: 'Monthly Average Temperature'
+          },
+          subtitle: {
+            text: 'Source: WorldClimate.com'
+          },
+          xAxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+          },
+          yAxis: {
+            title: {
+              text: 'Temperature'
             },
-            {
-              label: "Mem Usage",
-              backgroundColor: "#FFAA0C",
-              data: [400, 400, 200, 100, 200]
+            labels: {
+              formatter: function () {
+                return this.value + '°';
+              }
             }
-          ]
-        }
-      },
-      {
-        name: "B",
-        data: {
-          labels: ["Resource Usage"],
-          datasets: [
-            {
-              label: "CPU Usage",
-              backgroundColor: "#41b883",
-              data: [90, 99]
-            },
-            {
-              label: "Mem Usage",
-              backgroundColor: "#FFAA0C",
-              data: [400, 400]
+          },
+          tooltip: {
+            crosshairs: true,
+            shared: true
+          },
+          credits: {
+            enabled: false
+          },
+          plotOptions: {
+            spline: {
+              marker: {
+                radius: 4,
+                lineColor: '#666666',
+                lineWidth: 1
+              }
             }
-          ]
+          },
+          series: []
         }
       }
-    ]
-  })
+    },
+    methods: {
+      load(){
+          let lineCharts = this.$refs.lineCharts;
+          lineCharts.delegateMethod('showLoading', 'Loading...');
+          setTimeout(() => {
+              lineCharts.addSeries(asyncData);
+              lineCharts.hideLoading();
+          }, 2000)
+      }
+    }
 }
 </script>