vue3之echarts3D环柱图-间隔版_echart 3d vue3使用-CSDN博客

本文介绍了如何在Vue3项目中使用Echarts5.4.1和echarts-gl2.0.9创建3D环柱图，包括如何配置参数、使用模板和脚本实现动态效果，以及关键组件如Pie3D和ParametricEquation的使用。

vue3之echarts3D环柱图-间隔版

效果：
在这里插入图片描述

版本
"echarts": "^5.4.1", "echarts-gl": "^2.0.9"

核心代码：

<template>
    <div class="content">
        <div ref="eCharts" class="chart"></div>
        <div ref="eCharts2" class="chart"></div>
    </div>
</template>

<script setup>
import {
   
    onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";

const eCharts = ref(null);
let myChart = null;
const eCharts2 = ref(null);
let myChart2 = null;

let boxHeight;
let optionData = ref([
    {
   
   
        name: "已核销",
        value: 10000,
        itemStyle: {
   
   
            color: "rgba(91, 149, 255, 1)",
        },
        isShow: true
    },
    {
   
   
        name: "未核销",
        value: 12116,
        itemStyle: {
   
   
            color: "transportant",
        },
        isShow: false
    },
]);
let optionData2 = ref([
    {
   
   
        name: "已核销",
        value: 10000,
        itemStyle: {
   
   
            color: "transportant",
        },
        isShow: false
    },
    {
   
   
        name: "未核销",
        value: 12116,
        itemStyle: {
   
   
            color: "rgba(66, 250, 251, 1)",
        },
        isShow: true
    },
]);

onMounted(() => {
   
   
    initCharts(myChart, eCharts.value, optionData.value, 0);
    initCharts(myChart2, eCharts2.value, optionData2.value, '-4%');
});

const getParametricEquation = (
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    h
) => {
   
   
    // 计算
    let midRatio = (startRatio + endRatio) / 2;
    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;