highCharts 饼图中间添加自定义文本

比眉伴天荒 2022-11-06 12:49 352阅读 0赞

## 效果图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

## 实现方法： ##

### 参考官网：[标题居中的环形图][Link 1] ###

把 title 放在圆环中间，具体代码如下，具体数据请根据实际情况赋值：

### 1、vue中引入highCharts：[官网教程][Link 2] ###

### 2、 ###

data:
    	pieOption: { 
              chart: { 
                type: 'pie',
                backgroundColor: 'transparent',
                color: '#fff',
              },
              title: { 
                text: '',
                align:'center',
                floating:true
              },
              credits: { 
                enabled: false//隐藏右下角水印
              },
              subtitle: { 
                text: null
              },
    
              plotOptions: { 
                pie: { 
                  colors: [ '#29b00f','#c3c3c3','#ee9e45','#ff0000'],
                  borderColor: 'transparent',
                  dataLabels: { 
                    // 环形图内部展示
                    // enabled: false
                  },
                  cursor: 'pointer',
                  showInLegend: true,
                  point: { 
                    events: { 
                      mouseOver: function(e) {   // 鼠标滑过时动态更新标题
                        // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                        console.log(this)
                        let chart = this.series.chart
                        chart.setTitle({ 
                          text:this.name+ '\t'+ this.percentage + ' %'
                        });
                      }
                    }
                  }
                }
              },
              legend: { 
                align: 'center',
                verticalAlign: 'bottom',
                padding: 0,
                itemDistance: 30,
                lineHeight: 140,
                labelFormatter: function() { 
                  return `${ this.name}\xa0\xa0\xa0${ this.y}台`;
                }
              },
              tooltip: { 
                headerFormat: '',
                pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}：</b>' + '<b>{point.y}台</b>'
              },
              series: [
                { 
                  innerSize: '70%',
                  zMin: 0,
                  data: [{ name:'正常',y:1},{ name:'不在线',y:2},{ name:'预警',y:0},{ name:'故障',y:5}]
                }
              ]
            }

methods:
    	pieCallback(c){ 
    		这里使用了定时器延迟1S，是因为c.series[0].data获取的值可能为[]，延迟一秒确保得到准确的data
            setTimeout(()=>{ 
              console.log('饼图回调函数', c.series[0].data)
              let centerY = c.series[0].center[1],
                  titleHeight = parseInt(c.title.styles.fontSize);
              c.setTitle({ 
                y:centerY + titleHeight/2-10,
                text:'<div><p style="margin: 0">正常 '+c.series[0].data[0].percentage+'%</p></div>',
                useHTML:true
              });
            },1000)
          }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221023/2f9c5b5e41404dd7a19f215f9302b756.png
[Link 1]: https://www.highcharts.com.cn/demo/highcharts/pie-donut-center-title
[Link 2]: https://www.highcharts.com.cn/docs/highcharts-vue