Vue集成FusionCharts提示Unable to find the container DOM element报错求助

问题原因 #

你遇到的Unable to find the container DOM element报错核心是多余配置了renderAt参数：vue-fusioncharts封装组件已经自动处理了渲染容器的绑定逻辑，不需要手动指定该参数。额外指定后FusionCharts原生渲染逻辑会优先查找你指定的DOM节点，和Vue组件的挂载时机产生冲突，最终找不到对应容器。

还有两处需要修正的细节：

• template中绑定的dataformat属性和data内声明的dataFormat字段大小写不匹配，容易引发绑定失效
• 无需额外给fusioncharts组件套一层id为chart-container的div，组件本身会生成对应渲染容器

修正后代码 #

<template>
  <div id="app">
    <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataFormat="dataFormat"
      :dataSource="dataSource"
    >
    </fusioncharts>
  </div>
</template>

<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);

// 替换为你的实际图表数据
const chartData = [
  { label: "委内瑞拉", value: "299K" },
  { label: "沙特", value: "266K" },
  { label: "加拿大", value: "170K" },
  { label: "伊朗", value: "158K" },
  { label: "俄罗斯", value: "144K" }
];

const dataSource = {
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]",
    subcaption: "In MMbbl = One Million barrels",
    xaxisname: "Country",
    yaxisname: "Reserves (MMbbl)",
    numbersuffix: "K",
    theme: "fusion"
  },
  data: chartData
};

export default {
  name: 'app',
  data() {
    return {
      "type": "column2d",
      "width": "550",
      "height": "350",
      "dataFormat": "json",
      dataSource
    }
  }
}
</script>

修改后重启项目即可正常渲染图表。

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