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 = 0
if (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) );// 小数点后两位百分比
}
这样就可以实现了
版权声明：本文为Gamelifezhao原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。