JingTieXueTang.Web/src/components/echarts/EchartsBar.vue

<template>
  <div ref="myChartBar" :style="{ width: width, height: height }"></div>
</template>

<script>
import { mapState } from 'vuex';
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
import { LegendComponent } from 'echarts/components';
import { GridComponent } from 'echarts/components';
echarts.use([GridComponent]);
echarts.use([LegendComponent]);
export default {
  props: {
    // 数据
    barData: {
      type: Object,
      default() {
        return {
          title: '统计图标题', // 标题
          xAxis: {
            data: [],
          }, // x轴数据
          yAxis: {
            min: null,
            max: null,
          }, // y轴数据
          series: {
            data: [],
          }, // 移入提示数据
        };
      },
    },
    // 宽度
    width: {
      type: String,
      default: '100%',
    },
    // 高度
    height: {
      type: String,
      default: '400px',
    },
  },
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  watch: {
    // 监听浏览器可视区域宽度是否变化
    screenWidth() {
      this.resizeByWindowFun(); // 初始化echarts图表大小
    },
  },
  computed: {
    ...mapState({
      screenWidth: (state) => state.common.screenWidth,
    }),
  },
  methods: {
    // 初始化数据
    initDataFun(barData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChartBar);
      // 绘制图表
      if (!barData) {
        myChart.setOption({
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#999',
              fontWeight: 'normal',
              fontSize: 24,
            },
          },
        });
      } else {
        myChart.setOption({
          tooltip: {},
          xAxis: {
            type: 'category',
            data: barData.xAxis || [],
          },
          yAxis: {
            type: 'value',
            // min: barData.yAxis.min,
            // max: barData.yAxis.max,
          },
          series: [
            {
              type: 'bar',
              data: barData.series || [],
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)',
              },
              itemStyle: {
                color: '#1890FF',
              },
              emphasis: {
                itemStyle: {
                  color: '#1890FF',
                },
              },
            },
          ],
        });
      }
    },
    // 根据窗口大小 初始化echarts图表大小
    resizeByWindowFun() {
      echarts.init(this.$refs.myChartBar).resize();
    },
  },
};
</script>

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

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