yxk-storeroom-system/src/views/system/archiveStatistics/module/barEcharts.vue

<template>

  <div id="main1" :style="{height:height,width:width}" />

</template>

<script>
import echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'BarEcharts',
  mixins: [resize],
  props: {
    storageData: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    'storageData': {
      handler(val) {
        setTimeout(() => {
          this.drawChart()
        }, 100)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const app = {}
      const chartDom = document.getElementById('main1')
      this.chart = echarts.init(chartDom)

      let option = null
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function(map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function() {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
          this.chart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          })
        }
      }
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      }
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            var res = "<div style='width:100%;height:24px;margin-bottom:5px;padding:0 12px;line-height:24px;'><p>" + echarts.format.formatTime('yyyy年M月', new Date(params[0].name)) + ' </p></div>'
            for (var i = 0; i < params.length; i++) {
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                        <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background:${[params[i].color]};"></span>
                        ${params[i].seriesName}
                        ${params[i].data}
                      </div>`
            }
            return res
          }
        },
        legend: { // 图例
          data: ['出库', '入库'],
          right: 20,
          top: 10,
          icon: 'circle',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          top: '17%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisTick: { show: false },
          data: this.storageData.storageMonths,
          axisLine: {// 轴线的颜色以及宽度
            lineStyle: {
              color: '#113D72'
            }
          },
          axisLabel: {// x轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            },
            formatter: function(value) {
              return echarts.format.formatTime('M月', new Date(value))
            }
          },
          splitLine: {// 分割线配置
            lineStyle: {
              color: '#113D72',
              type: 'dashed'
            }
          }

        }],
        yAxis: [{
          min: 0,
          max: 900,
          splitNumber: 3,
          type: 'value',
          axisLine: {// 轴线的颜色以及宽度
            show: false
          },
          axisLabel: {// 轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { // 刻度线隐藏
            show: false
          },
          splitLine: {// 分割线配置
            lineStyle: {
              color: '#113D72',
              type: 'dashed'
            }
          }
        }],
        series: [
          {
            name: '出库',
            type: 'bar',
            barWidth: 10, // 柱图宽度
            barGap: '30%',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.storageData.outStorageData,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#6E48E6'
              },
              {
                offset: 1,
                color: '#3AA6FA '
              }
            ])

          },
          {
            name: '入库',
            type: 'bar',
            barWidth: 10, // 柱图宽度
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.storageData.inStorageData,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#9DDD92'
              },
              {
                offset: 1,
                color: '#10BFAA'
              }
            ])
          }
        ]
      }

      option && this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>