ECharts histogram plus scroll bar

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

<script>
import echarts from "echarts";
import {
      
       debounce } from "@/utils";
require("echarts/theme/macarons"); // echarts theme
import "echarts-liquidfill";

const animationDuration = 6000;

export default {
      
      
  props: {
      
      
    className: {
      
      
      type: String,
      default: "chart",
    },
    width: {
      
      
      type: String,
      default: "100%",
    },
    height: {
      
      
      type: String,
      default: "10rem",
    },
    minHeight: {
      
      
      type: String,
      default: "5rem",
    },
    param: {
      
      
      type: Array,
      default: () => {
      
      },
    },
  },
  data() {
      
      
    return {
      
      
      chart: null,
    };
  },
  watch: {
      
      
    param: {
      
      
      handler: function (value) {
      
      
        this.$nextTick((_) => {
      
      
          this.initChart();
        });
      },
      immediate: true,
    },
  },
  mounted() {
      
      
    this.$nextTick(() => {
      
      
      this.initChart();
    });
    this.__resizeHandler = debounce(() => {
      
      
      if (this.chart) {
      
      
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
      
      
    if (!this.chart) {
      
      
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
      
      
    initChart() {
      
      
      let color = this.$store.state.color.colorListPars;
      this.chart = echarts.init(this.$el, "macarons");
      let dataName = [];
      let dataNum = [];
      let completeNum = [];
      let scatteredNum = [];
      this.param.map((item) => {
      
      
        dataName.push(item.staffName);
        dataNum.push(parseFloat(Number(item.num).toFixed(0)));
        completeNum.push(parseFloat(Number(item.completeNum).toFixed(0)));
        scatteredNum.push(parseFloat(Number(item.scatteredNum).toFixed(0)));
      });
      let option = {
      
      
        color: ["#2394ef"],
        grid: {
      
      
          left: "1px",
          bottom: "0px",
          top: "10px",
          containLabel: true,
        },
        xAxis: {
      
      
          type: "category",
          axisLine: {
      
       lineStyle: {
      
       color: "#EFEFEF" } },
          axisLabel: {
      
      
            textStyle: {
      
      
              //改变刻度字体样式
              color: color,
              fontSize: 12,
            },
            formatter: function (value) {
      
      
              return value.split("").join("\n");
            },
          },
          data: dataName,
        },
        legend: {
      
      
          orient: "vertical",
          top: 0,
          right: 0,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          data: ["整件", "零散"],
        },
        tooltip: {
      
      
          trigger: "axis",
          axisPointer: {
      
      
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
      
      
            //格式化函数
            return (
              "总数量：" +
              parseFloat(Number(params[0].data + params[1].data).toFixed(0)) +
              "件<br />整件：" +
              parseFloat(Number(params[0].data).toFixed(0)) +
              "件<br />零散：" +
              parseFloat(Number(params[1].data).toFixed(0)) +
              "件"
            );
          },
        },
        yAxis: {
      
      
          axisLabel: {
      
      
            color: color,
            formatter: "{value}件",
          },
          axisLine: {
      
       show: true, lineStyle: {
      
       color: "#FFFFFF" } },
        },
        //    dataZoom: [
        //   {
      
      
        //     show: true,
        //     start: 0,
        //     end: 100
        //   },
        //   {
      
      
        //     type: 'inside',
        //     start: 0,
        //     end: 100
        //   },

        // ],
        series: [
          {
      
      
            name: "整件",
            type: "bar",
            stack: "total", // ! 多条数据总计 => 堆叠
            barWidth: 24,
            color: "#2D8EFF",
            itemStyle: {
      
       borderRadius: 0 },
            data: completeNum,
          },
          {
      
      
            name: "零散",
            type: "bar",
            stack: "total", // ! 多条数据总计 => 堆叠
            barWidth: 24,
            color: "#CAE1FF",
            itemStyle: {
      
       borderRadius: [12, 12, 0, 0] },
            data: scatteredNum,
          },
          {
      
      
            data: dataNum,
            type: "line",
            emphasis: {
      
      
              focus: "series",
            },
            barWidth: 1,
            lineStyle: {
      
      
              color: "transparent",
            },
            symbol: "none",
            markLine: {
      
      
              data: [
                {
      
      
                  type: "average",
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };

      if (this.param.length > 20) {
      
      
        option.dataZoom = [
          {
      
      
            type: "slider",
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 20,
            textStyle: {
      
      
              color: "#ccd7d7",
            },
            filterMode: "empty",
            bottom: 14,
          },
        ];
      }
      if (option && typeof option == "object") {
      
      
        this.chart.setOption(option);
      }
    },
  },
};
</script>