iot-front-ui/src/components/scene/meeting/chart/meetingPersonCharts.vue

<template>
  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    height: Number,
    queryData: Object
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart);
      let options = {
        color: ['#80B2FF','#FFDF80'],
        grid: {
          left: '2%', //默认10%
          right: '2%', //默认10%
          bottom: '0%', //默认60
          top: '15%',
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category',
          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日', '2月8日', '2月9日', '2月10日', '2月11日', '2月12日', '2月13日', '2月14日', '2月15日', '2月16日', '2月17日', '2月18日', '2月19日', '2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日', '2月27日', '2月28日']
        },
        yAxis: [
          {
            name: '人数',
            type: 'value',
            nameTextStyle: {
              padding: [0, 0, 0, 0]
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          axisLine: {//x坐标轴轴线
            show: true,
            lineStyle: {//x坐标轴轴线样式
              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            }
          },
          backgroundColor: 'rgba(0,0,0,0.8)',
        },
        series: [
          {
            data: [55, 54, 12, 25, 54, 54, 47, 52, 13, 12, 33, 25, 44, 44, 48, 10, 36, 50, 8, 40, 25, 29, 39, 44, 46, 40, 55, 44],
            type: 'bar',
            stack: 'A',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      chart.setOption(options);
    }
  }
}
</script>

<style lang="less" scoped>
</style>