vue+hightCharts---标题居中的圆环图

╰+攻爆jí腚メ 2023-01-20 14:53 104阅读 0赞

## 官网例子在线编辑：[官网案例在线编辑][Link 1] ##

## 先上效果图： ##

![在这里插入图片描述][2021051315291980.gif_pic_center]

## 实现： ##

### 1、安装 ###

cnpm install highcharts-vue --save

### 2、全局注册--------main.js ###

import HighchartsVue from 'highcharts-vue'
    Vue.use(HighchartsVue)

### 3、使用 ###

<highcharts :options="pieOption" :callback="pieCallback" />
    
    pieCallback(c) { 
          this.callbackC = c
          setTimeout(() => { 
            const centerY = c.series[0].center[1]
            const titleHeight = parseInt(c.title.styles.fontSize)
            const percentage = c.series[0].data[2] ? c.series[0].data[2].percentage : 0
            c.setTitle({ 
              y: centerY + titleHeight / 2 - 40,
              text: '<div style="width: 200px;text-align: center"><p style="margin: 0;font-size: 32px">' + percentage.toFixed(2) + '%</p><p style="margin: 0">健康</p></div>',
              useHTML: true
            })
          }, 2500)
    }
    
    
    参考option：
    	  pieOption: { 
            chart: { 
              type: 'pie',
              backgroundColor: 'transparent',
              color: '#fff',
              marginTop: 20,
              marginBottom: 50,
              marginLeft: 0,
              marginRight: 0
            },
            title: { 
              text: '',
              align: 'center',
              floating: true
            },
            credits: { 
              enabled: false// 隐藏右下角水印
            },
            subtitle: { 
              text: null
            },
    
            plotOptions: { 
              pie: { 
                colors: ['#1EBD98', '#DD5252', '#fbbb3f', '#9dacc3', '#a29a9a'],
                borderColor: 'transparent',
                dataLabels: { 
                  // 环形图内部展示
                  enabled: false // 是否显示支出去的label标签
                },
                cursor: 'pointer',
                showInLegend: true,
                point: { 
                  events: { 
                    mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                      const chart = this.series.chart
                      chart.setTitle({ 
                        text: '<div style="width: 200px;text-align: center"><p style="margin: 0;font-size: 32px">' + this.percentage.toFixed(2) + '%</p><p style="margin: 0">' + this.name + '</p></div>'
                      })
                    }
                  }
                }
              }
            },
            legend: { 
              enabled: true,
              layout: 'horizontal',
              align: 'center',
              verticalAlign: 'bottom',
              padding: 0,
              labelFormatter: function() { 
                return `${ this.name}`
              },
              itemStyle: { 
                fontSize: 16
              }
            },
            tooltip: { 
              headerFormat: '',
              pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}：</b>' + '<b>{point.y}台</b>'
            },
            series: [
              { 
                innerSize: '70%',
                zMin: 0,
                data: []
              }
            ]
          }

### 4、更改图表宽高 ###

高度：
    /deep/.highcharts-container{ 
        height: 350px!important;
        svg{ 
          height: 350px!important;
        }
      }
    宽度：根据父容器自适应

[Link 1]: https://jshare.com.cn/demos/CVSLGr
[2021051315291980.gif_pic_center]: /images/20221021/236d932592e6432b976f4c0cf7d19038.png