基础Vue.js应用中Highcharts无法渲染，仅显示空div求助

核心问题 #

你已安装highcharts-vue适配Vue的组件库，但在BarChart.vue中错误导入了原生Highcharts库而非Vue专用组件，导致图表无法渲染。

具体修复步骤 #

1. 替换组件导入 #

修改BarChart.vue的导入语句，使用highcharts-vue提供的Vue组件：

<script>
// 移除原导入 import Highcharts from "highcharts";
import { Highcharts } from 'highcharts-vue'
import axios from "axios";

export default {
  name: "BarChart",
  components: {
    Highcharts, // 现在使用正确的Vue组件
  },
  // 其余代码保持不变
};
</script>

2. 修正数据更新逻辑 #

你初始配置了两个系列（Corn、Wheat），但API返回的数据仅更新了第一个系列，可能导致数据结构不匹配。如果API仅返回单组数据，建议重置series数组：

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);

    const categories = [...new Set(data.map(item => item.report_date))].sort();

    // 重置series数组，避免与初始双系列结构冲突
    this.chartOptions = {
      ...this.chartOptions,
      xAxis: { ...this.chartOptions.xAxis, categories },
      series: [
        {
          name: "API数据",
          data: data.map(item => item.value)
        }
      ]
    };
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

3. 确保图表容器高度生效 #

虽然你已设置容器高度，可在Highcharts配置中显式指定高度，避免渲染异常：

chartOptions: {
  chart: {
    type: "column",
    height: 400 // 显式设置图表高度
  },
  // 其余配置不变
}

完整修复后的BarChart.vue示例 #

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

<script>
import { Highcharts } from 'highcharts-vue'
import axios from "axios";

export default {
  name: "BarChart",
  components: {
    Highcharts,
  },
  data() {
    return {
      chartOptions: {
        chart: {
          type: "column",
          height: 400
        },
        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);

        const categories = [...new Set(data.map(item => item.report_date))].sort();

        this.chartOptions = {
          ...this.chartOptions,
          xAxis: { ...this.chartOptions.xAxis, categories },
          series: [
            {
              name: "API返回数据",
              data: data.map(item => item.value)
            }
          ]
        };
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>

内容的提问来源于stack exchange，提问作者nb_nb_nb