在vue3 中使用echarts

1、安裝 echarts 

npm install echarts --save

 

2、main.js 中引入

// 部分代碼展示
import * as echarts from 'echarts'
  
const app = createApp(App);

// vue3 給原型上掛載屬性
app.config.globalProperties.$echarts = echarts;


app.use(store).use(router).use(ElementPlus).mount('#app');

 

3、組件中使用

 

<template>
  <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script>

export default {
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    //this.$root => app
    console.log(this.echarts)
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    // 繪制圖表
    myChart.setOption({
      title: { text: "總用戶量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用戶量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>