vue3.2 Echarts 圆形统计图

 

父组件传递的数据

<!-- 圆形统计图 -->

<div class="ChartBox">

      <StatisticalChartassembly :OrderList="User.OrderList"></StatisticalChartassembly>

</div>

const User = reactive({

    OrderList: [

        { value: 1048.22, name: '外卖' },

        { value: 735, name: '会员店' },

        { value: 580, name: '营业厅' },

        { value: 484, name: '零售' },

        { value: 300, name: '生鲜' }

    ],

})

子组件 

<template>

    <div id="ForderData" style="width:100%; height: 200px;"></div>

</template>

<script setup>

import { onMounted } from 'vue'

import * as echarts from 'echarts'

const props = defineProps({

    OrderList:Array//父组件传递的数据

})

const line = () => {

    let myChart = echarts.init(document.getElementById('ForderData'))

    myChart.setOption({// 设置 鼠标移入后想要的样式

        ti