横向柱状图

<!--横向柱状图图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="crosswiseBarChart" ref="crosswiseBarChart" style="height:44rem;width:61rem"></div>
  </div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts');
export default {
  name: "crosswiseBarChart",
  props: {
    dataArr: {
      type: Array,
      default() {
        return []
      }
    },

  },
  data() {
    return {
      myChart: null,
      yData: [],
      seriesData: [],
      maxArr: []
    }
  },
  mounted() {
    this.dataArr.forEach(item => {
      this.yData.push(item.deptName)
      this.seriesData.push(item.countTeacher)
    })
    this.seriesData = JSON.parse(JSON.stringify(this.seriesData))
    this.yData = JSON.parse(JSON.stringify(this.yData))
    let max = Math.max(...this.seriesData) + 10
    this.maxArr = new Array(this.seriesData.length).fill(max)
    this.maxArr = JSON.parse(JSON.stringify(this.maxArr))
    this.$nextTick(()=> {
      this.initEchart();
    })


  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.crosswiseBarChart);
      let that = this
      let option = {


        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter:function(params)
          {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +='<br/>' + params[i].marker+params[i].seriesName + ' : ' + params[i].value.toLocaleString()+"K";
            }
            return relVal;
          }
        },
        grid: {
          left: '0',
          bottom: '18',
          top: '0',
          right: '20',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          inverse: true,
          type: 'category',
          // 坐标刻度线

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // axisLabel: {
          //   color: '#fff',
          //   show: true
          // },
          axisLabel: {
            interval: 0,
            color: '#fff',
            // rotate: this.rotate,
            formatter: function (value) {
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`
              }
              return value
            },
          },
          splitLine: {
            show: false,
            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: ['程老师', '李老师', '王老师', '张老师', '刘老师', '陈老师', '冯老师', '陆老师'],
          data: that.yData
        },
        series: [
          {
            type: 'bar',
            // data: [41, 36, 22, 20, 12, 8, 6, 2],
            data: that.seriesData,
            barWidth: 8,   //柱状宽度
            itemStyle: {    //柱状颜色和圆角
              normal: {
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: function (params) {
                  var colorList = [
                    ['rgba(83, 206, 253, 0)', 'rgba(24, 144, 255, 1)']
                  ];
                  // let index = params.dataIndex > 3 ? 3 : params.dataIndex;
                  var colorItem = colorList[0];
                  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], // （顺时针左上，右上，右下，左下）
              }
            },
            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'
              }
            },

          },
          {
            name: "背景",
            type: "bar",
            barWidth: 8,
            barGap: "-100%", //两条柱状图重合
            // data: [50, 50, 50, 50, 50, 50, 50, 50, 50],
            data: that.maxArr,
            itemStyle: {
              normal: {
                color: "rgba(255, 255, 255, 0.1)",
                borderRadius: 30,
              },
            },
            label: {
              show: true,
              color: 'rgba(24, 144, 255, 1)',
              position: 'right', // 标签右对齐
              distance: 0,// 标签距离柱条的距离
              formatter: params => {
                console.log(params)
                const arr = [`${that.dataArr[params.dataIndex].countTeacher}人 `, `{sep_color||}`, `占比${that.dataArr[params.dataIndex].ratio}%`]
                return arr.join('')
              },
              rich: {
                sep_color: {
                  color: '#E0E0E0',
                  padding: [0, 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>