echart-条形图各个属性详解/bar渐变色/根据value设置bar的颜色/隐藏刻度线/给每一个bar添加阴影/tooltip自定义样式

echart-条形图各个属性详解 文末有对应的图

重点内容

1. grid.containLabel
2. tooltip 自定义样式，（添加class）
3. 给每一个bar添加背景阴影
4. 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类型，可以是百分比或px
          right: '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'}])
                    }
                  }
                }
              }
            }
          ]
      },