echart柱状图显示两个数值、显示百分比,中间和头部显示两个数值
const xAxisValue = [51, 58, 53, 31, 32, 34, 51, 58, 53, 31, 32, 34];function fomatPercent(data) {let sum = 0;xAxisValue.map((item) => {sum += item;});return Math.round...
·
const xAxisValue = [51, 58, 53, 31, 32, 34, 51, 58, 53, 31, 32, 34];
function fomatPercent(data) {
let sum = 0;
xAxisValue.map((item) => {
sum += item;
});
return Math.round((data / sum) * 100) + '%';
}
function formatterArr() {
var arr = new Array();
xAxisValue.map((item, i) => {
arr.push({
coord: [item, i]
});
});
return arr
}
option = {
title: {
text: '投资项目金额地域分布(单位:万元)',
x: 'center',
textAlign: 'center'
},
color: "rgb(116,142,222)",
tooltip: {
trigger: 'item'
},
grid: {
left: '7%',
top: '12%',
width: '80%',
},
calculable: false,//是否容许拖拽
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
// 坐标轴线
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
// 分隔线
show: true,
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eaeaea']
}
},
axisTick: { //刻度线
show: false
},
}
],
yAxis: [
{
type: 'category',
data: [
"北京", "深圳", "上海", "江苏", "广东", "杭州", "北京", "深圳", "上海", "江苏", "广东", "杭州",
],
axisLine: {
// 坐标轴线
show: true,
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: '#666666',
width: 1
}
},
splitArea: {
show: false,
},
splitLine: {
// 分隔线
show: false,
},
axisTick: { //刻度线
show: false
},
}
],
series: [
{
type: 'bar',
data: xAxisValue,
label: {
show: true,
color: '#fff',
formatter: (a) => {
return fomatPercent(a.data);
}
},
markPoint: {
symbolSize: 1,
data: formatterArr(),
label: {
show: true,
position: 'right',
color: '#666',
formatter: (a) => {
return xAxisValue[a.dataIndex];
}
}
}
}
]
};
更多推荐
已为社区贡献1条内容
所有评论(0)