在Vue 3项目中使用 echarts

1. 在项目中下载Echarts5：npm install echarts或者yarn add echarts

2.在项目文件main.js全局引入Echarts文件：import * as echarts from 'echarts/core';

也可在页面中单独引入使用：`import * as echarts from ‘echarts’

3.在页面组件中准备容器放置图表:

// ref 为了能够拿到图表函数，注意设置宽高
<div ref="chart" style="width: 600px;height: 400px"></div>

4.在js代码块中引入需要用到的函数或者方法：

5.定义一个响应式的值，用于传递图表：

6.创建一个函数存放图表：

import * as echarts from 'echarts'
import {onMounted, ref} from "vue";

const chart = ref();    // ​定义一个响应式的值，用于传递图表

const init =()=> {
    const myChart = echarts.init(chart.value);
    
    // 此处粘贴图表代码
    let option = {
        
    }
    
    myChart.setOption(option)
}

7.在TS中创建一个onMounted初始化函数，一进入页面就会调用此函数;并在此调用定义的放图表的函数

onMounted(() => {
    // 调用函数 处理图表将其渲染到页面
    init()
})

8.Demo完整代码：

<template>
  <BreadCrumb parent="页面示例" current="数据可视化"></BreadCrumb>

  <!--  page  -->
  <div class="card">
    <div ref="chart" style="width: 600px;height: 400px"></div>
  </div>


</template>

<script setup lang="ts">
import BreadCrumb from '@/components/BreadCrumb.vue'
import * as echarts from 'echarts'
import {onMounted, ref} from "vue";

// 一进来就调用
onMounted(() => {
  init()
})

const chart = ref();
const init =()=> {
  const myChart = echarts.init(chart.value);
  let option = {
    title: {
      text: '南丁格尔玫瑰图',
      subtext: '表头提示文本',
      left: 'center'
    },
    // 鼠标移入显示的东西
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      left: 'center',
      top: 'bottom',
      data: [
        'rose1',
        'rose2',
        'rose3',
        'rose4',
        'rose5',
        'rose6',
        'rose7',
        'rose8'
      ]
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        // 点击小图标数据详情的显示与隐藏
        dataView: { show: true, readOnly: false },
        // 刷新图表按键的显示与隐藏
        restore: { show: true },
        // 保存图表按键的显示与隐藏
        saveAsImage: { show: true }
      }
    },
    series: {    // 修改这个字段可以显示不同类型的图，其中数据等得相应修改
      type: 'sankey',// 图表类型为桑基图
      layout: 'none',
      emphasis: {
        focus: 'adjacency'
      },
      data: [
        { name: 'a' },
        { name: 'b' },
        { name: 'a1' },
        { name: 'a2' },
        { name: 'b1' },
        { name: 'c' }
      ],
      links: [
        { source: 'a', target: 'a1', value: 5 },
        { source: 'a', target: 'a2', value: 3 },
        { source: 'b', target: 'b1', value: 8 },
        { source: 'a', target: 'b1', value: 3 },
        { source: 'b1', target: 'a1', value: 1 },
        { source: 'b1', target: 'c', value: 2 }
      ]
    }
  myChart.setOption(option)
}
</script>

 series——修改这个字段可以控制使用不同类型的图，其中数据等相应字段做出修改

效果（桑基图）

参考：在Vue3使用Echarts步骤_vue3代码中如何使用echarts-CSDN博客