Echart实现3D饼图示例

韩天尊跑路

已于 2025-01-02 11:34:33 修改

阅读量842

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js echarts javascript

于 2024-12-31 14:01:23 首次发布

本文链接：https://blog.csdn.net/qq_40739261/article/details/144848605

在可视化项目中，很多地方会遇见图表；echart是最常见的；这个示例就是用Echart， echart-gl实现3D饼图效果，复制即可用
在这里插入图片描述

//需要安装，再引用依赖

import * as echarts from "echarts";
import 'echarts-gl';

initUserTypeEchart() {
   
   
      let that = this;
      let chartDom = document.getElementById("echart-id");
      let myChart = echarts.init(chartDom);
      function getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,h) {
   
   
        const midRatio = (startRatio + endRatio) / 2;
        const startRadian = startRatio * Math.PI * 2;
        const endRadian = endRatio * Math.PI * 2;
        const midRadian = midRatio * Math.PI * 2;
        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
   
   
          isSelected = false;
        }
        k = typeof k !== "undefined" ? k : 1 / 3;
        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        // 鼠标滑过时外环放大大小
        const hoverRate = isHovered ? 1.05 : 1;
        // 返回曲面参数方程
        return {
   
   
          u: {
   
    min: -Math.PI, max: Math.PI * 3, step: Math.PI / 32 },
          v: {
   
    min: 0, max: Math.PI * 2, step: Math.PI / 20 },

          x(u, v) {
   
   
            if (u < startRadian) {
   
   
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
   
   
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k