Highcharts 未在基本 vue js 应用程序中呈现。返回空 div

Question

我有一个简单的

Vue js

应用程序。我正在尝试将高图表渲染到应用程序中。我知道我正在从数据库中获取数据，但现在我没有在图表中使用这些数据。但我稍后会的。现在我只想控制这些数据，这是我能够做到的。但我无法渲染简单的 highcharts 条形图。

我对 vue js 很陌生。我错过了什么？

package.json

{
  "name": "my-dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.8",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^16.4.5",
    "highcharts": "^11.4.1",
    "highcharts-vue": "^2.0.1",
    "os-browserify": "^0.3.0",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "stream-browserify": "^3.0.0",
    "vm-browserify": "^1.1.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "ecmaVersion": 2021
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

componenets/BarChart.vue

<template>
  <div class="chart-container">
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import axios from "axios";

export default {
  name: "BarChart",
  components: {
    Highcharts,
  },
  data() {
    return {
      chartOptions: {
        chart: {
          type: "column", // Use "column" for bar chart
        },
        title: {
          text: "Crop Production by Country",
        },
        xAxis: {
          categories: ["USA", "China", "Brazil", "EU", "India", "Russia"],
          crosshair: true,
        },
        yAxis: {
          title: {
            text: "1000 metric tons (MT)",
          },
        },
        tooltip: {
          valueSuffix: " (1000 MT)",
        },
        series: [
          {
            name: "Corn",
            data: [406292, 260000, 107000, 68300, 27500, 14500],
          },
          {
            name: "Wheat",
            data: [51086, 136000, 5500, 141000, 107180, 77000],
          },
        ],
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get(
          "http://localhost:3001/api/web?startDate=2023-04-01&endDate=2023-04-03"
        );
        const data = response.data;
        console.log(data);

        // Assuming data from API is properly formatted
        const categories = [
          ...new Set(data.map((item) => item.report_date)),
        ].sort();

        // Update chart options with fetched data
        this.chartOptions.xAxis.categories = categories;
        this.chartOptions.series[0].data = data.map((item) => item.value);

        // Set new chart options to trigger reactivity
        this.chartOptions = { ...this.chartOptions };
        console.log(this.chartOptions);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px; /* Set a desired height for the chart container */
}
</style>

App.vue

<template>
  <div id="app">
    <h1>Multiple Charts Example</h1>
    <BarChart />
  </div>
</template>

<script>
import BarChart from "./components/BarChart.vue";

export default {
  name: "App",
  components: {
    BarChart,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这只是渲染多个图表示例，没有图表。

我错过了什么？

Answer 1

导入的

Highcharts

实际上并不是一个组件。当您执行

app.use(HighchartsVue)

时，安装过程的一部分是

<highcharts>

组件的全局注册。组件文件中的导入/注册是不需要的，实际上会导致您的问题。

从 BarChart.vue 中删除此代码：

import Highcharts from "highcharts";

components: {
  Highcharts,
},