highcharts 实现3d饼图

1
2
3
npm install vue-highcharts --save
npm install highcharts --save

1
2
3
4
5
6
7
8
9
10
import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

Vue.use(VueHighCharts)

highcharts3d(highcharts)

1
2
import HighCharts from "highcharts";

1
2
3
4
 <div class="pie-wrap" id="pie">
      <div :id="id"></div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
        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
              }
            ]
          }]
        }

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