横向柱状图图

<!--横向柱状图图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="crosswiseBarChart" ref="crosswiseBarChart"></div>
  </div>
</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  name: "crosswiseBarChart",
  data() {
    return {
      myChart: null,
    }
  },
  props:{
    yTxtType:{
      type:Number,
      default:1//1类似[2.李老师],0记为[李老师]
    }
  },
  mounted() {
    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.crosswiseBarChart);
// y轴文字提示1类似[2.李老师],0记为[李老师]
      let yAxisTxt=this.yTxtType==1?function(value,index) {
        let className = index == 0 ? 'one' : ([1,2].includes(index) ? 'twoThree' : 'rests');
        return '{' + className +'|' + `${index+1}、${value}` +'}'
      }:function(value) {
        return '{' + 'rests' +'|' + `${value}` +'}'
      }
      //y轴柱状体颜色
      let yLineColor=this.yTxtType==1?[
        ['#FFE984', '#F8B404'],
        ['#53CEFD', '#1890FF'],
        ['#53CEFD', '#1890FF'],
        ['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)'],
      ]:[
        ['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)'],
        ['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)'],
        ['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)'],
        ['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)'],
      ]
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '0',
          bottom: '18',
          top: '20',
          right: '20',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show:true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },

          axisLabel:{
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          inverse:true,
          type: 'category',
          // 坐标刻度线
          axisTick: {
            show: false,
            lineStyle: {
              type: 'solid', //y轴分割线类型
              color: 'rgba(102,102,102,0.9)',
              width: 2.5,
            },
          },
          splitLine: {
            show:true,
            interval:0,
            lineStyle: {

              width:2,
              color:['transparent','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','rgba(255,255,255,0.2)','transparent']
            }
          },
          data: ['程老师', '李老师', '王老师', '张老师', '刘老师', '陈老师','冯老师','陆老师'],
          axisLabel: {
            formatter:yAxisTxt ,
            textStyle: {
              color: '#FFF',
              fontSize: 12,
              rich: {
                one:{
                  color:'#F8D800',
                  width: 24,
                  height: 16,
                  background:'rgba(255,255,255,0.1)'
                },
                twoThree:{
                  color:'#1890FF',
                  width: 24,
                  height: 16,
                  background:'rgba(255,255,255,0.1)'
                },
                rests:{
                  color:'#FFFFFF',
                  width: 24,
                  height: 16,
                  background:'rgba(255,255,255,0.1)'
                }
              },
            }
          }
        },
        series: [
          {
            type: 'bar',
            data: [41,36,22,20,12,8,6,2],
            barWidth: 4,   //柱状宽度

markPoint: {
  label: {
    color: '#FFF',  // 文字颜色
    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
    show: false,
    formatter: '000'  // 自定义文字内容
  },
  data: [
    {
      type: "max", name: "最大值"
    },
    {
      type: "min", name: "最小值"
    },
    {
      type: "average", name: "平均值"
    }],
  symbol: 'roundRect',
  // symbol: 'image://' + require('../assets/images/logo.png'),  // 自定义图片作为标注展示
  symbolSize: [4, 12],  // 调整图片的长宽
  symbolOffset: [0, 0], // 调整标注图片的位移方向 大小
  itemStyle: {
    color: '#fff'
  }
},

            itemStyle: {    //柱状颜色和圆角
               normal:{
                 //柱体的颜色
                 //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                 color: function (params) {
                   var colorList = yLineColor
                   let index = params.dataIndex > 3 ? 3 : params.dataIndex;
                   var colorItem = colorList[index];
                   return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                     offset: 0,
                     color: colorItem[0]
                   },
                     {
                       offset: 1,
                       color: colorItem[1]
                     }
                   ], false);
                 },
                 borderRadius: [4,4,4,4], // （顺时针左上，右上，右下，左下）
               }
            },
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem 1.6rem 0;
  flex: 1;

  #crosswiseBarChart {

    height: 100%;

  }
}
</style>