vue3之echarts3D环柱图

vue3之echarts3D环柱图

效果：

核心代码：

<template>
    <div class="container">
        <div ref="chartRef" class="charts"></div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import {
    reactive, onMounted, ref } from 'vue';

const chartRef = ref(null);
let myChart: any = null;
let option: any = null;

let dataList = reactive({
   
    charts: [
        {
   
            name: '设备故障',
            count: 239,
            color: '#218DFF',
        },
        {
   
            name: '智能识别',
            count: 239,
            color: '#2FFF88',
        },
        {
   
            name: '保修工单',
            count: 239,
            color: '#FFCE2F',
        },
        {
   
            name: '设备报警',
            count: 239,
            color: '#17EDFF ',
        },
    ],
});

const getParametricEquation = (
    startRatio: any,
    endRatio: any,
    isSelected: any,
    isHovered: boolean,
    k: any,
    h: any,
) => {
   
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = 1 / 10;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    let index = 0;
    if (h === 0) {
   
        index = 6;
        h = 1;
    } else