huimv_cloud_client/src/views/collectData/charts/hisChart.vue

<template>
  <div class="his-chart">
    <div id="his" class="his"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [22, 23, 24, 25, 22, 23, 23, 24],
      dates: ['杭州牧场', '宁波牧场', '温州牧场', '绍兴牧场', '嘉兴牧场', '台州牧场', '金华牧场', '湖州牧场']
    }
  },
  methods: {
    drawLine () {
      const hisChart = this.$echarts.init(document.getElementById('his'))
      const option = {
        xAxis: {
          type: 'category',
          data: this.dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      hisChart.setOption(option)
    }
  },
  mounted () {
    this.drawLine()
  }
}
</script>
<style scoped>
.his {
  min-height: 250px;
}
</style>