<template>
<div class="mychart ">
<div ref="mychart " style="width:100%; height:100%; "></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
let mychart = echarts.init(this.$refs.mychart);
let option = {}; //要引用的echars属性
this.$nextTick(function() {
mychart.setOption(option);
mychart.resize(); //图表自适应
});
}
}
};
</script>
<style lang="less" scoped>
.mychart {
width: 100%;
height: 100%;
}
</style>
echarts vue 注册基础模板
于 2022-04-19 14:56:08 首次发布
该博客展示了如何在Vue中使用Echarts库初始化一个图表组件,并在页面加载后通过`$nextTick`确保DOM渲染完成,调用`resize`方法实现图表的自适应布局。内容涉及到Vue的`mounted`生命周期钩子、Echarts的`init`方法和`setOption`方法。
摘要由CSDN通过智能技术生成