在Vue3使用Echarts步骤

Echarts在Vue3.2中使用步骤

Echarts5的使用：

官网链接：(https://echarts.apache.org/handbook/zh/get-started/)

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代码块中引入需要用到的函数或者方法：

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

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

const chart = ref();

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

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: [
      {
        // 光标移入显示的东西
        name: 'Radius Mode 111',
        type: 'pie',
        radius: [20, 140],
        center: ['25%', '50%'],
        roseType: 'radius',
        itemStyle: {
          // 图表圆角尺度
          borderRadius: 10
        },
        label: {
          // 控制图表各属性指示的显示与隐藏
          show: false
        },
        emphasis: {
          label: {
            // 鼠标移动到哪个模块 相应指示上数据的隐藏还是显示
            show: true
          }
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 33, name: 'rose 2' },
          { value: 28, name: 'rose 3' },
          { value: 22, name: 'rose 4' },
          { value: 20, name: 'rose 5' },
          { value: 15, name: 'rose 6' },
          { value: 12, name: 'rose 7' },
          { value: 10, name: 'rose 8' }
        ]
      },
    ]
  };
  myChart.setOption(option)
}
</script>

效果