一、先上最终呈现效果图,是否符合君之所求。
二、这一行代码
代码位置:option->series->label
formatter: function(params) {
return legendData4[params.dataIndex] + '(' + ((legendData4[params
.dataIndex] /sum4*100)).toFixed(2) + '%)'
}
三、完整代码
DOM代码:
<div class="area2">
<div class="item">
<div class="tit">
界别情况
div>
<div class="char" id="char4">div>
div>
div>
CSS代码:
.area2 {
width: 100%;
height: 410px;
display: flex;
border-right: 1px solid #1ac9ff;
margin-top: 20px;
position: relative;
.item {
position: relative;
padding-left: 30px;
width: calc(100% - 380px);
.char {
width: 100%;
height: 400px;
}
.tit {
position: absolute;
top: 10px;
left: 40px;
color: #1ac9ff;
font-size: 18px;
padding-left: 20px;
}
}
}
echart柱状图代码:
let legendData4 = [348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 348,
903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174
]
//ES6 强大求和求积
const sum4 = legendData4.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
let option4 = {
grid: {
left: '10px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: false //去掉网格线
},
//设置坐标轴字体颜色和宽度
axisLine: { //这是x轴文字颜色
show: false,
lineStyle: {
color: "#bff7ff",
}
},
axisLabel: {
show: false,
interval: 0,
rotate: 45 // 角度
}
},
yAxis: {
type: 'category',
data: ['其他 ', '新的社会阶层人士', '非公有制经济', '公有制经济', '团体', '医药卫生', '司法机关', '党派机关', '人大政协机关', '科学技术',
'出版传媒', '文化艺术', '普通教育', '高等教育'
],
axisTick: { //隐藏刻度
show: false
},
splitLine: {
show: false //去掉网格线
},
//设置坐标轴字体颜色和宽度
axisLine: { //这是x轴文字颜色
show: false, //去掉Y轴
lineStyle: {
color: "#bff7ff",
}
}
},
series: [{
name: '学历界别',
type: 'bar',
barWidth: 10,
data: legendData4,
label: {
show: true, //开启显示
position: 'right', //数值展示的位置
textStyle: {
color: '#00ffff',
fontSize: 13
},
//echartjs 2.0 设置显示的数据 echartjs 3.0更简易formatter: '{c},({d}%)'
formatter: function(params) {
return legendData4[params.dataIndex] + '(' + ((legendData4[params
.dataIndex] /sum4*100)).toFixed(2) + '%)'
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#006492', '#01d9d8', '#0086ce', '#b78bef', '#006492',
'#01d9d8', '#0086ce', '#b78bef', '#01d9d8', '#0086ce',
'#b78bef', '#006492',
'#01d9d8', '#0086ce', '#b78bef', '#01d9d8', '#0086ce',
'#b78bef', '#006492',
'#01d9d8', '#0086ce', '#b78bef'
];
var index;
//给大于颜色数量的柱体添加循环颜色的判断
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
return colorList[index];
}
return colorList[params.dataIndex];
}
}
}
},
]
};
以上百分比和数组同时显示问题够用,图表依赖,dom获取这些基础操作就按自身配置的就行。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
VUE大数据前端模板【1920*1080】https://www.zeropo.com.cn
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑