echarts legend图例显示数值和百分比

效果图：

核心代码：

主要是在legend中以回调函数形式配置formatter：

     formatter: function(name) {var data = option.series[0].data;var total = 0;var tarValue;for (var i = 0; i < data.length; i++) {total += data[i].value;if (data[i].name == name) {tarValue = data[i].value;}}var v = tarValue;var p = Math.round(((tarValue / total) * 100));return `${name}  ${v}人(${p}%)`;},

返回值可根据自己需求进行修改。

2020-12-01更

最近踩了一个坑，浪费了一上午时间，这个坑就是上图图例字体在微信开发者工具正常真机字体太小的问题，尝试了各种加rich:{}和在线重新构建，没用。最后还是自己跑去官方最新版本下载下来重新替换解决了。

echarts legend图例显示数值和百分比相关推荐

Echarts饼图显示数值和百分比
Echarts 饼图显示名称,数值和百分比核心: series : [ {name:'',type : 'pie',radius : '65%',center : [ '50%', '50%' ], ...
echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts 控制图例显示隐藏以及自适应的方法
当屏幕大小发生变化,echarts没有进行自适应,我们可以使用它的resize()方法去解决. 当echarts的组件放在el-tabs里面的el-tab-pane切换时,echarts的自适应会跟不 ...
bizcharts饼图Legend显示数值和百分比
效果图百分比官网API:https://www.bizcharts.net/product/BizCharts4/category/62/page/81#itemvalue itemValue是L ...
echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线
需求项目开发中,产品经理绘制的原型图中,需要前端实现一个饼状图,且既在饼图内部中显示百分比,又显示外部指示线及数值,效果如下图所示: 查了下 Echarts 官网文档,需要配置 series ...
echarts legend不显示_ECharts地图系列一（定制区域水波纹显示，以及其他区域圆点颜色不统一）...
Echarts水波纹地点显示,以及颜色点随机系列篇在现今的前端开发中,图表的展示是不可或缺的,也会接触到一些地图区域的展示,例如,现实场景下,需求需要现实当今公司在全国乃至世界的分部分布情况,这时就 ...
echarts legend不显示
1.情况一,要保证legend中的data与series中name相同,例如: var options = {legend:{data:["2018","2019&quo ...
echarts legend 图例形状、图标与文字对齐
1.设置图例的图标形状,参考此文章 2.图标与文字对齐,参考此文章 legend: {icon: "roundRect",left: 'right',data: ['最高分','平 ...
echarts legend 图例与文字对齐问题
今天使用echarts时发现官网示例图例部分并没有进行对齐,一上一下逼死强迫症,经过对文档的查询,发现可以通过对textStyle-height以及rich的设置调整对齐方式第一种方式 textSt ...

echarts legend图例显示数值和百分比

echarts legend图例显示数值和百分比相关推荐

最新文章

热门文章