Vue2
main.js
import Vue from 'vue';
//echarts5.0 版本后需要用import * 引入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Echarts.vue组件
<template>
<div id="container" :style="{ width: '300px', height: '300px' }"></div>
</template>
<script>
export default {
mounted() {
const charts = this.$echarts.init(document.getElementById("container"));
charts.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
};
</script>
<style>
</style>
Vue3
main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts';
const app = createApp(App)
app.config.globalProperties.$echarts = echarts;
app.mount('#app');
Echarts.vue组件
<template>
<div ref="container" :style="{ width: '300px', height: '300px' }"></div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
export default {
name: "echarts",
setup() {
const container = ref(null);
onMounted(() => {
const chart = echarts.init(container.value);
// 绘制图表
chart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
});
return {
container,
};
},
};
</script>
<style>
</style>
报错点:
- 报getAttribute undefined 可能是没有拿到放置echarts的dom元素
- 报init undefined 可能是echarts没有挂载到原型上
在mounted输出一下就知道是哪个问题了。