【echarts】24、highchart+vue2 - 3D饼图

前言

基于highchart5.x和vue2实现
记录以便日后查阅
1
2

实现效果

代码实现

注意：安装依赖 yarn add hightcharts@5 -S

<template>
  <div class="chart-wrap">
    <div id="chart20" class="chart" />
  div>
template>

<script>
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'
import Highmaps from 'highcharts/modules/map'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)
Highmaps(Highcharts)

export default {
  name: 'Index',
  data () {
    return {
      chart: null,
      data: [
        { name: '规上企业', value: 26},
        { name: '规下/小微企业', value: 150 }
      ]
    }
  },
  mounted() {
    this.createChartHandler()
  },
  methods: {
    // 创建图表
    createChartHandler () {
      const options = this.getChartOption(this.data)
      this.chart && this.chart.destroy()
      this.chart = new Highcharts.Chart('chart20', options)
    },
    // 获取图表配置项
    getChartOption (pieData) {
      const data = [
        {
          name: '规上企业',
          y: 13,
          color: '#00D7E9',
          sliced: true,
          selected: true
        },
        {
          name: '规下/小微企业',
          y: 8,
          color: '#1FB5FF'
        }
      ]
      data.forEach(item => {
        const temp = pieData.filter(elm => elm.name === item.name)
        item.y = temp[0].value
      })
      return {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true,
            alpha: 65,
            beta: 0
          }
        },
        title: {
          text: null
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: '{point.y}'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 20,
            size: 160,
            distance: 1,
            zIndex: 1
          }
        },
        series: [{
          type: 'pie',
          name: '企业占比',
          data: data,
          dataLabels: {
            style: {
              'color': '#ffffff',
              'fontSize': '14px',
              'fontWeight': 'normal',
              'textOutline': 'none'
            },
            useHTML: true
          }
        }]
      }
    }
  }
}
script>

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107