Vue.js中Morris环形图表无法渲染问题求助

这个问题的核心原因是DOM渲染时机不匹配，咱们一步步拆解：

问题根源 #

你原来的代码是在$(document).ready()里调用App.chartsMorris()，但Vue组件的<div id="donut-chart">并不是在document.ready时就存在于DOM中的——Vue会在实例挂载阶段（也就是mounted钩子触发时）才把组件的模板渲染到页面上。当document.ready执行时，你的Vue组件还没完成DOM挂载，Morris库找不到#donut-chart这个元素，自然就渲染出空白区域了。

另外，全局脚本的执行顺序也可能有影响：如果App.chartsMorris()的调用早于Vue组件的DOM挂载，同样会导致元素不存在的问题。

解决方案 #

咱们把图表的初始化逻辑移到Vue组件的生命周期钩子中，确保DOM已经存在后再执行初始化：

1. 修改Vue组件代码

在组件的mounted钩子中初始化图表（这个钩子触发时，组件的DOM已经完全挂载到页面上了）：

<template>
  <div id="donut-chart" style="height: 250px;"></div>
</template>

<script>
export default {
  mounted() {
    // 组件DOM挂载完成后，初始化环形图
    this.initDonutChart();
  },
  methods: {
    initDonutChart() {
      // 复用原来的图表配置逻辑
      const color1 = App.color.warning;
      const color2 = App.color.success;
      const color3 = App.color.primary;

      new Morris.Donut({
        element: 'donut-chart',
        data: [
          {label: 'Facebook', value: 33 },
          {label: 'Google', value: 33 },
          {label: 'Twitter', value: 33}
        ],
        colors: [color1, color2, color3],
        formatter: (y) => `${y}%`
      });
    }
  }
}
</script>

2. 调整全局脚本的调用

移除$(document).ready()里的App.chartsMorris()调用，因为现在组件自己负责初始化图表了：

<script src="/static/js/app-charts-morris.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  //initialize the javascript
  App.init()
  // 移除这一行：App.chartsMorris()
  App.ChartJs()
  App.dashboard()
});
</script>

3. 检查依赖加载顺序

确保Morris的依赖库加载顺序正确，必须按以下顺序引入：

• jQuery
• Raphael.js（Morris依赖这个库来绘制图形）
• Morris.js
• app-charts-morris.js

额外注意事项 #

• 如果App对象不是全局可访问的（比如被模块化封装了），可以把颜色变量直接写到组件里，或者调整app-charts-morris.js的导出方式，让组件可以导入使用。
• 如果你的组件是动态渲染的（比如通过路由切换显示），可以把初始化逻辑放到updated钩子中，但要注意避免重复初始化（可以加个判断，比如图表实例不存在时才初始化）。

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