环体

 

 

  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>

 

posted @ 2023-03-14 20:45  进击中的前端攻城狮  阅读(68)  评论(0)    收藏  举报