echarts饼图, 中间显示总数

echarts属性真的太太多了需求也是五花八门的先记下来
使用graphic属性

const datas = [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' },{ value: 30, name: 'Video Ads1' },{ value: 36, name: 'hhh Ads1' },{ value: 100, name: 'llll Ads1' }
];
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false
});
var app = {};var option;option = {tooltip: {trigger: 'item'},legend: {orient: 'vertical',// left: 'right',top: '40%',right: '5%',textStyle: {align: 'left',verticalAlign: 'middle',rich: {name: {color: 'rgba(0,0,0,0.5)',fontSize: 12,},value: {color: 'rgba(0,0,0,0.5)',fontSize: 12,},rate: {color: 'rgba(0,0,0,0.9)',fontSize: 12,},},},formatter: (name) => {if (datas.length) {const item = datas.filter((item) => item.name === name)[0];return `{name|${name} | }{rate| ${item.value/ 100}%} {value| ${item.value}} `;}},},graphic: {type: 'text',left: 'center',top: 'center',style: {// text: '总数',text:'总数' +'\n\n' +datas.reduce((n, i) => {return (n += i.value);}, 0),textAlign: 'center',fill: '#333',width: 30,height: 30,fontSize: 14}},series: [{name: 'Access From',type: 'pie',radius: ['30%', '50%'],avoidLabelOverlap: false,itemStyle: {// borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: false,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data:datas}]
};if (option && typeof option === 'object') {myChart.setOption(option);
}window.addEventListener('resize', myChart.resize);

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

echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
echarts 饼图内部显示百分比，外部显示文字说明
为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图) 查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在 ...
Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
echarts饼图文字显示在引线之上
用echarts做饼图,文字默认显示在引线的尾部,如果想让文字显示在引线的上边,加上这几个属性就可以了,引线的长度和文字的内边距根据实际需要调整即可:
解决echarts饼图label显示不全的问题
今天画饼图的时候,发现某些数据的标签自动隐藏了,怎么调整都不能完全显示,如图: 解决办法添加如下配置: labelLayout: {hideOverlap: false}, 最终效果
echarts堆叠图显示总数 tooltips处理
思路:计算总数data 隐藏渲染: 外部tooltip 加 series 内tooltip (可控隐藏) const SystemUserSpread: React.FC<Interface&g ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
ECharts 饼图切换数据源bug 开始没数据显示切换或刷新后显示
1.出现问题原因一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...

echarts饼图, 中间显示总数

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

最新文章

热门文章