如何在vue3.0中使用echarts图表 demo

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、echarts图表
• 二、vue3中使用
• • 1、全局引入
  • 2、组件中使用(举个栗子)
• 样式展示

提示：以下是本篇文章正文内容，下面案例可供参考

一、echarts图表

打开echarts官网，可以选择自己想要的图标样式

二、vue3中使用

1、全局引入

import * as echarts from 'echarts'

app.config.globalProperties.$echarts = echarts

2、组件中使用(举个栗子)

html部分

<template>
	<div id="myEcharts" class="bie" :style="{ width: '56%', height: '70%' }"></div>
</template>

<script>
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import axios from "axios";
import { onMounted, onUnmounted, ref, reactive, toRefs } from "vue";
export default {
  setup() {
    /// 声明定义一下echart
    let echart = echarts;
    onMounted(() => {
      initChart();
    });


    onUnmounted(() => {
      echart.dispose;
    });
    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEcharts"));
      // 把配置和数据放这里
      chart.setOption({
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            data: [
              { value: 1048, name: "告警" },
              { value: 735, name: "异常" },
              { value: 580, name: "正常" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
              },
            },
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }

    return {
      initChart,
    };
  },
};
</script>

样式展示