echart-条形图各个属性详解 文末有对应的图
重点内容
- grid.containLabel
- tooltip 自定义样式，（添加class）
- 给每一个bar添加背景阴影
- bar渐变颜色显示：echarts.graphic.LinearGradient
代码分解
- bar横条的渐变效果：itemStyle中设置color
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#EC8860'}, {offset: 1,color: '#EC4D4B'}])
- 根据数据大小，添加判断，设置bar的颜色
{name: '职位',type: 'bar',barCategoryGap: '25',data: [15203, 13489, 9034, 10497, 13174, 1230, 12589, 4000, 10000, 1000],itemStyle:{normal:{color: function(params) {var index_value = params.value;if(index_value > 15000){return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#EC8860'}, {offset: 1,color: '#EC4D4B'}]) // 颜色渐变显示}else{return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#53D1D2'}, {offset: 1,color: '#02E4CF'}])}}}}
}
完整效果
完整代码
horibarOption:{grid: { // 图表在整个canvas画布上的位置left: '0px', // 上下左右间距是String类型，可以是百分比或pxright: '20px',bottom: '3%',containLabel: true // 是否包含坐标文字，默认是false，改为true，left、right、top、bottom改变的是包括坐标轴标签在内的所有内容形成的矩形在画布上的位置，可以防止图表溢出},tooltip: {// 鼠标指向时的提示框trigger: 'axis',formatter: function(params, ticket, callback) { // tooltip样式用formatter来灵活定义let res = `<div class='bartooltip'>${params[1].value} </div>`; // 甚至可以传入class用css来修改return res;}},xAxis: [{type: 'value',max: '18000', // 给x轴添加个最大值/最小值可以手动控制坐标轴结束/起始的值splitLine:{ // 纵向的分割线lineStyle: {type: 'dash',color: 'rgba(255,255,255,.65)',//纵向的分割线颜色}},axisLine: {show: false}, // 隐藏x轴线axisLabel: { // x轴标签文字show: true, // 是否显示x轴标签文字textStyle: {color: 'rgba(255,255,255,.65)'}}}],yAxis: { // 同x轴type: 'category',data: ['技工', '质量检测员/测试员', '客服专员/助理', '行政专员/助理', '人事专员', '普工/操作', '会计', '销售主管', '销售经理', '销售代表'],axisLine: {lineStyle: {type: 'dashed',color: 'rgba(255,255,255,.65)',//左边线的颜色width:'1'//坐标线的宽度}},axisTick: {show:false}, // 是否显示刻度线axisLabel: {textStyle: {color: 'rgba(255,255,255,.65)'}}},series: [ // 传入具体数据{ // 这一组数据data都设置为最大值，并且barGap上移100%，是为了给每一个bar添加阴影name: '职位',type: 'bar',barCategoryGap: '25',barGap: '-100%',data: [18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000],itemStyle:{normal:{color: '#252e3f',}}},{name: '职位',type: 'bar',barCategoryGap: '25',data: [15203, 13489, 9034, 10497, 13174, 1230, 12589, 4000, 10000, 1000],itemStyle:{normal:{color: function(params) {var index_value = params.value;if(index_value > 15000){return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#EC8860'}, {offset: 1,color: '#EC4D4B'}]) // 颜色渐变显示}else{return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#53D1D2'}, {offset: 1,color: '#02E4CF'}])}}}}}]},