devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts3d饼图实现_echarts 3d饼图

作者：凡人多烦事01 | 2024-05-17 07:38:53

赞

踩

echarts 3d饼图

一、vue中使用3d饼图

效果图：

二、使用步骤 

1.引入库

安装echarts

在package.json文件中添加

  1.  "dependencies": {
  2.  	"echarts": "^5.1.2"
  3.  	"echarts-gl": "^1.1.0",
  4.  	//  "echarts-gl": "^2.0.8"
  5.  },
npm install echarts-gl@1.1.0 --save

2.使用

完整代码如下（示例）：

HTML代码
  1. <template>
  2.     <div :class="className" :style="{height:height,width:width,backgroundImage:'url(' +  require('@/assets/bigScreen/deviceBg.png')  + ')'}"/>
  3.   </template>
js脚本代码
  1. <script>
  2.     import "echarts-gl";
  3. import echarts from 'echarts'
  4. require('echarts/theme/macarons') // echarts theme
  5.     export default {
  6.         props: {
  7.             className: {
  8.             type: String,
  9.                 default: 'chart'
  10.             },
  11.             width: {
  12.             type: String,
  13.             default: '50%'
  14.             },
  15.             height: {
  16.             type: String,
  17.             default: '300px'
  18.             },
  19.             optionTest:{}
  20.         },
  21.       data() {
  22.         return {
  23.           myChart: null,
  24.           seriesData: [],
  25.         };
  26.       },
  27.       mounted() {
  28.         this.getList();
  29.         window.addEventListener("resize", () => {
  30.           this.reloadChart();
  31.         });
  32.       },
  33.       methods: {
  34.         getList() {
  35.           this.seriesData = [
  36.             {
  37.               name: "canshu1",
  38.               value: 58,
  39.             },
  40.             {
  41.               name: "canshu2",
  42.               value: 3,
  43.             },
  44.             {
  45.               name: "canshu3",
  46.               value: 15,
  47.             },
  48.             {
  49.               name: "canshu4",
  50.               value: 30,
  51.             },
  52.           ];
  53.           this.initChart(this.seriesData);
  54.         },
  55.         initChart(data) {
  56.           if (data.length == 0) return;
  57.         //   this.myChart = this.$echarts.init(this.$refs.myChart);
  58.           this.myChart = echarts.init(this.$el, 'macarons')
  59.           let colors = [
  60.             "RGBA(36, 154, 163, 1)",
  61.             "RGBA(245, 169, 64, 1)",
  62.             "RGBA(240, 136, 64, 1)",
  63.             "RGBA(123, 198, 239, 1)",
  64.             "RGBA(245, 169, 64, 1)",
  65.             "RGBA(240, 136, 64, 1)",
  66.             "RGBA(123, 198, 239, 1)",
  67.           ];
  68.           const getPie3D = (pieData, internalDiameterRatio) => {
  69.             //internalDiameterRatio:透明的空心占比
  70.             let series = [];
  71.             let sumValue = 0;
  72.             let startValue = 0;
  73.             let endValue = 0;
  74.             let k = 1 - internalDiameterRatio;
  75.             pieData.sort((a, b) => {
  76.               return b.value - a.value;
  77.             });
  78.             // 为每一个饼图数据，生成一个 series-surface 配置
  79.             for (let i = 0; i < pieData.length; i++) {
  80.               sumValue += pieData[i].value;
  81.               let seriesItem = {
  82.                 name:
  83.                   typeof pieData[i].name === "undefined"
  84.                     ? `series${i}`
  85.                     : pieData[i].name,
  86.                 type: "surface",
  87.                 parametric: true,
  88.                 wireframe: {
  89.                   show: false,
  90.                 },
  91.                 pieData: pieData[i],
  92.                 pieStatus: {
  93.                   selected: false,
  94.                   hovered: false,
  95.                   k: k,
  96.                 },
  97.                 radius: "20%",
  98.                 center: ["10%", "20%"],
  99.               };
  100.               if (typeof colors[i] != "undefined") {
  101.                 let itemStyle = {};
  102.                 typeof colors[i] != "undefined"
  103.                   ? (itemStyle.color = colors[i])
  104.                   : null;
  105.                 seriesItem.itemStyle = itemStyle;
  106.               }
  107.     
  108.               series.push(seriesItem);
  109.             }
  110.             // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  111.             // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  112.     
  113.             for (let i = 0; i < series.length; i++) {
  114.               endValue = startValue + series[i].pieData.value;
  115.               series[i].pieData.startRatio = startValue / sumValue;
  116.               series[i].pieData.endRatio = endValue / sumValue;
  117.               series[i].parametricEquation = getParametricEquation(
  118.                 series[i].pieData.startRatio,
  119.                 series[i].pieData.endRatio,
  120.                 false,
  121.                 false,
  122.                 k,
  123.                 series[i].pieData.value
  124.               );
  125.               startValue = endValue;
  126.             }
  127.             // let boxHeight = getHeight3D(series, 15); //通过传参设定3d饼/环的高度，26代表26px
  128.             // 准备待返回的配置项，把准备好的 legendData、series 传入。
  129.             let option = {
  130.               labelLine: {
  131.                 show: true,
  132.                 lineStyle: {
  133.                   color: "#7BC0CB",
  134.                 },
  135.               },
  136.               legend: {
  137.                 orient: "vertical",
  138.                 top: "center",
  139.                 right: this.fontSize(0.1),
  140.                 data: data,
  141.                 icon: "circle",
  142.                 itemWidth: this.fontSize(0.13), //矩形宽度
  143.                 itemHeight: this.fontSize(0.13), //矩形高度
  144.                 formatter: (res) => {
  145.                   let str = "";
  146.                   series.forEach((ele) => {
  147.                     if (res == ele.name) {
  148.                       let bfb = (
  149.                         (ele.pieData.endRatio - ele.pieData.startRatio) *
  150.                         100
  151.                       ).toFixed(2);
  152.                       if (bfb == "NaN") {
  153.                         str =
  154.                           "{e|" +
  155.                           ele.pieData.name +
  156.                           "}" +
  157.                           "{a|" +
  158.                           ele.pieData.value +
  159.                           "  " +
  160.                           0 +
  161.                           "%}";
  162.                       } else {
  163.                         str =
  164.                           "{e|" +
  165.                           ele.pieData.name +
  166.                           "} " +
  167.                           "{a| " +
  168.                           ele.pieData.value +
  169.                           "}{b|  " +
  170.                           bfb +
  171.                           "%}";
  172.                       }
  173.                     }
  174.                   });
  175.                   return str;
  176.                 },
  177.                 textStyle: {
  178.                   color: "#fff",
  179.                   fontSize: this.fontSize(0.35),
  180.                   padding: [5, 0],
  181.                   rich: {
  182.                     a: {
  183.                       fontSize: this.fontSize(0.35),
  184.                       color: "#00DCF6",
  185.                       // width: this.fontSize(0.5),
  186.                     },
  187.                     b: {
  188.                       fontSize: this.fontSize(0.35),
  189.                       color: "#00DCF6",
  190.                       // width: this.fontSize(0.85),
  191.                     },
  192.                     e: {
  193.                       fontSize: this.fontSize(0.35),
  194.                       // width: this.fontSize(1.0),
  195.                     },
  196.                   },
  197.                 },
  198.               },
  199.               label: {
  200.                 show: false,
  201.                 formatter: "",
  202.               },
  203.               tooltip: {
  204.                 show: true,
  205.                 formatter: (params) => {
  206.                   if (
  207.                     params.seriesName !== "mouseoutSeries" &&
  208.                     params.seriesName !== "pie2d"
  209.                   ) {
  210.                     let bfb = (
  211.                       (option.series[params.seriesIndex].pieData.endRatio -
  212.                         option.series[params.seriesIndex].pieData.startRatio) *
  213.                       100
  214.                     ).toFixed(2);
  215.                     return (
  216.                       `${params.seriesName}<br/>` +
  217.                       `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
  218.                       `${bfb}%`
  219.                     );
  220.                   }
  221.                 },
  222.               },
  223.               xAxis3D: {
  224.                 min: -1,
  225.                 max: 1,
  226.               },
  227.               yAxis3D: {
  228.                 min: -1,
  229.                 max: 1,
  230.               },
  231.               zAxis3D: {
  232.                 min: -1,
  233.                 max: 1,
  234.               },
  235.               grid3D: {
  236.                 show: false,
  237.                 boxHeight: 10, //圆环的高度
  238.                 left: -this.fontSize(2.2),
  239.                 top: -this.fontSize(0.1), //3d饼图的位置
  240.                 viewControl: {
  241.                   //3d效果可以放大、旋转等，请自己去查看官方配置
  242.                   alpha: 25, //角度
  243.                   distance: 200, //调整视角到主体的距离，类似调整zoom
  244.                   rotateSensitivity: 0, //设置为0无法旋转
  245.                   zoomSensitivity: 0, //设置为0无法缩放
  246.                   panSensitivity: 0, //设置为0无法平移
  247.                   autoRotate: false, //自动旋转
  248.                 },
  249.               },
  250.               series: series,
  251.             };
  252.             return option;
  253.           };
  254.     
  255.           //获取3d丙图的最高扇区的高度
  256.           // const getHeight3D = (series, height) => {
  257.           //   series.sort((a, b) => {
  258.           //     return b.pieData.value - a.pieData.value;
  259.           //   });
  260.           //   return (height * this.fontSize(1)) / series[0].pieData.value;
  261.           // };
  262.     
  263.           // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  264.           const getParametricEquation = (
  265.             startRatio,
  266.             endRatio,
  267.             isSelected,
  268.             isHovered,
  269.             k,
  270.             h
  271.           ) => {
  272.             // 计算
  273.             let midRatio = (startRatio + endRatio) / 2;
  274.             let startRadian = startRatio * Math.PI * 2;
  275.             let endRadian = endRatio * Math.PI * 2;
  276.             let midRadian = midRatio * Math.PI * 2;
  277.             // 如果只有一个扇形，则不实现选中效果。
  278.             if (startRatio === 0 && endRatio === 1) {
  279.               isSelected = false;
  280.             }
  281.             // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  282.             k = typeof k !== "undefined" ? k : 1 / 3;
  283.             // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  284.             let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  285.             let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  286.             // 计算高亮效果的放大比例（未高亮，则比例为 1）
  287.             let hoverRate = isHovered ? 1.05 : 1;
  288.             // 返回曲面参数方程
  289.             return {
  290.               u: {
  291.                 min: -Math.PI,
  292.                 max: Math.PI * 3,
  293.                 step: Math.PI / 32,
  294.               },
  295.               v: {
  296.                 min: 0,
  297.                 max: Math.PI * 2,
  298.                 step: Math.PI / 20,
  299.               },
  300.               x: function(u, v) {
  301.                 if (u < startRadian) {
  302.                   return (
  303.                     offsetX +
  304.                     Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
  305.                   );
  306.                 }
  307.                 if (u > endRadian) {
  308.                   return (
  309.                     offsetX +
  310.                     Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
  311.                   );
  312.                 }
  313.                 return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  314.               },
  315.               y: function(u, v) {
  316.                 if (u < startRadian) {
  317.                   return (
  318.                     offsetY +
  319.                     Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
  320.                   );
  321.                 }
  322.                 if (u > endRadian) {
  323.                   return (
  324.                     offsetY +
  325.                     Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
  326.                   );
  327.                 }
  328.                 return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  329.               },
  330.               z: function(u, v) {
  331.                 if (u < -Math.PI * 0.5) {
  332.                   return Math.sin(u);
  333.                 }
  334.                 if (u > Math.PI * 2.5) {
  335.                   return Math.sin(u) * h * 0.1;
  336.                 }
  337.                 return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
  338.               },
  339.             };
  340.           };
  341.           let option = getPie3D(data, 0.8);
  342.           //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  343.           option.series.push({
  344.             name: "pie2d",
  345.             type: "pie",
  346.             labelLine: {
  347.               show: false,
  348.               length: 15,
  349.               length2: 15,
  350.             },
  351.             startAngle: -this.fontSize(0.3), //起始角度，支持范围[0, 360]。
  352.             clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  353.             radius: [this.fontSize(1.3) + "%", this.fontSize(1.4) + "%"],
  354.             center: [this.fontSize(1.5) + "%", this.fontSize(1.8) + "%"], //指示线的位置
  355.             data: data,
  356.             itemStyle: {
  357.               opacity: 0,
  358.             },
  359.           });
  360.           this.myChart.setOption(option);
  361.         },
  362.         // 字体自适应。
  363.         fontSize(res) {
  364.           const clientWidth =
  365.             window.innerWidth ||
  366.             document.documentElement.clientWidth ||
  367.             document.body.clientWidth;
  368.           if (!clientWidth) return;
  369.           const fontSize = 40 * (clientWidth / 1920);
  370.           return res * fontSize;
  371.         },
  372.       },
  373.     
  374.       //重新加载图表
  375.       reloadChart() {
  376.         this.disposeChart();
  377.         this.initChart(this.seriesData);
  378.       },
  379.       //销毁图表以及重置各个数据
  380.       disposeChart() {
  381.         if (this.myChart) {
  382.           this.myChart.dispose();
  383.         }
  384.       },
  385.     
  386.       beforeDestroy() {
  387.         this.disposeChart();
  388.       },
  389.     };
  390.     </script>

三、会旋转的3D饼图

  1. <template>
  2.             <div class="chart" ref="myLineChart" id="charts" :style="{height:height,width:width,border:border,backgroundImage:'url(' + require('@/assets/images/chart_opacity_bg.png') + ')',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}"></div> 
  3.             </div>
  4. 	<!-- 饼图 -->
  5.     <!-- <div class="container">
  6.             <div class="chartsGl" id="charts"></div>
  7.              <div class="buttomCharts"></div>
  8.         </div> -->
  9.     
  10. </template>
  11. <script>
  12.  
  13. import "echarts-gl";
  14. import echarts from 'echarts'
  15. require('echarts/theme/macarons') // echarts theme
  16. export default {
  17. props: {
  18.         className: {
  19.         type: String,
  20.             default: 'chart'
  21.         },
  22.         width: {
  23.         type: String,
  24.         default: '30%'
  25.         },
  26.         height: {
  27.         type: String,
  28.         default: '300px'
  29.         },
  30.         border: {
  31.         type: String,
  32.         default: '1px solid red'
  33.         },
  34.         optionTest:{}
  35.     },
  36.  
  37. data() {
  38.  return {
  39.       myChart: null,
  40. optionData:[
  41.  {
  42.      "name": "病区四",
  43.      "value": 80,
  44.  },
  45.  {
  46.      "name": "病区一",
  47.      "value": 200,
  48.  },
  49.  {
  50.      "name": "病区三",
  51.      "value": 20,
  52.  },
  53.  {
  54.      "name": "病区二",
  55.      "value": 400,
  56.  },
  57.  {
  58.      "name": "病区五",
  59.      "value": 500,
  60.  },
  61.  {
  62.      "name": "病区66",
  63.      "value": 590,
  64.  }
  65. ]
  66.  }
  67. },
  68. mounted() {
  69.  this.init()
  70. },
  71. methods: {
  72.  //初始化构建
  73.  init() {
  74.  this.myChart = echarts.init(this.$el, 'macarons')
  75. //  this.myChart = echarts.init(document.getElementById('charts'));
  76.    // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
  77.    this.option = this.getPie3D(this.optionData, 0.85);
  78.    //将配置项设置进去
  79.    this.myChart.setOption(this.option);
  80.    //鼠标移动上去特效效果
  81.    this.bindListen(this.myChart);
  82.  },
  83.  // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
  84.  bindListen(myChart) {
  85.    let that = this;
  86.    let selectedIndex = '';
  87.    let hoveredIndex = '';
  88.    // 监听点击事件，实现选中效果（单选）
  89.    myChart.on('click', function (params) {
  90.      // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
  91.      let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
  92.      let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
  93.      let k = that.option.series[params.seriesIndex].pieStatus.k;
  94.      let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
  95.      let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
  96.      // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
  97.      if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
  98.        that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
  99.            selectedIndex].pieData
  100.            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
  101.            selectedIndex].pieData
  102.            .value);
  103.        that.option.series[selectedIndex].pieStatus.selected = false;
  104.      }
  105.      // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
  106.      that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
  107.          isSelected,
  108.          isHovered, k, that.option.series[params.seriesIndex].pieData.value);
  109.      that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
  110.      // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
  111.      isSelected ? selectedIndex = params.seriesIndex : null;
  112.      // 使用更新后的 option，渲染图表
  113.      myChart.setOption(that.option);
  114.    });
  115.    // 监听 mouseover，近似实现高亮（放大）效果
  116.    myChart.on('mouseover', function (params) {
  117.      // 准备重新渲染扇形所需的参数
  118.      let isSelected;
  119.      let isHovered;
  120.      let startRatio;
  121.      let endRatio;
  122.      let k;
  123.      // 如果触发 mouseover 的扇形当前已高亮，则不做操作
  124.      if (hoveredIndex === params.seriesIndex) {
  125.        return;
  126.        // 否则进行高亮及必要的取消高亮操作
  127.      } else {
  128.        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
  129.        if (hoveredIndex !== '') {
  130.          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
  131.          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
  132.          isHovered = false;
  133.          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
  134.          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
  135.          k = that.option.series[hoveredIndex].pieStatus.k;
  136.          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  137.          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
  138.              isSelected,
  139.              isHovered, k, that.option.series[hoveredIndex].pieData.value);
  140.          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
  141.          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  142.          hoveredIndex = '';
  143.        }
  144.        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
  145.        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
  146.          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  147.          isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
  148.          isHovered = true;
  149.          startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
  150.          endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
  151.          k = that.option.series[params.seriesIndex].pieStatus.k;
  152.          // 对当前点击的扇形，执行高亮操作（对 option 更新）
  153.          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
  154.              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
  155.          that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
  156.          // 记录上次高亮的扇形对应的系列号 seriesIndex
  157.          hoveredIndex = params.seriesIndex;
  158.        }
  159.        // 使用更新后的 option，渲染图表
  160.        myChart.setOption(that.option);
  161.      }
  162.    });
  163.    // 修正取消高亮失败的 bug
  164.    myChart.on('globalout', function () {
  165.      // 准备重新渲染扇形所需的参数
  166.      let isSelected;
  167.      let isHovered;
  168.      let startRatio;
  169.      let endRatio;
  170.      let k;
  171.      if (hoveredIndex !== '') {
  172.        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  173.        isSelected = that.option.series[hoveredIndex].pieStatus.selected;
  174.        isHovered = false;
  175.        k = that.option.series[hoveredIndex].pieStatus.k;
  176.        startRatio = that.option.series[hoveredIndex].pieData.startRatio;
  177.        endRatio = that.option.series[hoveredIndex].pieData.endRatio;
  178.        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  179.        that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
  180.            isSelected,
  181.            isHovered, k, that.option.series[hoveredIndex].pieData.value);
  182.        that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
  183.        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  184.        hoveredIndex = '';
  185.      }
  186.      // 使用更新后的 option，渲染图表
  187.      myChart.setOption(that.option);
  188.    });
  189.  },
  190.  getPie3D(pieData, internalDiameterRatio) {
  191.    let that = this;
  192.    let series = [];
  193.    let sumValue = 0;
  194.    let startValue = 0;
  195.    let endValue = 0;
  196.    let legendData = [];
  197.    let legendBfb = [];
  198.    let k = 1 - internalDiameterRatio;
  199.    pieData.sort((a, b) => {
  200.      return (b.value - a.value);
  201.    });
  202.    // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
  203.    for (let i = 0; i < pieData.length; i++) {
  204.      sumValue += pieData[i].value;
  205.      let seriesItem = {
  206.        //系统名称
  207.        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  208.        type: 'surface',
  209.        //是否为参数曲面（是）
  210.        parametric: true,
  211.        //曲面图网格线（否）上面一根一根的
  212.        wireframe: {
  213.          show: false
  214.        },
  215.        pieData: pieData[i],
  216.        pieStatus: {
  217.          selected: false,
  218.          hovered: false,
  219.          k: k
  220.        },
  221.      };
  222.      //曲面的颜色、不透明度等样式。
  223.      if (typeof pieData[i].itemStyle != 'undefined') {
  224.        let itemStyle = {};
  225.        typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
  226.        typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
  227.        seriesItem.itemStyle = itemStyle;
  228.      }
  229.      series.push(seriesItem);
  230.    }
  231.    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  232.    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  233.    legendData = [];
  234.    legendBfb = [];
  235.    for (let i = 0; i < series.length; i++) {
  236.      endValue = startValue + series[i].pieData.value;
  237.      series[i].pieData.startRatio = startValue / sumValue;
  238.      series[i].pieData.endRatio = endValue / sumValue;
  239.      series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
  240.          false, false, k, series[i].pieData.value);
  241.      startValue = endValue;
  242.      let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
  243.      legendData.push({
  244.        name: series[i].name,
  245.        value: bfb
  246.      });
  247.      legendBfb.push({
  248.        name: series[i].name,
  249.        value: bfb
  250.      });
  251.    }
  252.    //(第二个参数可以设置你这个环形的高低程度)
  253.    let boxHeight = this.getHeight3D(series, 15);//通过传参设定3d饼/环的高度
  254.    // 准备待返回的配置项，把准备好的 legendData、series 传入。
  255.    let option = {
  256.      //图例组件
  257.      legend: {
  258.        data: legendData,
  259.        //图例列表的布局朝向。vertical
  260.        orient: 'horizontal',
  261.        type: 'scroll',
  262.        left: '0%',
  263.        bottom:'5%',
  264.        //图例文字每项之间的间隔
  265.        itemGap: 0,
  266.        textStyle: {
  267.          color: 'black',
  268.          fontSize: '0.5rem',
  269.        },
  270.        show: true,
  271.        icon: "circle",
  272.        //格式化图例文本（我是数值什么显示什么）
  273.        formatter: function (name) {
  274.          var target;
  275.          for (var i = 0, l = pieData.length; i < l; i++) {
  276.            if (pieData[i].name == name) {
  277.              target = pieData[i].value;
  278.            }
  279.          }
  280.          return `${name}: ${target}`;
  281.        },
  282.        // 这个可以显示百分比那种（可以根据你想要的来配置）
  283.          formatter: function(param) {
  284.              let item = legendBfb.filter(item => item.name == param)[0];
  285.              let bfs = that.fomatFloat(item.value * 100, 2) + "%";
  286.              console.log(item.name)
  287.              return `${item.name} :${bfs}`;
  288.          }
  289.      },
  290.      //移动上去提示的文本内容
  291.      tooltip: {
  292.        formatter: params => {
  293.          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
  294.            let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
  295.                100).toFixed(2);
  296.            return `${params.seriesName}<br/>` +
  297.                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
  298.                `${bfb}`;
  299.          }
  300.        }
  301.      },
  302.      //这个可以变形
  303.      xAxis3D: {
  304.        min: -0.8,
  305.        max: 1
  306.      },
  307.      yAxis3D: {
  308.        min: -1,
  309.        max: 1
  310.      },
  311.      zAxis3D: {
  312.        min: -1,
  313.        max: 1
  314.      },
  315.      //此处是修改样式的重点
  316.      grid3D: {
  317.        show: false,
  318.        boxHeight: boxHeight, //圆环的高度
  319.        //这是饼图的位置
  320.        top: '-10%',
  321.        viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
  322.          alpha: 35, //角度(这个很重要 调节角度的)
  323.          distance: 165,//调整视角到主体的距离，类似调整zoom(这是整体大小)
  324.          rotateSensitivity: 1, //设置为0无法旋转
  325.          zoomSensitivity: 0, //设置为0无法缩放
  326.          panSensitivity: 0, //设置为0无法平移
  327.          autoRotate: false //自动旋转
  328.        }
  329.      },
  330.      series: series
  331.    };
  332.    return option;
  333.  },
  334.  getHeight3D(series, height) {
  335.    series.sort((a, b) => {
  336.      return (b.pieData.value - a.pieData.value);
  337.    })
  338.    return height * 25 / series[0].pieData.value;
  339.  },
  340.  getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  341.    // 计算
  342.    let midRatio = (startRatio + endRatio) / 2;
  343.    let startRadian = startRatio * Math.PI * 2;
  344.    let endRadian = endRatio * Math.PI * 2;
  345.    let midRadian = midRatio * Math.PI * 2;
  346.    // 如果只有一个扇形，则不实现选中效果。
  347.    if (startRatio === 0 && endRatio === 1) {
  348.      isSelected = false;
  349.    }
  350.    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  351.    k = typeof k !== 'undefined' ? k : 1 / 3;
  352.    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  353.    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  354.    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  355.    // 计算高亮效果的放大比例（未高亮，则比例为 1）
  356.    let hoverRate = isHovered ? 1.05 : 1;
  357.    // 返回曲面参数方程
  358.    return {
  359.      u: {
  360.        min: -Math.PI,
  361.        max: Math.PI * 3,
  362.        step: Math.PI / 32
  363.      },
  364.      v: {
  365.        min: 0,
  366.        max: Math.PI * 2,
  367.        step: Math.PI / 20
  368.      },
  369.      x: function (u, v) {
  370.        if (u < startRadian) {
  371.          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  372.        }
  373.        if (u > endRadian) {
  374.          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  375.        }
  376.        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  377.      },
  378.      y: function (u, v) {
  379.        if (u < startRadian) {
  380.          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  381.        }
  382.        if (u > endRadian) {
  383.          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  384.        }
  385.        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  386.      },
  387.      z: function (u, v) {
  388.        if (u < -Math.PI * 0.5) {
  389.          return Math.sin(u);
  390.        }
  391.        if (u > Math.PI * 2.5) {
  392.          return Math.sin(u) * h * .1;
  393.        }
  394.        return Math.sin(v) > 0 ? 1 * h * .1 : -1;
  395.      }
  396.    };
  397.  },
  398.  fomatFloat(num, n) {
  399.    var f = parseFloat(num);
  400.    if (isNaN(f)) {
  401.      return false;
  402.    }
  403.    f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
  404.    var s = f.toString();
  405.    var rs = s.indexOf('.');
  406.    //判定如果是整数，增加小数点再补0
  407.    if (rs < 0) {
  408.      rs = s.length;
  409.      s += '.';
  410.    }
  411.    while (s.length <= rs + n) {
  412.      s += '0';
  413.    }
  414.    return s;
  415.  },
  416. },
  417. }
  418. </script>
  419.  
  420. <style>
  421.  
  422.     .chart{
  423.         background-size: 60% 60%;
  424.         /* background:rgba(34,34,34,0.5); */
  425.     }
  426.  
  427.  
  428. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/582610
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号