Echarts--柱状图封装使用

Echarts介绍

Echarts是一个使用 JavaScript 实现的开源可视化库，可以很方便的以多彩的形式展示数据，使人一目了然。关于具体的使用，如有兴趣的可以参见官网说明 Echarts详细说明文档

Echarts–柱状图封装使用

这里我仅介绍Echarts中的柱状图的使用，包括渐变柱状图，堆叠柱状图的使用。其实不管是渐变柱状图还是堆叠柱状图都是柱状图，只是在图的数据option里变得更加复杂一点。在这里我主要拿渐变柱状图和堆叠柱状图来说明

• 图的封装：首先是单独建一个Chart组件，做好基本的封装工作，代码如下

// 组件 Chart.vue
<template>
  <div :id="id" :style="chartStyle"></div>
</template>
<script>
export default {
  name: 'Chart',
  data () {
    return {
      chart: ''
    }
  },
  props: {
    id: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    data: {
      type: Array
    },
    option: {
      type: Object
    }
  },
  computed: {
    chartStyle () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
      window.addEventListener('resize', this.chart.resize) // 图表自适应
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  watch: {
    // 观察option的变化
    option: {
      handler (newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal)
          } else {
            this.chart.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }

}
</script>

• 图组件的使用，在需要使用Chart组件的地方，引入该组件，传入对应的Id和绑定对应的配置选项option，如下代码

        <el-row>
          <el-col :span="24" style="height:800px;">
            <!--报警区域统计-->
            <Chart id="chartContainer1" :option="option1"></Chart>
          </el-col>
        </el-row>

• 图的数据填充。图的数据主要是对组件中option的配置，在当前的父组件的data中设置数据，代码如下

option: {
        title: [
        // 设置主标题，包括标题的样式textStyle, 距离面板的位置
          {
            text: '报警次数统计',
            textStyle: {
              fontSize: 22,
              color: '#000000'
            },
            itemGap: 20,
            left: 730,
            top: 30
          },
          // 有的地方需要有副标题，同样的有对应的样式
          {
            text: ' ',
            subtext: '',
            subtextStyle: {
              color: '#000000',
              fontSize: 14
            },
            itemGap: 20,
            left: 730,
            top: 40
          }
        ],
        // color对应的是图的柱子的颜色，如果不是渐变色，则color数组中展示一种颜色值即可，如果是渐变色，则需要如下的设置
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#FAD961 '
          }, {
            offset: 1, color: '#F76B1C '
          }],
          global: false
        }],
        // 提示设置，当鼠标滑过某一根柱子的时候，提示框显示的样式，是直接显示柱子代表的值还是将整根柱子使用阴影的方式显示，显示的信息的怎么展示都可以设置
        tooltip: {
          trigger: 'axis',
          formatter: '<b>{b}</b> ：{c}次',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 设置整个图的位置，距离上下左右的距离等
        grid: {
          left: '2%',
          right: '1%',
          top: '15%',
          bottom: '8%',
          containLabel: true
        },
        // 设置x轴
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: [
              '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
              '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
              '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
              '21:00', '22:00', '23:00'
            ]
          }
        ],
        // 设置y轴，y轴的标题，对应的分割线等
        yAxis: [
          {
            type: 'value',
            name: '报警次数',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: true
            }
          }
        ],
        // 设置x坐标轴显示的范围
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 33,
            end: 75,
            showDataShadow: false,
            // handleIcon是网络path路径，详见echarts文档
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z'
          }
        ],
        // 真正的纵坐标显示的数据，这里的data可以是固定的数据。一般的初始化是空，后面可以根据后台的数据填充上去
        series: [
          {
            name: '报警次数',
            type: 'bar',
            barWidth: '35%',
           // data： [10,12,13,14,15,16.....]
            data: []
          }
        ]
      } 

效果如下图：

如果是堆叠柱状图，就是在series中多几组数据，然后将堆叠在同一根柱子上的数据使用字段stack规定一下，并在option中设置一下legend，显示在图的上方，作为辨认图的标识，具体代码如下

option: {
        title: [
          {
            text: '报警次数统计',
            textStyle: {
              fontSize: 22,
              color: '#000000'
            },
            itemGap: 20,
            left: 730,
            top: 20
          }
        ],
        // 图说明标识
        legend: {
          data: [ '未戴安全帽', '未戴护目镜', '未戴口罩' ],
          right: 0,
          top: 70
        },
        color: ['#FF5D13', '#FF8C09', '#FFEC85'],
        tooltip: {
          trigger: 'axis',
          formatter: ['<b>{b}</b><br /> {a}: {c}'],
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '1%',
          top: '15%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: [
              '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
              '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
              '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
              '21:00', '22:00', '23:00'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '报警次数',
            axisLabel: {
              formatter: '{value} '
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: true
            },
            left: 10
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 28,
            end: 68,
            showDataShadow: false,
            // handleIcon是网络path路径，详见echarts文档
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z'
          }
        ],
        series: [
          {
            name: '未戴安全帽',
            type: 'bar',
            stack: '告警',
            barWidth: '35%',
            // [5, 10, 12, 5, 6, 13, 15, 16, 13, 12, 10, 12, 5, 9, 10, 10, 10, 11, 13, 5, 6, 8, 9, 2]
            data: []
          },
          {
            name: '未戴护目镜',
            type: 'bar',
            stack: '告警',
            barWidth: '35%',
            data: []
          },
          {
            name: '未戴口罩',
            type: 'bar',
            stack: '告警',
            barWidth: '35%',
            data: []
          }
        ]
      }

效果如下图：

当需要具体的填充真实的数据的时候，可使用赋值方法将数据填充上去，如下代码：

API.getOffSiteAlarmStatistics(datas).then(res => {
        // 设置两个表的离岗时长
        this.option.title[1].subtext = '总离岗时长' + res.data.totalTime1 + '小时 '
        this.option1.title[1].subtext = '总离岗时长' + res.data.totalTime2 + '小时 '
        // 将后台获取的图表的数据替换data中的固定数据
        this.option.series[0].data = res.data.timeCounts.map((item) => {
          return item.offSiteCount
        })
        this.option1.series[0].data = res.data.regionCounts.map((item) => {
          return item.offSiteCount
        })
      })