示例图

1.安装

yarn add @amcharts/amcharts4

2.引入

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

3.完整代码示例

<template>
  <div class="pie-chart">
    <div id="chartdiv"></div>
    <div id="legend"></div>
    <img class="pie-bg" src="@/assets/image/pie_bg.png" alt="" />
    <div class="logo-mask"></div>
  </div>
</template>

<script setup>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { onMounted, onUnmounted, reactive } from "vue";

am4core.useTheme(am4themes_animated);

let pieSeries = null;
const initChart = () => {
  var chart = am4core.create("chartdiv", am4charts.PieChart3D);
  chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

  chart.data = [
    {
      country: "能源环保",
      litres: 500,
      color: am4core.color("#0076FF"),
    },
    {
      country: "信息技术",
      litres: 150,
      color: am4core.color("#11B0FF"),
    },
    {
      country: "先进材料",
      litres: 200,
      color: am4core.color("#16E5EF"),
    },
    {
      country: "制造装备",
      litres: 250,
      color: am4core.color("#56D3B0"),
    },
    {
      country: "生物医药",
      litres: 300,
      color: am4core.color("#F69A06"),
    },
    {
      country: "综合",
      litres: 350,
      color: am4core.color("#D7CC47"),
    },
  ];
  chart.data = chart.data.reverse();
  chart.depth = 180;
  chart.angle = 50;

  pieSeries = chart.series.push(new am4charts.PieSeries3D());

  chart.events.on("ready", function (event) {
    chart.customLegend = document.getElementById("legend");
    const dealLegend = []
    pieSeries.dataItems.each(function (row, i) {
      var color = chart.data[i].color;
      // var percent = Math.round(row.values.value.percent * 100) / 100;
      var value = row.value;
      dealLegend.push(
        '<div class="legend-item" id="legend-item-' +
        i +
        '" onclick="toggleSlice(' +
        i +
        ');" onmouseover="hoverSlice(' +
        i +
        ');" onmouseout="blurSlice(' +
        i +
        ');" style="color: ' +
        color +
        ';"><div class="legend-marker" style="background: ' +
        color +
        '"></div>' +
        '<span class="legend-title">' +
        row.category +
        '<span/>' +
        '<div class="legend-value">' +
        value +
       "<span class='unit'>家</span>" +
        "</div></div>"
      )
    });
    legend.innerHTML = dealLegend.reverse().join('')
  });

  chart.align = "left";
  chart.marginLeft = -10;
  chart.marginTop = 60;
  chart.radius = am4core.percent(96);

  pieSeries.dataFields.value = "litres";
  pieSeries.dataFields.depthValue = "litres";
  pieSeries.dataFields.category = "country";
  pieSeries.slices.template.propertyFields.fill = "color";

  // 图表渐变
  const rgm = new am4core.RadialGradientModifier();
  rgm.brightnesses = [1, 0.5, 0.3, -0.05,-0.2];

  pieSeries.slices.template.fillModifier = rgm;
  pieSeries.slices.template.strokeModifier = rgm;
  pieSeries.slices.template.strokeOpacity = 0.5;
  pieSeries.slices.template.strokeWidth = 0;
  pieSeries.slices.template.fillOpacity = 0.8;
  pieSeries.colors.step = 3;

  pieSeries.ticks.template.disabled = true;
  pieSeries.alignLabels = false;
  pieSeries.labels.template.html = `<span class="pie-label">{value.percent.formatNumber('#.0')}<span class="unit">%</span></span>`;
  pieSeries.labels.template.radius = am4core.percent(-30);

  const hs = pieSeries.slices.template.states.getKey("active");
  hs.properties.scale = 1.1;
  hs.properties.fillOpacity = 1;

};

window.hoverSlice = (item) => {
  var slice = pieSeries.slices.getIndex(item);
  slice.isHover = true;
}

window.toggleSlice = (item) => {
  var slice = pieSeries.dataItems.getIndex(item);
    if (slice.visible) {
      slice.hide();
    } else {
      slice.show();
    }
}

window.blurSlice = (item) => {
  var slice = pieSeries.slices.getIndex(item);
  slice.isHover = false;
}

onMounted(() => {
  initChart();
});
</script>

<style lang="less" scoped>
.pie-chart {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  #chartdiv {
    width: 615px;
    height: 480px;
  }
  .logo-mask {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #051631;
    bottom:0;
  }

  .pie-bg {
    width: 593px;
    height: 275px;
    position: absolute;
    top: 147px;
    left:0;
    z-index: -1;
  }
  :deep(.pie-label) {
    font-family: "DINProBold";
    font-weight: bold;
    font-size: 30px;
    color: #ffffff;
    line-height: 35px;
    .unit {
      font-size: 22px;
    }
  }
  :deep(#legend) {
    padding-left: 68px;
    margin-left: -20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-row-gap: 30px;
    grid-column-gap: 60px;
    .legend-item {
      margin: 10px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      .legend-value {
        font-family: 'DINProBold';
        font-weight: bold;
        font-size: 52px;
        color: #B1E2FF;
        line-height: 67px;
      }
      .legend-title {
        font-family: 'SourceHanSansCNRegular';
        font-weight: 400;
        font-size: 28px;
        color: #B1E2FF;
        line-height: 41px;
      }
      .unit {
        font-size: 24px;
        margin-left: 5px;
      }
      .legend-marker {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
    }
  }
  :deep(#legend .legend-item.disabled .legend-marker) {
    opacity: 0.5;
    background: #ddd;
  }
}
</style>