| echart 柱状图上同时显示数值、百分比（多1行代码） | 您所在的位置：网站首页 › 条形图增加百分比怎么弄的 › echart 柱状图上同时显示数值、百分比（多1行代码） |
echart 柱状图上同时显示数值、百分比（多1行代码）
|
一、先上最终呈现效果图，是否符合君之所求。
二、这一行代码 代码位置：option->series->label formatter: function(params) { return legendData4[params.dataIndex] + '(' + ((legendData4[params .dataIndex] /sum4*100)).toFixed(2) + '%)' }三、完整代码 DOM代码： 界别情况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 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
【本文地址】
公司简介
联系我们