Echarts柱状图，如何基于数据进行百分比显示

mock数据：

const a = [{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'},{reju: 'a',yuanyou: '1234',kuorong: '3456',rengonganju_: '6577',rengongganyu__: '5674'}],

定义柱状图的option

let option = {// title: {//     left: 'center',//     top: '6%',// },tooltip: {trigger: 'axis', //这里用的是坐标轴触发,多个数据axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},name:'122221',//formatter格式化方法。使用formatter自定义的数据，把内容通过处理让变成我们想要的样子。formatter: function (params) {// 这里鼠标悬浮显示对应item的每项数值let num = (a[params[0].dataIndex].yuanyou-0)+(a[params[0].dataIndex].rengonganju_-0)var relVal = `总核数：${(num)}`;relVal += '<br/>' + params[0].marker + params[0].seriesName + ' : ' + a[params[0].dataIndex].yuanyou;// 支持relVal += '<br/>' + params[1].marker + params[2].seriesName + ' : ' + a[params[0].dataIndex].rengonganju_;// 反对return relVal;},},legend: {bottom: 20,// data: ['视频/热剧/账号', '视频/热剧/播放', '视频/热剧/频道', '视频/热剧/详情', '视频/热剧/付费', '视频/热剧/接入', '视频/热剧/弹幕', '视频/热剧/评论']},grid: {top: '5%',left: '0%',right: '4%',bottom: '16%',containLabel: true},xAxis: [{type: 'category',data: ['视频/热剧/账号', '视频/热剧/播放', '视频/热剧/频道', '视频/热剧/详情', '视频/热剧/付费', '视频/热剧/接入', '视频/热剧/弹幕', '视频/热剧/评论'],axisLabel: {show: true,interval:0,textStyle: {fontSize:'12',itemSize:''}},},],yAxis: [{type: 'value',// max: 100,// 设置最大值是多少// splitNumber: 5,// 设置分几段显示axisLabel: {show: true,interval: 0,formatter: '{value} %'  // 给每个数值添加%},show: true}],series: [{name: '原有核数',type: 'bar',barWidth : 25,stack: 'Search Engine',emphasis: {focus: 'series'},data: initData('Google'),itemStyle: {normal: {color:'#DCE3EE', //改变折线点的颜色}},},{name: '大事件扩容数',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: initData('Bing'),itemStyle: {normal: {color:'#5C9DFF', //改变折线点的颜色}},},{name: '人工干预(正值)',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: initData('Others'),itemStyle: {normal: {color:'#32D19F', //改变折线点的颜色}},},{name: '人工干预(负值)',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: initData('Others_'),itemStyle: {normal: {color:'#FA7883', //改变折线点的颜色}},},]};// 核心为  initData（）与 Percentage（）这两个函数function initData(val) {var serie = [];// 通过循环判断使数组对象中的key相加for (var i = 0; i < a.length; i++) {var num = 0if (val == 'Google') {num = a[i].yuanyou} else if (val == 'Bing') {num = a[i].kuorong} else if (val == 'Others') {num = a[i].rengonganju_} else if (val == 'Others_') {num = a[i].rengongganyu__}var total = (parseFloat(a[i].yuanyou) + parseFloat(a[i].kuorong) + parseFloat(a[i].rengonganju_)) + parseFloat(a[i].rengongganyu__);// console.log((parseFloat(a[i].yuanyou) + parseFloat(a[i].kuorong) + parseFloat(a[i].rengonganju_)) + parseFloat(a[i].rengongganyu__));// 定义计算函数算出百分比var numcount = Percentage(num, total)serie.push(numcount);}return serie;}，function Percentage(num, total) {return (Math.round(num / total * 100) );// 小数点后两位百分比}

这样就可以实现了

Echarts柱状图，如何基于数据进行百分比显示相关推荐

解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
echarts柱状图标记异常数据，突出显示异常数据柱子
近日开发中,项目要求展示一个月的数据,但一个月中有异常的数据需要标记显示并显示出数据解决方案:增加柱状图,传入的是异常日期数据(为了标记突出,我传入的数据为异常数据*2,不异常的传入"-& ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
echarts柱状图横向名字过长时显示省略号
实现效果: var data = ["19.60", "18.90", "13.00", "9.90", "6 ...
echarts柱状图顶部与柱体中同时显示数值
大概是这种需求配置 // 数值部分const xAxisValue = ['3-26','3-28','3-29','4-3','4-8']; // x轴数值const sleepTimeChart ...
echarts柱状图多组数据配置
一共三组数据 var map4_data1=[320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360]; var map4_data2=[220 ...
Echarts 柱状图，带背景色且数值显示在最顶部
showBackground: true 可以设置背景色,但是 label 不能显示在背景色的顶部,所以不满足需求此时需要再来一个柱来显示背景色,且加上label 注意:barGap 为 -100% ...

Echarts柱状图，如何基于数据进行百分比显示

Echarts柱状图，如何基于数据进行百分比显示相关推荐

最新文章

热门文章