vue实现3d饼图-Highcharts

最新推荐文章于 2025-10-28 16:08:29 发布

原创最新推荐文章于 2025-10-28 16:08:29 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #3d #echarts

这篇博客介绍了如何在Vue项目中利用Highcharts库创建3D饼图。首先通过npm安装highcharts和highcharts-3d，然后在main.js中引入并启用3D功能。接着，创建一个Vue组件来承载图表，并在watch中动态更新图表。最后，展示了如何设置选项以生成带有数据标签的3D饼图，并提供了示例代码。

因为目前就以本人的知识储量，echarts实现3d图相当有难度，所以使用Highcharts实现，在网上看了一些，记录一下流程。Highcharts文档：https://www.highcharts.com.cn/docs/install-from-npm

1、安装

npm install highcharts --save

main.js
引用highcharts3d，才会使图表变成3d

import HighchartsVue from 'highcharts-vue'
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
Vue.use(HighchartsVue)
highcharts3d(highcharts)

2、使用

1）、创建一个vue组件容器（也可以按照文档上的来）

<template>
  <div :id="id" :option="option"> </div>
</template>
<script>
  import HighCharts from 'highcharts'
  export default {
    props: {
      id: {
        type: String
      },
      //option 是图表的配置数据
      option: {
        type: Object
      }
    },
    watch:{
      option(){
        HighCharts.chart(this.id, this.option)
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  /* 容器 */
  .container {
    width: 100%;
    height: 100%;
  }
</style>

2）、使用

html:

  <echart style="
		  width: 6.88rem; 
		  height: calc(50.3vh - 0.41rem)" 
		  :id="'chart1'" :option="option">
	</echart>

js:

 data() {
    return {
      option: {},
    };
  },
  methods:{
   getcsda() {
      let message = [
        {
          //模块名和所占比，也可以{name: '测试1',y: 12}
          name: "测试1",
          y: 30,
          sliced: true,
          selected: true,
        },
        {
          name: "测试2",
          y: 23,
        },
        {
          name: "测试3",
          y: 19,
        },
        {
          name: "测试4",
          y: 29,
        },
      ];
      this.option = {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        credits: {
          enabled: false,
        },
        title: {
          text: "", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        colors: ["#FF6A66", "#34B862", "#F5A623", "#738EFF"],
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 60, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              useHTML: true, //使用formatter内的标签和样式
              distance: 50,
              formatter: function () {
                //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                return (
                  '<p style="font-size: 0.36rem;margin-top: -0.3rem ;font-family: DINCondensed, DINCondensed-Bold;font-weight: 700;color: ' +
                  this.point.color +
                  '">' +
                  this.percentage.toFixed(1) +
                  "%</p></div>" +
                  '<div><p style="font-size: 0.16rem;font-weight: 500;font-family: PingFangSC, PingFangSC-Medium;color: rgba(0,0,0,0.50);">' +
                  this.point.name +
                  "</p>"
                );
              },
            },
            slicedOffset: 40,
          },
        },
        series: [
          {
            type: "pie",
            name: "处室档案统计", //统一的前置词,非必须
            data: message,
          },
        ],
      };
    },
  }