一、先上最终呈现效果图，是否符合君之所求。
二、这一行代码
代码位置：option->series->label
formatter: function(params) {return legendData4[params.dataIndex] + '(' + ((legendData4[params.dataIndex] /sum4*100)).toFixed(2) + '%)'}
三、完整代码
DOM代码：
<!--左2 GO--><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】
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
