若依框架 --- echarts 封装

  

👏作者简介：大家好，我是小童，Java开发工程师，博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人 

 

专栏：若依框架 

页面使用 - 引入注册使用

<div class="left2-info">
       <BarChart :chartData="BarChartData" height="100%" />
 </div>

柱状图 - BarChart.vue

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
// require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOption(val);
      },
    },
  },
  mounted() {
    console.log(this.chartData);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOption(this.chartData);
    },

    setOption(data) {
      data.series.forEach((item) => {
        item.type = "bar";
        item.barWidth = 20;
      });
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: ["#1adffe", "#fe5656"],
        backgroundColor: "",
        legend: {
          textStyle: {
            color: ["#1adffe", "#fe5656", "#fe5653"], //字体颜色
          },
          data: ["阴性", "阳性"],
        },
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: ["24小时", "48小时", "72小时", "7日内", "7日以为"],
            data: data.xAxis,
            axisTick: {
              alignWithLabel: false,
              show: false,
            },
            // axisLine: {
            //   show: false,
            // },
            axisLine: {
              lineStyle: {
                color: "#235f74",
                width: 2, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#ffffff",
            },
            splitArea: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            axisTick: {
              show: false,
            },
            // axisLine: {
            //   show: false,
            // },
            axisLine: {
              lineStyle: {
                color: "#235f74",
                width: 2, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#ffffff",
            },
            splitArea: {
              show: false,
            },
            // boundaryGap: [0, 2],
          },
        ],
        series: data.series,
        animationDuration: 2800,
        // series: [
        //   {
        //     name: "阴性",
        //     type: "bar",
        //     data: [79, 52],
        //   },
        //   {
        //     name: "阳性",
        //     type: "bar",
        //     data: [80, 52],
        //   },
        // ],
      });
    },
  },
};
</script>

   

 

 用到的相关方法  resize.js

import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }

    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}

utils/index.js

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }