hightcharts引入3d模块报错问题解决

最新推荐文章于 2025-03-27 06:12:35 发布

Axlxhxx

最新推荐文章于 2025-03-27 06:12:35 发布

阅读量251

点赞数 2

文章标签： javascript vue.js hightcharts

本文链接：https://blog.youkuaiyun.com/creatlh/article/details/146340562

版权

失败例子：

import Highcharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'

Highcharts3d(Highcharts) //Highcharts3d  is not a function

在这里插入图片描述
成功例子：

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

<script setup lang="ts">
import { onMounted } from 'vue'

import * as Highcharts from 'highcharts'
import 'highcharts/highcharts-3d'

onMounted(() => {
  Highcharts.chart('container', {
    chart: {
      type: 'pie',
      options3d: {
        deep: 90,
        enabled: true,
        alpha: 45,
        beta: 0
      }
    },
    title: {
      text: 'Global smartphone shipments market share, Q1 2022'
    },
    subtitle: {
      text:
        'Source: ' + '<a href="https://www.counterpointresearch.com/global-smartphone-share/"' + 'target="_blank">Counterpoint Research</a>'
    },
    accessibility: {
      point: {
        valueSuffix: '%'
      }
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        }
      }
    },
    series: [
      {
        type: 'pie',
        name: 'Share',
        data: [
          ['Samsung', 23],
          ['Apple', 18],
          {
            name: 'Xiaomi',
            y: 12,
            sliced: true,
            selected: true
          },
          ['Oppo*', 9],
          ['Vivo', 8],
          ['Others', 30]
        ]
      }
    ]
  })
})
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>