javascript - Vue:未呈现 vue-echarts
问题描述
我正在使用 vue-echart 和 Vue 2 创建一个简单的条形图。我想在我的主页 App.vue 中显示来自 Comp1.vue 的条形图。
应用程序.vue
<template>
<div id="app">
<Comp1/>
</div>
</template>
<script>
import Comp1 from './components/Comp1.vue'
export default {
name: 'App',
components: {
Comp1
}
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueECharts from "vue-echarts";
import "@vue/composition-api";
import "echarts";
Vue.config.productionTip = false
Vue.component("v-chart", VueECharts);
new Vue({
VueECharts,
render: h => h(App),
}).$mount('#app')
Comp1.vue
<template>
<div style="height: 300px;">
<v-chart :options="chartOptionsBar"></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>
我已导入所有可能的依赖项,但未呈现图表。我不知道这怎么会发生。我应该如何解决这个问题才能渲染图表?
解决方案
<v-chart :options="chartOptionsBar"></v-chart>
我相信这里应该是选项而不是选项。根据自述文件
推荐阅读
- vue.js - Vue 测试工具 - 如何通过 ref 查找元素?
- angular - 将 ngOnChange 处理程序添加到整个 Angular 项目
- json - 过滤 Ansible 输出并打印
- sql-server - SQL Server:'('附近的语法不正确。期望 ID,QUOTED_ID SQL Pivot 错误
- python - openpyxl 只读取第一个单元格
- wordpress - Wordpress 删除菜单 users.php 只留下个人资料
- javascript - jquery 活动手风琴面板不能再用 css 选择器设置?
- mysql - 获取字段的唯一值并打印其长度
- vim - 如何停止这些 Vim 错误?
- ios - 卡住 Api 响应 Ktor