Vue2和HightCharts

最新推荐文章于 2025-01-09 11:42:15 发布

小晴洛

最新推荐文章于 2025-01-09 11:42:15 发布

阅读量628

点赞数

分类专栏： JavaScript - Vue 文章标签： js vue 3d

本文链接：https://blog.youkuaiyun.com/yuwuTaTa/article/details/113742189

版权

本文介绍了在Vue2项目中如何引入并使用HighCharts进行3D饼图的绘制，包括高度一致和不一致的3D饼图。详细讲解了在Vue组件中引入HighCharts的步骤，以及3D饼图的配置和数据格式调整。虽然对HighCharts的API不甚熟悉，但展示了在实际项目中应用的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做大数据屏幕展示数据，3D图算是一种毕竟有冲击力的展示方式了。所有这次说一说在Vue2项目里如何使用HighCharts

这次主要绘制2种3D饼图
- 高度一致的3D饼图
- 高度不一致的3D饼图

1 Vue引入HighCharts

    npm install highcharts
    npm install vue-highcharts

1.1 在`main.js`中引入

    import highcharts from 'highcharts'
    import VueHighCharts from 'vue-highcharts'
    import highcharts3d from 'highcharts/highcharts-3d'

    // 引入3d组件
    highcharts3d(highcharts)

1.2 在Vue中的基本使用

相关代码：

  <div class="pie" ref="domPie" id="domPie"></div>

  import Highcharts from 'highcharts'

  let optionPie = {
     
      chart: {
     
        type: 'pie', // 饼图
        backgroundColor: 'transparent',
        height: 200,
        animation: false,
        options3d: {
     
          enabled: true,
          alpha: 60,
          beta: 0
        }
      },
      colors: [
        '#336EFF',
        '#5DD28A',
        '#69FCFF',
        '#6536FC'
      ],
      title: {
     
        text: '',
      },
      subtitle: {
     
        text: ''
      },
      credits: {
     
        enabled: false
      },
      plotOptions: {
     
        pie: {
     
          allowPointSelect: true,//每个扇块能否选中
          cursor: 'pointer',//鼠标指针
          depth: 20,//饼图的厚度
          dataLabels: {
     
            enabled: false,//是否显示饼图的线形tip
          }
        }
      },
      series: [
        {
     
          type: 'pie',
          name: '',
          data: data
        }
      ]
  }
    let that = this
    that.$nextTick((