vue+echarts封装柱图

前端可视化封装柱图

1. html

<template>
  <div class="barcon">
    <!-- chart容器 -->
    <div class="barcon-chart" :style="chartStyle" ref="chart"></div>
  </div>
</template>

2. js

<script>
export default {
  props: {
    //图表容器样式对象
    chartStyle: {
      type: Object,
      default: () => {
        return {
          width: '340px',
          height: '200px',
        };
      },
    },
    // 柱颜色
    barColors: {
      type: Array,
      default: () => {
        return [
          ['#00C7EA', '#00C7EA'],
          ['#FFBF00', '#FFBF00'],
        ];
      },
    },
    fontSize: {
      type: Number,
      default: 12,
    },
    // measure
    rowData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    maxValue: {
      type: Number,
      default: 100,
    },
    // 单位
    unit: {
      type: String,
      default: () => {
        return '单位：人';
      },
    },
    //是否为条图
    isStrip: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    //柱子宽度
    barWidth: {
      type: String,
      default: () => {
        return '16';
      },
    },
    //图表位置
    grid: {
      type: Object,
      default: () => {
        return {
          bottom: '15%',
          left: '10%',
          right: '0%',
          top: '20%',
        };
      },
    },
    //是否显示值标签
    lableShow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    //值标签位置
    lablePosition: {
      type: String,
      default: () => {
        return 'right';
      },
    },
    //图表单位是否显示
    titleShow: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    //图表 间隔
    axInterval: {
      type: Number,
      default: 0,
    },
    // 是否开启X轴分割线
    isXAxisSplitLine: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否开启条图legend  默认不开启
    isShowStripLegend: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    singleRowMaxWord: {
      type: Number,
      default: 0,
    },
    // 是否开启隔行色
    isSplitArea: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {
      chart: null,
      option: {},
      xAxisData: null,
      setTime: null,
    };
  },
  methods: {
    //实例化echarts并初始化option对象
    instantiation() {
      let that = this;
      this.chart = this.$echarts.init(this.$refs.chart);

      this.option = {
        legend: {
          icon: 'rectangle',
          right: '0%',
          top: this.selectShow ? '5%' : null,
          itemGap: 7,
          itemHeight: 10,
          itemWidth: 20,
          textStyle: {
            fontSize: that.fontSize,
            color: '#BFEBFF',
          },
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765',
              fontSize: that.fontSize,
            },
          },
        },
        grid: this.grid,
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: this.isSplitArea,
            lineStyle: {
              color: '#BFEBFF',
            },
          },
          splitLine: {
            show: that.isXAxisSplitLine,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: this.isSplitArea,
            fontSize: that.fontSize,
            interval: that.axInterval,
          },
        },
        title: {
          show: this.titleShow,
          text: `${that.unit}`,
          padding: [5, 0, 0, 4],
          textStyle: {
            color: '#BFECFF',
            fontSize: that.fontSize,
            fontWeight: 400,
          },
          top: 'top',
          left: 'left',
        },
        yAxis: {
          type: 'value',
          name: '',
          max: this.maxValue,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#BFEBFF',
            },
          },
          splitArea: {
            show: this.isSplitArea,
            areaStyle: {
              color: ['transparent', 'rgba(238,238,238,.1)'],
            },
          },
          axisLabel: {
            interval: 0,
            fontSize: that.fontSize,
          },
          axisTick: {
            show: false,
          },
        },
        series: [],
      };
    },
    //整理rowDatameasure，并进行赋值
    rowDataChart() {
      let legend = [];
      let xAxisData = [];
      this.rowData.forEach(val => {
        legend.push(val['legend']);
        xAxisData.push(val['dimension']);
      });
      legend = new Set(legend);
      legend = Array.from(legend);
      xAxisData = new Set(xAxisData);
      xAxisData = Array.from(xAxisData);

      var that = this;
      legend.forEach((val, int) => {
        that.option.series.push({
          type: 'bar',
          name: val,
          data: [],
          label: { show: this.lableShow, color: '#fff', position: this.lablePosition },
          barWidth: that.barWidth,
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: that.barColors[int][0] },
              { offset: 1, color: that.barColors[int][1] },
            ]),
          },
        });
        for (let i = 0; i < this.rowData.length; i++) {
          if (val == this.rowData[i]['legend']) {
            that.option.series[int].data.push(this.rowData[i]['measure']);
          }
        }
      });
      this.option.legend.data = legend;
      if (this.isStrip) {
        this.option.yAxis.data = xAxisData;
        this.option.legend.show = this.isShowStripLegend;
        // 设置dimension轴标题每一行多少个字
        this.option.yAxis.axisLabel.formatter = value => {
          // singleRowMaxWord每一行多少文字 props接收
          if (this.singleRowMaxWord && value.length > this.singleRowMaxWord) {
            // 折行
            let _valueToArr = value.split(''); // 转value成数组，方便添加换行
            let insertIndex = this.singleRowMaxWord;
            let startItemNum = _valueToArr.length; // 最开始value数组的长度
            while (insertIndex <= value.length) {
              let _index = _valueToArr.length - startItemNum;
              _valueToArr.splice(insertIndex + _index, 0, '\n');
              insertIndex += this.singleRowMaxWord;
            }
            let _val = '';
            for (let item of _valueToArr) {
              _val += item;
            }
            value = _val;
          }
          return value;
        };
      } else {
        this.option.xAxis.data = xAxisData;
      }
      this.xAxisData = xAxisData.length;
      if (this.isStrip) {
        this.option.xAxis.type = 'value';
        this.option.yAxis.type = 'category';
      }
      // this.option.series[0].data = this.rowData;
      this.chart.setOption(this.option, true);
    },
    //轮播tooltip
    tooltipShuffling() {
      clearInterval(this.setTime);
      let count = 0;
      this.setTime = setInterval(() => {
        if (count == this.xAxisData) {
          count = 0;
        }
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: count,
        });
        count++;
      }, 1000);
    },
  },
  mounted() {
    this.instantiation();
    this.rowDataChart();
    this.tooltipShuffling();
  },
  beforeDestroy() {
    clearInterval(this.setTime);
  },
  watch: {
    rowData: {
      handler(newV, oldV) {
        this.instantiation();
        this.rowDataChart();
        this.tooltipShuffling();
      },
      deep: true,
    },
  },
};
</script>

3. style基于scss

<style lang="scss" scoped>
.barcon {
  position: relative;
  width: 100%;
  height: 100%;
}
.barcon-chart {
  margin-top: 2px;
  margin-bottom: 10px;
}
</style>