Vue3实战笔记（52）—Vue 3封装持仓分析饼图

---

前言

接上文，封装持仓分析饼图。

---

一、封装持仓分析饼图

EChartsPieBorderRadiusType.vue：

<template>
    <div>
        <div ref="chartContainer" style="width: 100%; height: 450px"></div>
    </div>
</template>

<script setup lang="ts" name="">
 import { ref } from 'vue';
  import useEChartsWithEvent from '@/hooks/useEChartsWithEvent';
  
  
  const chartContainer = ref(null);
  const options = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 8598.92, name: 'JPMORGAN CHASE BANK, NATIONAL ASSOCIATION' },
        { value: 8283.21, name: '香港上海匯豐銀行有限公司' },
        { value: 6865.81, name: '渣打銀行(香港)有限公司' },
        { value: 2224.15, name: 'MLFE LTD' },
        { value: 2092.35, name: '花旗銀行' },
        { value: 8383.22, name: '其他' }
      ]
    }
  ]
});

    let chartInstance:any = ref(null);
    let echartsfn:any = new Object
    
    
    //传入方法
    echartsfn = function () {
      debugger
        chartInstance.setOption({
            title: {
            backgroundColor: '#ec0000',
            text: '标题' ,
            bottom: 0,
            right: '10%',
            width: 100,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
            }
        })
    }

    chartInstance = useEChartsWithEvent(chartContainer, options,echartsfn);
</script>

<style lang='scss' scoped>
</style>

---

总结

封装好几个组件，用于后续开发。

把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。