柱状图echarts

父组件： <ordinary-bar
                id="shiftOuput"
                :data="shiftOuputData"
                :options="shiftOuputOptions"
              >
              </ordinary-bar>

      shiftOuputData: [
        { name: "早班", value: "350" },
        { name: "中班", value: "300" },
        { name: "晚班", value: "230" },
      ],


      shiftOuputOptions: {
        xAxisKey: "name",
        yname: "吨",
        barWidth: this.fontSize(16),
        grid: {
          top: "15%",
          left: "5%",
          right: 0,
          bottom: "30%",
        },
        keys: [
          {
            name: "班产量",
            val: "value",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#148EFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1D54E1", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                barBorderRadius: [3, 3, 3, 3],
              },
            },
          },
        ],
      },
子组件：
<template>
  <!--  普通柱状图 -->
  <div :id="id" :style="{ height: height, width: width }"></div>
</template>
<script>
import resize from "@/views/mixins/resize";

export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    //数据(xy)
    data: {
      type: Array,
      default: [],
    },
    options: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    data: {
      handler(newName, oldName) {
        this.ordinaryBar();
      },
      deep: true, //深度监听
      immediate: false, //初次绑定执行
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    ordinaryBar() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      let series = this.options.keys.map((i, index) => {
        return {
          name: i.name,
          type: "bar",
          data: this.data.map((v) => v[i.val]),
          barMinHeight: this.options.barMinHeight,
          barGap: this.options.barGap,
          barCategoryGap: this.options.barCategoryGap,
          itemStyle: i.itemStyle ? i.itemStyle : {},
          barWidth: this.options.barWidth,
          label: i.label ? i.label : {},
          silent: true,
        };
      });
      let option = {
        //调用成功次数
        grid: this.options.grid
          ? this.options.grid
          : {
              top: "15%",
              left: "5%",
              right: "5%",
              bottom: "10%",
            },
        tooltip: {
          show: true,
          trigger: "axis", //axis , item//鼠标移入Y轴竖条样式
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(126,199,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(126,199,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(126,199,255,0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          backgroundColor: "RGBA(0, 49, 85, 1)",
          borderColor: "rgba(0, 151, 251, 1)",
          borderWidth: 1,
          borderRadius: 0,
          textStyle: {
            color: "#BCE9FC",
            fontSize: this.fontSize(12),
            align: "left",
          },
        },
        legend: {
          show: this.options.keys.length > 1 ? true : false,
          icon: "roundRect",
          itemWidth: this.options.legend
            ? this.options.legend.itemWidth
            : this.fontSize(17),
          itemHeight: this.options.legend
            ? this.options.legend.itemHeight
            : this.fontSize(10),
          borderRadius: 5,
          itemGap: 13,
          data: this.options.keys.map((v) => v.name),
          top: "5%",
          right: "5%",
          textStyle: {
            fontSize: this.options.legend
              ? this.options.legend.fontSize
              : this.fontSize(12),
            color: "#666",
          },
        },
        color: this.options.color > 0 ? this.options.color : [],
        xAxis: [
          {
            type: "category",
            boundaryGap: true, //坐标轴两边留白
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: this.options.axisLineColor
                  ? this.options.axisLineColor
                  : "#BFBFBF",
              },
            },
            axisLabel: {
              interval: 0,
              rotate: 45,
              margin: 10,
              show: true,
              align: "center",
              fontSize: this.fontSize(12),
              color: this.options.axisLineColor
                ? this.options.axisLineColor
                : "#666",
            },
            data: this.data.map((i) => i[this.options.xAxisKey]),
          },
        ],
        yAxis: {
          name: this.options.yname,
          nameTextStyle: {
            color: "#666",
            fontSize: this.fontSize(12),
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#BFBFBF",
            },
          },

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#BFBFBF",
            },
          },
          axisLabel: {
            show: true,
            align: "center",
            fontSize: this.fontSize(12),
            color: this.options.axisLineColor
              ? this.options.axisLineColor
              : "#666",
          },
        },
        dataZoom: this.options.dataZoom || [
          {
            type: "slider",
            show: true,
            bottom: "20px",
            borderColor: "#07417a",
            backgroundColor: "transparent",
            dataBackground: {
              lineStyle: {
                color: "transparent",
                shadowOffsetY: 0,
              },
              areaStyle: {
                color: "transparent",
                shadowOffsetY: 0,
              },
            },
            // 拖拽手柄样式 svg 路径
            handleColor: "#aab6c6",
            height: 6,
            handleSize: 12,
            showDataShadow: false,
            filterMode: "filter",
            textStyle: {
              color: "#ccc",
            },
            start: 0,
            end: 100,
          },
        ],
        series,
      };
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 300);
    },
  },
  mounted() {
    this.ordinaryBar();
  },
};
</script>