1 <template>
2 <div :id="id" class="bar_canvas" style="z-index: 10" />
3 </template>
4
5 <script>
6 // 如果提示缺少依赖，在package.json增加"highcharts": "^9.1.2"，重新install一下就可以
7 import Highcharts from 'highcharts/highstock'
8 import HighchartsMore from 'highcharts/highcharts-more'
9 import HighchartsDrilldown from 'highcharts/modules/drilldown'
10 import Highcharts3D from 'highcharts/highcharts-3d'
11
12 HighchartsMore(Highcharts)
13 HighchartsDrilldown(Highcharts)
14 Highcharts3D(Highcharts)
15 export default {
16 props: ['id'],
17 data() {
18 return {
19 chart: null,
20 propData: {
21 chart: {
22 backgroundColor: '#fff',
23 type: 'pie',
24 options3d: {
25 enabled: true,
26 alpha: 50
27 }
28 },
29 title: {
30 text: ''
31 },
32 credits: {
33 enabled: false //不显示
34 },
35 subtitle: {
36 text: ''
37 },
38 plotOptions: {
39 pie: {
40 innerSize: 220,
41 depth: 45,//厚度
42 size: 310, // 大小
43 showInLegend: true,
44 selected: true, // 选中项
45 sliced: true,
46 center: ['32%', '46%'],
47 dataLabels: {
48 enabled: false,
49 color: '#fff',
50 format:
51 '<b style="font-weight: normal;font-size: 14px;">{point.name}</b>:<br/><span style="font-weight: normal;color: {point.color};font-size: 14px;"> {point.y}个 {point.percentage:.1f}% </span>',
52 // style: {
53 // color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
54 // },
55 connectorColor: 'rgba(255, 255, 255, 0.3)',
56 distance: 30 // 控制饼图外面的线的长短,为负数时文本内容在饼图内部
57 },
58 slicedOffset: 20, // 突出间距
59 point: {
60 events: {
61 mouseOver: function() {
62 this.slice()
63 },
64 mouseOut: function() {
65 this.slice()
66 },
67 click: function() {
68 return false
69 }
70 }
71 }
72 }
73 },
74 tooltip: {
75 enabled: true,
76 borderColor: '#fff',
77 color: '#606266',
78 headerFormat: '<span></span>',
79 pointFormat:
80 '<span>{point.name}：</span><b>{point.percentage:.2f}%</b>'
81 },
82 colors: [
83 'rgba(38, 142, 246,0.8)',
84 'rgba(253, 177, 70,0.8)'
85 ],
86 // 顶部
87 legend: {
88 accessibility: {
89 enabled: false,
90 keyboardNavigation: {
91 enabled: true
92 }
93 },
94 credits: {
95 enabled: false // 不显示LOGO
96 },
97 enabled: false,
98 layout: 'horizontal',
99 verticalAlign: 'bottom', // 纵向的位置
100 align: 'center',
101 // symbolWidth: 8,
102 y: 15,
103 itemWidth: 0,
104 itemDistance: 0,
105 itemStyle: {
106 color: '#fff',
107 fontWeight: 'normal'
108 },
109 navigation: {
110 enabled: false
111 }
112 },
113 series: [
114 {
115 type: 'pie',
116 name: '指标数',
117 cursor: 'pointer',
118 data: [
119 {
120 name: '成果规范性审查',
121 y: 5921,
122 h: 20,
123 bfb: 0
124 },
125 {
126 name: '成果技术性审查',
127 y: 921,
128 h: 100,
129 bfb: 0
130 }
131 /* ['创新', 10],
132 ['协调', 3] */
133 ]
134 }
135 ]
136 }
137 }
138 },
139 watch: {
140 propData: {
141 handler(newV, oldV) {
142 if (this.id) {
143 this.chart = new Highcharts.Chart(this.id, this.propData)
144 }
145 },
146 deep: true
147 }
148 },
149 mounted() {
150 setTimeout(() => {
151 if (this.id) {
152 this.chart = new Highcharts.Chart(this.id, this.propData)
153 }
154 })
155 },
156 methods: {
157 refresh() {
158 this.chart.redraw(false)
159 }
160 }
161 }
162 </script>
163
164 <style lang="scss" scoped>
165 .bar_canvas {
166 width: 100%;
167 height: 100%;
168 }
169 /deep/ .highcharts-container {
170 z-index: 10 !important;
171 }
172 </style>
