其他分享
首页 > 其他分享> > vue4 + echarts5

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>

标签:10,Vue,drawLine,myChart,vue4,echarts5,data,echarts
来源: https://www.cnblogs.com/heyz/p/15342306.html