vue引入highCharts 3d饼图

安装

npm install highcharts --save

配置

main.js

import highcharts from 'highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

在组件中使用

import HighCharts from 'highcharts'

init3dPieChart() {
      Highcharts.chart("cotrun-3dpieChart", {
        chart: {
          backgroundColor: "transparent",
          // marginRight:300,
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 65,
          },
        },
        title: {
          text: "",
        },
        plotOptions: {
          pie: {
            innerSize: 120,
            depth: 30,
            dataLabels: {
              enabled: false,
            },
          },
        },
        series: [
          {
            name: "数量",
            data: [
              { name: "第一产业", y: 18 },
              { name: "第二产业", y: 8 },
              { name: "第三产业", y: 28 },
            ],
            colors: ["#2EC4F5", "#1DB386", "#F5EF80"],
          },
        ],
      });
      // 隐藏水印(highCharts图表默认在下方有个链接水印)
      let dom1 = document.querySelector('.pieChart-box .highcharts-credits')
      dom1.style.display = 'none';
    },