vue highcharts 实现3d圆环并解决上下颠倒问题

项目场景：3d圆环 highcharts@10.3.2

1、效果图

---

问题描述

1、在 main.js 中引入

2、新建个echats.vue

<template>
  <div class="charts">
    <div id="echart-container"></div>
  </div>
</template>

<script>
import HighCharts from "highcharts";
export default {
  components: {},
  data() {
    return {
      id: "echart-container",
      optionData: [
        { name: "个人网银", y: 520, h: 40 }, //模块名和所占比，也可以{name: '测试1',y: 12}
        { name: "个人手机银行", y: 140, h: 11 }, //模块名和所占比，也可以{name: '测试1',y: 12}
        { name: "企业网银", y: 1, h: 17 }, //模块名和所占比，也可以{name: '测试1',y: 12}
        { name: "企业手机银行", y: 350, h: 28 }, //模块名和所占比，也可以{name: '测试1',y: 12}
      ],
      // optionData: [
      //   { name: "个人网银", y: 1, h: 25 }, //模块名和所占比，也可以{name: '测试1',y: 12}
      //   { name: "个人手机银行", y: 1, h: 25 }, //模块名和所占比，也可以{name: '测试1',y: 12}
      //   { name: "企业网银", y: 1, h: 25 }, //模块名和所占比，也可以{name: '测试1',y: 12}
      //   { name: "企业手机银行", y: 1, h: 25 }, //模块名和所占比，也可以{name: '测试1',y: 12}
      // ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 修改3d饼图绘制过程
      let each = HighCharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      HighCharts.wrap(
        HighCharts.seriesTypes.pie.prototype,
        "translate",
        function (proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
            return;
          }
          console.log("this.chart.is3d", this.chart.is3d);
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          console.log("@@@!", this);
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function (point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
            };
          });
        }
      );
      (function (H) {
        H.wrap(
          HighCharts.SVGRenderer.prototype,
          "arc3dPath",
          function (proceed) {
            // Run original proceed method
            var ret = proceed.apply(this, [].slice.call(arguments, 1));
            ret.zTop = (ret.zOut + 1) / 100;
            return ret;
          }
        );
      })(HighCharts);

      //日总存煤量
      let mychart = HighCharts.chart("echart-container", {
        chart: {
          type: "pie",
          backgroundColor: "transparent",
          events: {
            load: function () {
              let each = HighCharts.each,
                points = this.series[0].points;
              each(points, function (p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
                });
              });
            },
          },
          options3d: {
            enabled: true,
            alpha: 65,
          },
        },
        title: {
          text: "",
        },
        legend: {
          //图例
          layout: "horizontal",
          verticalAlign: "bottom",
          align: "center",
          y: 15,
          x: 0,
          useHTML: true,
          symbolWidth: 10,
          symbolHeight: 10,
          labelFormatter: function () {
            return this.name;
          },
          itemStyle: {
            color: "black",
            fontSize: "14px",
          },
        },
        tooltip: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          pie: {
            // dataLabels: {
            //   enabled: false,
            // },
            allowPointSelect: false,
            center: ["50%", "68%"],
            size: 250,
            innerSize: 140,
            colors: [
              "#21B1C4",
              "#7343D1",
              "#28A429",
              "#C6B031",
              "#9B2020",
              "#2862D7",
            ],
          },
          // series: {
          //   events: {
          //     //控制图标的图例legend不允许切换

          //     // eslint-disable-next-line
          //     legendItemClick: function (event) {
          //       console.log("@", 1111);
          //       return false; //return  true 则表示允许切换
          //     },
          //   },
          // },
          series: {
            events: {
              legendItemClick: function () {
                return false;
              },
            },
          },
        },
        series: [
          {
            name: "青磁窑矿",
            data: this.optionData,
            showInLegend: true,
            dataLabels: {
              padding: -10,
              shadow: true,
              style: {
                fontWeight: "bold",
                fontSize: "14px",
                color: "#fff",
                textOutline: "1px 1px transparent",
              },
              formatter: function () {
                return (
                  `<p style="color:#00afff">${this.key} : </p>` +
                  '<p style="color:#00afff">' +
                  ((this.y / this.total) * 100).toFixed(2) +
                  "%</p>"
                );
              },
            },
          },
        ],
      });
      // 解决圆环高度上下颠倒问题 ！！！！
      HighCharts.addEvent(mychart, "redraw", function () {
        var each = HighCharts.each,
          points = mychart.series[0].points;
        each(points, function (p) {
          p.graphic.attr({
            translateY: -p.shapeArgs.ran,
          });
          p.graphic.side1.attr({
            translateY: -p.shapeArgs.ran,
          });
          p.graphic.side2.attr({
            translateY: -p.shapeArgs.ran,
          });
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.charts {
  height: 50%;
  width: 50%;
  #echart-container {
    width: 100%;
    height: 100%;
  }
}
</style>

3、直接引用组件

---