1、通过npm下载

npm install highcharts --save

2、在main.js中引入

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)

3、使用 话不多说 上代码

效果图

设置id

<template>
      <div id="container"></div>
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, reactive, ref } from "vue"
import Highcharts from "highcharts" //必须引入
let myChart: any
let colorList = ["#FFEC8B", "#32CD32", "#4DD5BF", "#F9C626", "#917CFF", "#68C0E5", "#517BDC", "#EFB554", "#70E8B0", "#ACC752", "#9C7DBF", "#CB62B2", "#D68D8B", "#56B7A9", "#DECD60"]

onMounted(() => {
  // getData()
  getEcharts()
})

onUnmounted(() => {
  // 销毁操作
  if (myChart) {
    myChart.dispose()
  }
})
// echarts
const getEcharts = () => {
  let colors = ["rgba(36, 154, 163, 0.6)", "rgba(0, 255, 0,0.6)", "rgba(255, 0, 255,0.6)", "#FFEC8B", "#32CD32", "#4DD5BF", "#F9C626", "#917CFF"]
  Highcharts.setOptions({
    colors: colors
  })
  Highcharts.chart(
    "container", //对应的id
    {
      chart: {
        type: "pie", //饼图
        options3d: {
          enabled: true, //使用3d功能
          alpha: 45, //延y轴向内的倾斜角度
          beta: 0
        },
        backgroundColor: "rgba(0, 0, 0, 0)", // 不显示背景色
        // width: 270,
        // height: 300,   //设置大小是为了饼图能在想要的区域中显示
      },
      title: {
        text: "16640(亩)", //图表的标题文字
        style: {
          textOutline: "none",        //去掉文字白边
          fontSize: "30",
          fontFamily: "Arial",
          fontWeight: "bold",
          color: "#118DE3",
        },
      },
      subtitle: {
        text: "高标准农田面积", //副标题文字
        style: {
          textOutline: "none",        //去掉文字白边
          fontSize: "18",
          fontFamily: "Microsoft YaHei",
          fontWeight: "400",
          color: "#FFFFFF",
        },
      },
      tooltip: {
        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
      },
      plotOptions: {
        pie: {
          allowPointSelect: true, //每个扇块能否选中
          cursor: "pointer",  //鼠标指针
          depth: 35, //饼图的厚度
          point: {
              events: {
                mouseOver: function (e) {
                  // 鼠标滑过时动态更新标题
                  chart.setTitle({
                    text: e.target.name + '\t' + e.target.y + ' %'
                  })
                }
              }
            },
          dataLabels: {
            enabled: true,  //是否显示饼图的线形tip
            distance: 10, //设置引导线的长度 饼图的大小
            color: "#FFF", //全局设置字体颜色
            style: {
              textOutline: "none",        //去掉文字白边
              fontSize: "12"
            },
            // format: "{point.name}"
            formatter: function () {
              return (
                this.point.name + this.y + "%"
              )
            }
          }
        }
      },
      credits: {
        enabled: false    //禁用版权url    此处不设置
      },
      series: [{
        type: "pie",
        name: "浏览器占比",
        data: [
          ["Firefox", 45.0],
          ["IE", 26.8],
          {
            name: "Chrome",
            y: 12.8,
            sliced: true,
            selected: true
          },
          ["Safari", 8.5],
          ["Opera", 6.2],
          ["Others", 0.7]
        ]
      }]
    },
    function (c) {
      // 图表初始化完毕后的回调函数
      // 环形图圆心
      var centerY = c.series[0].center[1],
        titleHeight = parseInt(c.title.styles.fontSize)
      // 动态设置标题位置
      c.setTitle({
        y: centerY + titleHeight / 2
      })
    }
  )
}


</script>