Using echarts in vue3 is not displayed

1. Can be installed with the help of echarts official website or as follows

// 安装 echarts 组件
// 方法一  个人推荐        
npm install echarts --save
// 方法二  全局安装 容易出现问题
npm install echarts -g

2. Global reference in main.js

import * as echarts from "echarts";

3. Create the Echarts.vue component and add the component to Echarts.vue for use, as follows

The height and width of the div in html are required, and the id must be unique

The complete code is as follows:

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div id="myChart" :style="{ width: '800px', height: '600px' }"></div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Echarts",
  mounted() {
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    let echarts = require("echarts");
    let myChart = echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
  },
};
</script>

The renderings are as follows