middleground_code_v2/src/components/Echarts/BarChart.vue

<!-- 柱状图，折线图 -->
<template>
  <div style="width: 100%">
    <span class="Breadcrumbs" v-if="Breadcrumbs">
      <div v-for="(item, index) in breadcrumbsList" :key="index">
        <span class="title">{{ item.title }}</span>
        <span class="Separator" v-show="index + 1 != breadcrumbsList.length"
          >/</span
        >
      </div>
    </span>
    <div :style="proportion" ref="echarts" id="echarts"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      myEcharts: null,
      option: {},
      sidebarRetract: null,
      breadcrumbsList: [
        {
          title: "首页",
        },
        {
          title: "活动管理",
        },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.myEcharts = echarts.init(this.$refs.echarts);
    this.getEcharts();
    window.addEventListener("resize", this.change);
  },

  watch: {
    "$store.getters.sidebarRetract": {
      deep: true,
      handler(val) {
        this.change();
      },
    },
    DataCollection: {
      deep: true,
      handler(newVal, oldVal) {
        this.getEcharts();
      },
    },
  },

  props: {
    // 面包屑的显示与隐藏
    Breadcrumbs: {
      type: Boolean,
      default: false,
    },
    // 尺寸
    proportion: {
      type: Object,
      default: () => {
        return {
          width: "700px",
          height: "700px",
        };
      },
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 数据集合
    DataCollection: {
      type: Object,
      require: true,
      default: () => {
        return {};
      },
    },
    // // 列标题   ['蒸发量', '渲染']
    // columnHeader: {
    // 	type: Array,
    // 	required: true,
    // 	default: () => {
    // 		return []
    // 	}
    // },
    // // 维度   ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    // Dimension: {
    // 	type: Array,
    // 	required: true,
    // 	default: () => {
    // 		return []
    // 	}
    // },
    // series: {
    // 	type: Array,
    // 	required: true,
    // 	default: () => {
    // 		return []
    // 	}
    // }
  },

  methods: {
    change() {
      this.myEcharts.resize();
    },
    getEcharts() {
      let _this = this;
      const colors = [
        "#224ef5",
        "#e33722",
        "#ffcc2c",
        "#C1232B",
        "#B5C334",
        "#FCCE10",
        "#E87C25",
        "#27727B",
        "#FE8463",
        "#9BCA63",
        "#FAD860",
        "#F3A43B",
        "#60C0DD",
        "#D7504B",
        "#C6E579",
        "#F4E001",
        "#F0805A",
        "#26C0C0",
        "#FAD860",
        "#F3A43B",
        "#60C0DD",
        "#D7504B",
        "#C6E579",
        "#F4E001",
        "#F0805A",
        "#26C0C0",
      ];
      this.option = {
        color: colors,
        title: {
          text: "", //标题
          subtext: "",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "10%",
          top: "2%",
          containLabel: true,
        },
        legend: {
          data: this.DataCollection.title,
          align: "right",
          right: 5,
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
          x: "center",
          y: "bottom",
          padding: [20, 0, 0, 0],
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true }, //数据视图
            dataView: { show: true, readOnly: false }, //折线视图
            magicType: { show: true, type: ["line", "bar"] }, //柱状视图
            restore: { show: true }, //刷新
            saveAsImage: { show: true }, //保存为图片
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLabel: { interval: 0, rotate: 60 },
            data: this.DataCollection.parameter,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            "splitLine": {
              "lineStyle": {
                "type": "dashed", // 设置为虚线
                "color": "#ccc", // 设置分隔线颜色
                "length": 10, // 虚线的长度
                "interval": 5 // 虚线的间隔
              }
            }
          },
        ],
        series: this.DataCollection.series,
      };
      this.myEcharts.setOption(this.option);
      this.myEcharts.on("click", function (params) {
        _this.echartsClick(params);
      });
    },
    echartsClick(e) {
      console.log("点击", e);
    },
  },
};
</script>
<style scoped lang="scss">
.Breadcrumbs {
  margin: 10px 0 10px 10px;
  display: flex;
  font-size: 13px;
  .title {
    cursor: pointer;
  }
  .Separator {
    display: inline-block;
    margin: 0 9px;
    color: #c0c4cc;
    font-weight: 700;
  }
}
</style>