HighChart 3d饼图

HighChar 引入

npm install heightchart --save

在项目script中引入

import { getWeather } from "@/api/lclApi/lclapi";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

<div id="pie" ></div>

• 别忘记定义图表宽高 否则会报#13错误

//highchart3d
    highchart3d() {
      var echartData = [
        { name: "离线", value: 1 },
        { name: "在线", value: 3 },
      ];
      var chart = Highcharts.chart("pie", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",//背景色
          options3d: {
            enabled: true,
            alpha: 60, //x轴反转角度
            beta: 0, //倾斜角度
          },
        },
        colors: [
          //扇形颜色
          "#00A8FF",
          "#00D7E9",
          "#5f75e5",
          "#67acfe",
          "#5f75e5",
          "#7ca2ff",
          "#4bcdec",
          "#6648ff",
          "#5f75e5",
          "#5a9be7",
        ],
        title: {
          text: "",
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",//扇形图内部文字
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 25, //饼高度
            dataLabels: {// label属性
              enabled: true,
              // format: "{point.name}: <b>{point.percentage:.1f}%</b>",
              formatter: function () {//label 显示的文字
                console.log(this.point, "params3d");
                return `${this.point.options.name}：${this.point.options.y}个`;
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "在线率",
            data: [
              ["在线", 4],
              ["离线", 1],
            ],
          },
        ],
      });
    },