echart 柱状图上同时显示数值、百分比（多1行代码）

一、先上最终呈现效果图，是否符合君之所求。

二、这一行代码

代码位置：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

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑