| echarts实现环状图显示总数，并在hover时显示自定义数据 | 您所在的位置：网站首页 › 环形图中间怎么加入文字 › echarts实现环状图显示总数，并在hover时显示自定义数据 |
echarts实现环状图显示总数，并在hover时显示自定义数据
|
实现饼图中间显示总数功能，版本：“echarts”: “^4.2.1”
在网上看到了几个前辈给出的饼图显示总数的实现方法，本方法采用了title来显示总数，但出现了高亮不显示内容的bug，具体情况如下 代码部分 InitroundPie () { this.chart = echarts.init(this.$refs[this.bindRef]) let _data = [ // 当前写死 { value: 120, name: '在线' }, { value: 120, name: '离线' }, { value: 160, name: '未激活' } ] let options = { title: { show: true, text: '全部', // 当前写死 subtext: '400', // 当前写死 top: 95, left: 115, textAlign: 'center', textStyle: { fontSize: '14', fontWeight: 'bold' }, subtextStyle: { fontSize: '20', fontWeight: 'bold' } }, tooltip: { show: false, trigger: 'item', formatter: '{a} {b}: {c} ({d}%)' }, legend: { orient: 'vertical', x: 'right', data: ['在线', '离线', '未激活'], selectedMode: false, top: 40, formatter: function (name) { let legenTile = name + ': ' for (let item of _data) { if (name === item.name) legenTile += item.value } return legenTile } }, series: [ { name: 'from', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, textAlign: 'center', center: [120, 120], label: { normal: { show: false, position: 'center', formatter: '{b}\n{c}', align: 'center', verticalAlign: 'middle' }, emphasis: { show: true, textStyle: { fontSize: '20', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: _data } ] } this.chart.setOption(options) this.chart.on('mouseover', { seriesName: 'from' }, () => { this.chart.setOption({ title: { show: false } }) }) this.chart.on('mouseout', { seriesName: 'from' }, () => { this.chart.setOption({ title: { show: true } }) }) },方法逻辑：在鼠标移入时隐藏title,移出时显示title，此方法实现效果如下： 代码如下： InitroundPie () { this.chart = echarts.init(this.$refs[this.bindRef]) let _data = [ { value: 120, name: '在线' }, { value: 120, name: '离线' }, { value: 160, name: '未激活' } ] let options = { title: { show: true, text: '全部', subtext: '400', top: 95, left: 115, textAlign: 'center', z: 0, textStyle: { fontSize: '14', fontWeight: 'bold' }, subtextStyle: { fontSize: '20', fontWeight: 'bold' } }, tooltip: { show: false, trigger: 'item', alwaysShowContent: true, formatter: '{a} {b}: {c} ({d}%)' }, legend: { orient: 'vertical', x: 'right', data: ['在线', '离线', '未激活'], selectedMode: false, top: 40, formatter: function (name) { let legenTile = name + ': ' for (let item of _data) { if (name === item.name) legenTile += item.value } return legenTile } }, series: [ { name: 'from', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, textAlign: 'center', center: [120, 120], label: { normal: { // 此处重点，设置为显示 show: true, position: 'center', formatter: '{b}\n{c}', align: 'center', verticalAlign: 'middle', // 此处重点，字体大小设置为0 textStyle: { fontSize: '0' } }, emphasis: { show: true, textStyle: { fontSize: '20', fontWeight: 'bold' }, // 同步样式 formatter: function (params) { return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}` }, rich: { tTitle: { fontSize: '14', fontWeight: 'bold', lineHeight: '25' }, tSubTitle: { fontSize: '20', fontWeight: 'bold', lineHeight: '25' } } } }, labelLine: { normal: { show: false } }, data: _data } ] } this.chart.setOption(options) this.chart.on('mouseover', { seriesName: 'from' }, params => { this.chart.setOption({ title: { show: false } }) }) this.chart.on('mouseout', { seriesName: 'from' }, params => { this.chart.setOption({ title: { show: true } }) }) }更改后，显示效果如下： |
展示效果正常，但当鼠标悬浮至数据上时，title.show:false后，原始的emphasis事件失效，情况如下： 
使用dispatchAction事件主动触发也不能触发当前选中，但能触发其它选中，使用其它方法进行了解决。
鼠标悬浮高亮效果： 
完成了预期效果，显示总数，鼠标移入显示当前选中数据，显示位置居中。【本文地址】
公司简介
联系我们