Vue中用Highcharts制作3D环形图

1.首先在需要用到的页面引入Highcharts

import * as Highcharts from 'highcharts'

2.html中写一个容器并设置大小

 <div id="container" class="container-left"></div>

 .container-left{
                width: 50%;
                height: 100%;
            }

3.js部分

 initCharts() {
      //数据格式
      // let dataSource = this.initData.hyfb[0].total
      let that = this;
      let colorList = ["#89651f", "#c8474a", "#5d8cdc", "#07c563", "#c4cd46"];
      Highcharts.chart("container", {
        colors: that.chartsColors,
        chart: {
          renderTo: "graph",
          defaultSeriesType: "line",
          zoomType: "x",
          margin: [0, 0, 0, 0],
          type: "pie",
          backgroundColor: null,
          color: "#fff",
          options3d: {
            enabled: true,
            alpha: 50,
            // alpha: this.getFontSize(30),
          },
        },
        title: {
          text: '人数',
          align: "center",
          floating: true,
        },
        //图例
        legend: {
          show: true,
          align: "center",
          verticalAlign: "top",
          // y:40,
          padding: 5,
          itemMarginTop: 40,
          itemDistance: 40,
          itemStyle: {
            color: "#fff",
          },
          // labelFormatter: function() {
          //   return `${this.name}\xa0\xa0\xa0${this.y}台`;
          // }
        },
        tooltip: {
          enabled: true,
          // shared: true, //是否共享提示，也就是X一样的所有点都显示出来
          useHTML: true, //是否使用HTML编辑提示信息
          // headerFormat: '<small>{point.key}</small><table>',
          backgroundColor: " rgb(2, 82, 114,0.5)",
          borderWidth: 0,
          // 是否显示提示的下降阴影
          shadow: false,
          borderRadius: that.getFontSize(20),
          style: {
            // 文字内容相关样式
            color: "white",
            textAlign: "center",
          },
          formatter: function (series) {
            // console.log(this.y);
            // console.log(series);
            // this.num=this.y
            // console.log(this.num);
            let res = `<div style="text-align:center;padding:3px;font-size:${that.getFontSize(
              28
            )}px;">
            <div style="margin-top:5px;">
              <span style="border-bottom:1px solid #ffffff;font-family: 'pfm';">${
              this.key
            }</span>
            <span style="font-family: 'pfm';">:&nbsp; ${this.y.toFixed(1)}%</span>
              </div>
            </div>`;
            return res;
          },
        },
        subtitle: {
          text: "",
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            innerSize: this.getFontSize(260),
            size: this.getFontSize(340),
            depth: this.getFontSize(80),
            // showInLegend: true,
          },
        },
        series: [
          {
            type: "pie",
            name: "货物金额",
            label: {
              show: false,
            },
            dataLabels: {
              enabled: true,
              connectorWidth: 0,
              distance: this.getFontSize(-8),
              padding: this.getFontSize(24),
              formatter: function () {
                // console.log(this.point.y);
                if (this.point.y) {
                  // console.log(5555);
                  return `<span style="color:#fff;font-size:${that.getFontSize(
                    34
                  )};font-weight:100;font-family:'DINA';">${
                    this.point.y
                  }%</span>`;
                }
              },
              style: {
                textOutline: "none",
                fontFamily: "DINA",
              },
            },
            data: [
                  ['香蕉', 8],
                  ['猕猴桃', 3],
                  ['桃子', 1],
                  ['橘子', 6],
                  ['苹果', 8],
                  ['梨', 4],
                  ['柑橘', 4],
                  ['橙子', 1],
                  ['葡萄 (串)', 1]
                ],
            selected:false,
            events:{
              click:function(e){
                that.pieClick(e.point.options,e.point)
              } ,
              // select:function(e){
              //   console.log('选择',e);
              // }
            }
          },
        ],
      });
    },