highcharts 实现3d饼图

1、下载

npm install vue-highcharts --save
npm install highcharts --save

2、main.js中

import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

Vue.use(VueHighCharts)

highcharts3d(highcharts)

3、3d饼图组件中

import HighCharts from "highcharts";

4、html部分

 <div class="pie-wrap" id="pie">
      <div :id="id"></div>
    </div>

5、js中data部分

        id: "test",
        option: {
          chart: {
            type: "pie",
            options3d: {
              enabled: true,
              alpha: 68,
              beta: 0
            },
            backgroundColor: "rgba(1,1,1,0)"
          },
          credits: {
            //关闭版权信息的标签
            enabled: false
          },
          title: {
            text: "xx图",
            align: "left",
            x: 30,
            y: 30,
            style: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: 16
            }
          },
          tooltip: {
            enabled: false
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              depth: 100,
              dataLabels: {
                enabled: true,
                distance: 30,
                connectorWidth: '3',
   				format: "<b>{point.name}</b>:<br/> {point.percentage:.1f} %",
                style: {
                  fontSize: "10px",
                  fontWeight: "400",
                  color: "#fff",
                  textOutline: "none"
                }
              },
              states: {
                halo: {
                  pacity: 1
                }
              },
              borderWidth: 0.5,
              center: ["50%", "25%"]
            }
          },
          series: [{
            type: "pie",
            name: "namexxxx",
            zIndex: 1,
            size: '50%',
            data: [{
                name: "aa",
                color: "#3399ff",
                y: 46
              },

              {
                name: "bb",
                color: "#ffcc66",
                y: 24
              },
              {
                name: "cc",
                color: "#ff9966",
                y: 26
              },

              {
                name: "dd",
                color: "#00ccff",
                y: 12
              }
            ]
          }]
        }

6、mounted部分

  HighCharts.chart(this.id, this.option);

7、所有的颜色、高度、尺寸都可以自己配置
https://www.highcharts.com.cn/docs/highcharts-vue，和echarts大同小异
8、目前只是简单的3d饼图，可以要做出来高度差，参考https://jshare.com.cn/jianshu/NZSA7x

最后

以上就是尊敬中心为你收集整理的highcharts 实现3d饼图的全部内容，希望文章能够帮你解决highcharts 实现3d饼图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。