1

src/views/bigdata/chart-enterprises.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="chart-container">
+    <div id="a" style="width: 100%; height:24vh;">
+      <highcharts :options="chartOptions" :callback="myCallback"
+                  style="width: 100%; height:50vh;"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { Chart } from "highcharts-vue";
+import {getBigDataForQ} from "@/api/bigdata";
+export default {
+  name: 'extend-graphDemo-highchartsColumn',
+  components: {
+    highcharts: Chart
+  },
+  data() {
+    return {
+      chartOptions: {
+        title: {
+          text: ''
+        },
+        chart: {
+          type: 'column',
+          backgroundColor: '#000000'  // 修改背景颜色为黑色
+        },
+        xAxis: {
+          categories: [
+
+          ],
+          crosshair: true
+        },
+        yAxis: {
+          min: 0,
+          title: {
+            text: '数量 (个)'
+          }
+        },
+        tooltip: {
+          // head + 每个 point + footer 拼接成完整的 table
+          headerFormat: '<table>'+'<span style="font-size:10px">{point.key}</span>',
+          pointFormat: '<tr><td style="color:{series.color};padding:0">: </td>' +
+            '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
+          footerFormat: '</table>',
+          shared: true,
+          useHTML: true
+        },
+        plotOptions: {
+          column: {
+            borderWidth: 0
+          }
+        },
+        credits: {
+          enabled: false
+        },
+        series: [{
+          name: '危化企业',
+          data: []
+        }]
+      }
+
+    }
+  },
+  mounted() {this.getData() },
+
+  methods: {
+    myCallback() {
+      console.log("this is callback function");
+    },
+    getData() {
+      getBigDataForQ('enterprises').then(res =>{
+        if (res.data !== null) {
+          for (let i = 0; i < res.data.length; i++) {
+            this.chartOptions.xAxis.categories.push(res.data[i].dict_label);
+            this.chartOptions.series[0].data.push(res.data[i].count);
+          }
+        }
+      })
+    }
+  }
+}
+</script>