【知识分享】Echarts柱状图封装成组件

封装思路：

1.定义个组件，在里面对柱状图的代码进行封装

2.将想要动态传入的参数进行抽取

3.在其他页面传入相关的参数，直接展示出图标

具体代码：

1.封装的组件的页面代码

<template>

  <div class="index_card" :style="{ height: chartHeight, width: chartWidth }">

    <Echart :options="options" :id="chartId" class="echarts_bottom"></Echart>

  </div>

</template>

<script>

import * as echarts from 'echarts/core'

export default {

  props: {

    xAxisData: {

      type: Array,

      default: []

    },

    yAxisData: {

      type: Array,

      default: []

    },

    chartHeight: {

      type: String,

      default: '400px' // 默认高度为 400px

    },

    chartWidth: {

      type: String,

      default: '100%' // 默认高度为 400px

    },

    yAxisName: {

      type: String,

      default: ''

    },

    seriesName: {

      type: String,

      default: ''

    },

    labelShow: {

      type: Boolean,

      default: true

    },

    labelPosition: {

      type: String,

      default: 'top' //还可输入bottom,center

    },

    lableColor: {

      type: String,

      default: '#fff'

    },

    barBorderRadius: {

      type: Number,

      default: 25

    },

    itemStyleNormalStartColor: {

      type: String,

      default: 'rgb(0, 176, 255)'

    },

    temStyleNormalEndColor: {

      type: String,

      default: 'rgb(0, 99, 178)'

    },

    axisLabelColor: {

      type: String,

      default: '#D3EDFF'

    },

    textStyleColor: {

      type: String,

      default: '#b5b5b6'

    }

  },

  watch: {

    xAxisData(newCount, oldCount) {

      this.getData()

    }

  },

  data() {

    return {

      options: {},

      chartId: `chart_${Math.random().toString(36).substr(2, 9)}`

    }

  },

  mounted() {

    this.getData()

  },

  methods: {

    getData() {

      this.init()

    },

    init(newData) {

      let chart = echarts.init(document.getElementById(this.chartId))

      this.options = {

        grid: {

          left: '8%',

          right: '0',

          bottom: '1%',

          containLabel: true

        },

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'cross',

            crossStyle: {

              color: '#333'

            }

          }

        },

        textStyle: {

          fontSize: 15,

          color: this.textStyleColor

        },

        xAxis: [

          {

            type: 'category',

            data: this.xAxisData,

            nameLocation: 'end',

            scale: true,

            triggerEvent: true,

            axisLabel: {

              interval: 0,

              color: this.axisLabelColor,

              margin: 8,

              formatter: function (params) {

                var val = ''

                if (params.length > 4) {

                  val = params.substr(0, 4) + '...'

                  return val

                } else {

                  return params

                }

              }

            },

            axisPointer: {

              type: 'shadow'

            }

          }

        ],

        yAxis: [

          {

            type: 'value',

            name: this.yAxisName,

            nameGap: 20, // 将"万"字向上偏移一点

            splitLine: {

              show: true, // 是否展示

              lineStyle: {

                type: 'dashed',

                color: 'rgba(211, 237, 255, 0.3)' // 调整分割线颜色

              }

            },

            nameTextStyle: {

              fontSize: 12, // 调整字体大小

              color: this.axisLabelColor,

              opacity: 0.8

            },

            // min: 0,

            // max: 300,

            // interval: 5,

            axisLabel: {

              formatter: '{value}',

              margin: -16, // 将刻度标签向左偏移

              color: this.axisLabelColor

            },

            offset: 16

          }

        ],

        series: [

          {

            name: this.seriesName,

            type: 'bar',

            tooltip: {

              valueFormatter: function (value) {

                return value + ' ' + this.name

              }

            },

            label: {

              show: this.labelShow, // 显示柱子上的数值

              position: this.labelPosition, // 数值显示在柱子顶部

              color: this.lableColor // 将数值颜色设置为红色

            },

            barWidth: 15,

            data: this.yAxisData,

            itemStyle: {

              normal: {

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                  {

                    offset: 0,

                    color: this.itemStyleNormalStartColor

                  },

                  {

                    offset: 1,

                    color: this.temStyleNormalEndColor

                  }

                ]),

                barBorderRadius: this.barBorderRadius

              }

            }

          }

        ]

      }

      chart.setOption(this.options)

    }

  }

}

</script>

2.组件使用

 <BarChart

    :xAxisData="['用户1', '用户2', '用户3', '用户4', '用户5', '用户6', '用户7', '用户8']"

    :yAxisData="['10', '70', '34', '33', '34', '58', '66', '99']"

    :chartHeight="'240px'"

    :yAxisName="'Nm³/h'"

    :lableColor="'#9eaaba'"

    :textStyleColor="'#9eaaba'"

    :chartWidth="'500px'"

  />

注意：具体时候时候可以将动态从数据库查询到的数据结果替换到里面去