Vue 2项目使用vue-echarts绘制柱状图无法正常渲染问题求助

核心问题及修复步骤 #

• 依赖版本不匹配
  Vue2 仅支持 vue-echarts@5 版本，如果你安装了 v6 及以上版本会直接无法渲染，先执行命令调整版本：

npm uninstall vue-echarts
npm install vue-echarts@5 @vue/composition-api@1 echarts@5

• @vue/composition-api 仅引入未注册
  vue-echarts v5 依赖 composition-api 运行，仅 import 不会生效，需要手动完成注册。

• v-chart 组件未设置高度
  你仅给父容器设置了高度，v-chart 默认高度为 0，不会自动继承父容器高度，需要手动指定高度。

修改后完整代码 #

main.js #

import Vue from 'vue'
import App from './App.vue'
// 引入后要给别名再注册
import VueCompositionAPI from "@vue/composition-api";
import VueECharts from "vue-echarts";
import "echarts";

Vue.use(VueCompositionAPI)
Vue.config.productionTip = false

Vue.component("v-chart", VueECharts);

new Vue({
  render: h => h(App),
}).$mount('#app')

Comp1.vue #

<template>
<div style="height: 300px;">
    <!-- 给v-chart设置高度继承父容器 -->
    <v-chart :options="chartOptionsBar" style="height: 100%"></v-chart>
    Yes
</div>
</template>

<script>
export default {
  name: 'Comp1',
  data() {
      return {
        chartOptionsBar: {
        xAxis: {
            data: ['Latte', 'Espresso', 'Mocha', 'Cappucino']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            type: 'bar',
            data: [100, 50, 25, 10]
            }
        ]
        }
      }
  }
}
</script>

<style scoped>
</style>

内容的提问来源于stack exchange，提问作者Zhe Sheng Lim