echarts组件——条形统计图

echarts组件——条形统计图

竖向条形统计图，单柱状，多柱状，悬浮框展示

组件代码

<template>
  <div :class="classname" :style="{height:height,width:width}" />
</template>

<script>
// 柱状图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 2000

export default {
  mixins: [resize],
  props: {
    classname: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    color: { // 柱状条颜色
      type: Array,
      default: () => ['#6493FE', '#58c971', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    },
    xaxisdata: { // x轴数据
      type: Array,
      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    legenddata: { // 图例
      type: Array,
      default: () => [
        'Direct',
        'Mail Ad',
        'Affiliate Ad',
        'Video Ad',
        'Search Engine'
      ]
    },
    legendshow: { // 图例显示
      type: Boolean,
      default: () => false
    },
    bardata: { // 数据
      type: Array,
      default: () => [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
        [150, 212, 201, 154, 190, 330, 410],
        [820, 832, 901, 934, 1290, 1330, 1320]
      ]
    },
    totalname: { // tooltip内容 共计的名字
      type: String,
      default: '共计'
    },
    tooltipxcustom: { // 悬浮框的标题自定义
      type: Boolean,
      default: false
    },
    xaxisvalue: { // 悬浮框标题自定义要展示的数据
      type: Array,
      default: () => []
    },
    tooltipunitcustom: { // 悬浮框的数据的单位，比如加%号
      type: String,
      default: ''
    },
    barwidth: {
      type: String,
      default: '20%'
    }
  },
  data() {
    return {
      series: [],
      chart: null
    }
  },
  watch: {
    bardata: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.series = this.legenddata.map((name, sid) => {
            return {
              name,
              type: 'bar',
              barWidth: this.barwidth,
              data: this.bardata[sid],
              animationDuration,
              barGap: 0 // 相邻柱子的间隔
            }
          })
          this.initChart()
        })
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: (params) => {
            let result = `<div>${this.tooltipxcustom ? this.xaxisvalue[params[0].dataIndex] : params[0].axisValue}</div>`
            params.map((item, index) => {
              result += `<div style="display: flex; justify-content: space-between"><span>${item.seriesName}:  </span><span>${item.value}${item.value !== '--' ? this.tooltipunitcustom : ''}</span></div>`
            })
            return result
          }
        },
        legend: {
          icon: 'circle',
          top: '0',
          right: '0',
          show: this.legendshow,
          data: this.legenddata
          // bottom: '0'
        },
        grid: {
          top: '8%',
          left: '2%',
          right: '2%',
          bottom: '15',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xaxisdata,
          axisTick: {
            show: false, // 隐藏x轴的分割点
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0 // x轴标签全部显示
          },
          axisLine: {
            lineStyle: {
              color: '#86909C'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#86909C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
              type: 'dashed'
            }
          },
          splitArea: {
            show: false
          }
        }],
        series: this.series
      })
    }
  }
}
</script>

使用组件，传值格式可以看组件的默认数据的格式

注意，别忘记给echart-div宽高，比如下图