echarts饼图pie中间显示总数

`echarts`饼图`pie`中间显示总数

有这样一种需求，饼图中间显示总数，当鼠标悬浮指定区域时显示对应区域数值
网上搜了好多都是通过zlevel来实现的这种效果，但是如果echarts的背景如果不是纯色的，而是渐变色或者图片时，zlevel的方式就不好用了

实现效果

默认情况

鼠标悬浮到其中一个区域

实现代码

const myChart = echarts.init(document.getElementById('fwflEchart'))
// 重点代码
//隐藏title
const hideTitle = (e) => {myChart.value.setOption({title: {text: '',},})
}
//显示title
const showTitle = (e) => {myChart.value.setOption({title: {text: '房屋总数量\n2230',},})
}// 给饼图添加事件
// 当区域高亮时隐藏title，比如当鼠标移动到legend上时
myChart.value.on('highlight', hideTitle)
// 当鼠标悬浮到区域时隐藏title
myChart.value.on('mouseover', hideTitle)
// 当鼠标离开区域时显示title
myChart.value.on('mouseout', showTitle)
// 当区域取消高亮时显示title，比如当鼠标从legend上离开时
myChart.value.on('downplay', showTitle)
// 设置option
myChart.setOption({color: ['#00d1d1', '#529fcf', '#71d0aa', '#c5ff7d',],title: {text: '总数量\n2230',top: '160px',left: '214px',textAlign: 'center',textStyle: {color: 'white',fontSize: '24px',lineHeight: 30}},legend: {bottom: '60px',textStyle: {color: 'white',fontSize: '16px'}},series: [{name: '房屋分类统计',type: 'pie',radius: [80, 160],avoidLabelOverlap: false,center: ['50%', '40%'],label: {show: false,position: 'center'},// 鼠标悬浮时中心位置显示对应区域的信息emphasis: {label: {formatter: `{b}\n{c}`,show: true,fontSize: '24px',fontWeight: 'bold',color: () => {},lineHeight: 30}},itemStyle: {borderRadius: 10,borderColor: 'rgba(255,255,255,0)',borderWidth: 2},labelLine: {show: false},data: [{value: 1427, name: 'AAA'},{value: 515, name: 'BBB'},{value: 113, name: 'CCC'},{value: 173, name: 'DDD'},]}]
});

echarts饼图pie中间显示总数相关推荐

echarts饼图默认中间显示总数
this.echarts1.setOption({title: {text: ['Search Engine',' 1048'].join('\n'), // join('\n')作用是换行居中lef ...
echarts 饼图效果，显示其对应数值及百分比
需求:echarts 饼图效果,显示其对应数值及百分比代码 <Chart1 :ecStyle="ecStyle" :ecOption="optionRight2& ...
echarts饼图选中时显示引导线
选中时显示引导线详细信息 ... tooltip: {trigger: 'item',// formatter: '{a} <br/>{b} : {c} ({d}%)'formatter ...
ECharts 饼图 pie undefined%问题解决
在两边值都为0的时候就会出现undefined% 已读.未读都为0时打印percent 为undefined, 已读.未读其中一个不为0时打印如下就不会有问题跑去echart ...
echarts 饼图label换行显示
let newStr = "" let start = 0//开始截取位置 let end = 0//截取结束位置 const name_len = name.length //每 ...
echarts 饼图提示框显示百分比
设置提示框浮层内容格式器,将tooltip属性中的formatter值写成百分比形式 tooltip : { trigger: 'item', formatter: '{a} <br/>{ ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...

echarts饼图pie中间显示总数

`echarts`饼图`pie`中间显示总数

实现效果

实现代码

echarts饼图pie中间显示总数相关推荐

最新文章

热门文章