vue2 echarts柱状图封装 可修改颜色 轴坐标方向 label颜色名称 整体高度 位置等 自动展示tooltip

 

<template>
  <div class="customerHistogram-container">
    <div class="customerHistogram-main">
      <div :id="chartId" :style="histogramStyle"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    chartId: { // chartsid 每个charts的id都不能一样
      type: String,
      default: 'customerHistogram-chart'
    },
    barWidth: { // 柱状图宽度
      type: Number,
      default: 15
    },
    barGap: { // 柱状图间隔
      type: Number,
      default: 60
    },
    dataList: { // 柱状图数据 + 名字
      type: Object,
      default: () => ({
        labelName0: '本期',
        labelName1: '同期',
        data0: [41, 22, 81, 80, 12, 92],
        data1: [62, 200, 49, 80, 70, 17],
        dataName: ['7月', '8月', '9月', '10月', '11月', '12月']
      })
    },
    barHistogranColor0: {
      type: Array,
      default: () => ['#5A5EC3', '#01FCFC']
    },
    barHistogranColor1: {
      type: Array,
      default: () => ['#23AFE3', '#B0EEAF']
    },
    isVertical: { // 是否是竖向的
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 613
    },
    height: {
      type: Number,
      default: 365
    },
    left: {
      type: Number,
      default: -14
    },
    top: {
      type: Number,
      default: -32
    },
  },
  computed: {
    histogramStyle() {
      return { 'width': `${this.width}px`, 'height': `${this.height}px`, 'left': `${this.left}px`, 'top': `${this.top}px`, 'position': 'absolute' }
    }
  },
  data() {
    return {
      // serise 配置项 柱状图 类型 宽度 圆角 label字体属性
      seriseConfig: {
        type: 'bar',
        barWidth: this.barWidth,
        itemStyle: {
          barBorderRadius: 50
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#FFF', // 标签字体颜色
            fontSize: 14, // 标签字体大小
            fontWeight: 'bold', // 标签字体加粗
            fontFamily: 'Arial' // 标签字体
          }
        },
      },
      // 柱状图渐变色1
      graphicColor0: [
        {
          //代表渐变色从正上方开始
          offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
          color: this.barHistogranColor0[0]
        }, //柱图渐变色
        {
          offset: 1, //指100%处的颜色
          color: this.barHistogranColor0[1]
        }
      ],
      graphicColor1: [
        {
          //代表渐变色从正上方开始
          offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
          color: this.barHistogranColor1[0]
        }, //柱图渐变色
        {
          offset: 1, //指100%处的颜色
          color: this.barHistogranColor1[1]
        }
      ],
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            type: 'solid', //y轴线条类型
            color: '#9FADBF', //y轴线条颜色
            width: '1' //y轴线条宽度
          }
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: '#9FADBF' //y轴文本颜色
          }
        },
        splitLine: {
          //分割线配置
          lineStyle: {
            color: '#344859',
            type: 'solid'
          }
        }
      },
      xAxis: {
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        type: 'category',
        data: this.dataList.dataName,
        axisLabel: {
          textStyle: {
            color: '#9FADBF' //x轴文本颜色
          }
        },
        axisLine: {
          lineStyle: {
            type: 'solid', //x轴线条类型
            color: '#344859', //x轴线条颜色
            width: '1' //x轴线条宽度
          }
        },
      }
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let myChart = this.$echarts.init(document.getElementById(this.chartId));
      // 指定图表的配置项和数据
      const option = {
        legend: {
          top: 30,
          right: 60,
          textStyle: {
            color: '#fff',
          },
          data: [{
            name: this.dataList.labelName0,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                this.isVertical ? 0 : 1, this.isVertical ? 1 : 0, 0, 0, this.graphicColor0
              )
            },
          },
          {
            name: this.dataList.labelName1,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                this.isVertical ? 0 : 1, this.isVertical ? 1 : 0, 0, 0, this.graphicColor1
              )
            },
          }]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        barGap: `${this.barGap}%`, // 柱状图间距
        xAxis: this.isVertical ? this.xAxis : this.yAxis, // x轴
        yAxis: this.isVertical ? this.yAxis : this.xAxis, // y轴
        series: [ // 数据项
          {
            name: this.dataList.labelName1,
            data: this.dataList.data1,
            ...this.seriseConfig, // 常规配置项 在data里面配置 无需更改 
            color: new this.$echarts.graphic.LinearGradient( // 渐变色
              this.isVertical ? 0 : 1, this.isVertical ? 1 : 0, 0, 0, this.graphicColor0
            )
          },
          {
            name: this.dataList.labelName0,
            data: this.dataList.data0,
            ...this.seriseConfig,
            color: new this.$echarts.graphic.LinearGradient(
              this.isVertical ? 0 : 1, this.isVertical ? 1 : 0, 0, 0, this.graphicColor1
            )
          }
        ]
      };
      myChart.setOption(option);
      let _that = this
      // 间隔显示tip
      let index = 0 // 播放所在下标
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      });
      index++
      setInterval(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        });
        index++
        if (index > _that.dataList.data0.length - 1) {
          index = 0;
        }
        myChart.setOption(option)
      }, 1500);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    }
  }
};
</script>
<style scoped lang="scss">
.customerHistogram-container {
  width: 100%;
  height: 100%;

  .customerHistogram-main {
    width: 100%;
    height: 100%;
    position: relative;

  }
}
</style>

完整代码 复制粘贴运行