脚本宝典收集整理的这篇文章主要介绍了vue4 + echarts5，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
npm install echarts --save
mian.js 引用
import * as echarts from 'echarts';
app.config.globalProperties.$echarts = echarts;
<template>
<div class="home">
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
};
</script>
<style lang="scss" scoped>
.home {
height: 100%;
width: 100%;
}
</style>
脚本宝典总结
以上是脚本宝典为你收集整理的vue4 + echarts5全部内容，希望文章能够帮你解决vue4 + echarts5所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。