文章目录
效果圆角 渐变背景 不省略轴线文字根据高度实现渐变思路效果代码实现 完整代码实现效果
圆角 渐变背景 不省略轴线文字
xAxis: {axisLabel:{interval:0// 不省略x轴文字}},series: [{type: 'bar',barWidth:12,itemStyle:{color:new echarts.graphic.LinearGradient( // 渐变色0, 0, 0, 1, // 渐变色的起止位置, 右/下/左/上[// offset 位置 {offset: 0,color: '#BD4097'},{offset: 0.5,color: '#0A76E9'},{offset: 1,color: '#0CC1A0'//'#f1ff50'}]),barBorderRadius:[18,18,18,18], // 圆角},data: [21,13,23,16,21]}]
根据高度实现渐变
思路
根据每一个数据的数据的大小来显示不同的渐变色
获取最大的那个数据 显示所有颜色
根据下一条数据的 是 最大的那个数据的 百分之多少 位置的颜色
计算颜色值
效果
代码实现
function getColor(start,end){var parseColor = function (hexStr) {return hexStr.length === 4 ? hexStr.substr(1).split('').map(function (s) {return 0x11 * parseInt(s, 16); }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {return parseInt(s, 16); })};// zero-pad 1 digit to 2var pad = function (s) {return (s.length === 1) ? '0' + s : s;};/*start 开始颜色end 结束颜色steps 颜色分解 次数gamma 透明一点*/var gradientColors = function (start, end, steps, gamma) {var i, j, ms, me, output = [], so = [];gamma = gamma || 1;var normalize = function (channel) {return Math.pow(channel / 255, gamma);};start = parseColor(start).map(normalize);end = parseColor(end).map(normalize);for (i = 0; i < steps; i++) {ms = i / (steps - 1);me = 1 - ms;for (j = 0; j < 3; j++) {so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));}output.push('#' + so.join(''));}return output;};return gradientColors(start,end,100)}var colorArr = getColor('#BD4097', '#0CC1A0')var data = [21,13,23,16,21]var max = Math.max(...data)itemStyle:{color:function(params){var val = (params.value/max*100).toFixed(0)return new echarts.graphic.LinearGradient(0, 0, 0, 1, // 渐变色的起止位置, 右/下/左/上[// offset 位置 {offset: 0,color: colorArr[Math.abs(99-val)]},//'#BD4097' //顶部颜色{offset: 1,color: colorArr[colorArr.length-1]}//'#0CC1A0'底部颜色])}}
完整代码实现
loadRole()function loadRole(){function getColor(start,end){var parseColor = function (hexStr) {return hexStr.length === 4 ? hexStr.substr(1).split('').map(function (s) {return 0x11 * parseInt(s, 16); }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {return parseInt(s, 16); })};// zero-pad 1 digit to 2var pad = function (s) {return (s.length === 1) ? '0' + s : s;};/*start 开始颜色end 结束颜色steps 颜色分解 次数gamma 透明一点*/var gradientColors = function (start, end, steps, gamma) {var i, j, ms, me, output = [], so = [];gamma = gamma || 1;var normalize = function (channel) {return Math.pow(channel / 255, gamma);};start = parseColor(start).map(normalize);end = parseColor(end).map(normalize);for (i = 0; i < steps; i++) {ms = i / (steps - 1);me = 1 - ms;for (j = 0; j < 3; j++) {so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));}output.push('#' + so.join(''));}return output;};return gradientColors(start,end,100)}var colorArr = getColor('#BD4097', '#0CC1A0')var data = [21,13,23,16,21]var max = Math.max(...data)return loadCharts()function loadCharts(){var ele = document.querySelector("#canvas_role")var myChart = echarts.init(ele);var option = {title: {text:"角色人员数量",textStyle:{fontSize:20},left:10,top:10},tooltip: {},xAxis: {data: ['后台','管理员','搅拌站','运输公司','司机'],axisTick: {show: false}, // 刻度axisLine: {show: false}, // 轴线axisLabel:{interval:0// 不省略x轴文字}},yAxis: {axisTick: {show: false}, // 刻度axisLine: {show: false}, // 轴线},series: [{type: 'bar',barWidth:12,itemStyle:{// 跟随高度变化的渐变色color:function(params){var val = (params.value/max*100).toFixed(0)return new echarts.graphic.LinearGradient(0, 0, 0, 1, // 渐变色的起止位置, 右/下/左/上[// offset 位置 {offset: 0,color: colorArr[Math.abs(99-val)]},//'#BD4097' //顶部颜色{offset: 1,color: colorArr[colorArr.length-1]}//'#0CC1A0'底部颜色])},// 渐变色// color: new echarts.graphic.LinearGradient(// 0, 0, 0, 1, // 渐变色的起止位置, 右/下/左/上// [// offset 位置 // {offset: 0,color: '#BD4097'},//{offset: 0.5,color: '#0A76E9'},//{offset: 1,color: '#0CC1A0'//'#f1ff50'//}// ]//// ),barBorderRadius:[18,18,18,18],},data: data}]}myChart.setOption(option);return myChart}}
