vue3中使用echarts

1.安装  npm install echarts --save

2.引入 在main.js中引入 

3.在页面上使用，可以新建一个页面如Home.vue

<template>

  <div class="home">

    <div id="chart"></div>

  </div>

</template>

<script>

import { reactive, toRef, onMounted } from "vue";

import { getCurrentInstance } from "vue";

export default {

  name: "Home",

  setup() {

    const state = reactive({

      title: "首页",

    });

    onMounted(async () => {

      const internalInstance = getCurrentInstance();

      const echarts =

        internalInstance.appContext.config.globalProperties.$echarts;

      var myChart = echarts.init(document.getElementById("chart"));

      // 绘制图表

      myChart.setOption({

        title: {

          text: "ECharts示例",

        },

        tooltip: {},

        xAxis: {

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

        },

        yAxis: {},

        series: [

          {

            name: "销量",

            type: "bar",

            data: [5, 20, 36, 10, 10, 20],

          },

        ],

      });

    });

    return {

      ...toRef(state),

    };

  },

};

</script>

<style lang="less" scoped>

#chart {

  height: 400px;

  width: 100%;

}

</style>