echarts图表封装组件 通用模板

<template>
  <div v-if="data.length > 0" class="chart" v-resize="resizeCharts" ref="barchart"></div>
  <EmptyData v-else text="暂无数据"></EmptyData>
</template>
<script>
import * as echarts from "echarts";
import { EmptyData } from "@common/OtherComp";
export default {
  name: "barchart",
  components: {
    EmptyData,
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      charts: null,
    };
  },
  computed: {},
  methods: {
    resizeCharts() {
      this.charts.resize();
    },
    initCharts() {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barchart);
        this.charts.clear();
        this.setOption();
      });
    },
    setOption() {
      const _this = this;
      const option = this.getOption();
      this.charts.setOption(option, true);
      this.charts.off("click");
      this.charts.on("click", function (series) {
        const params = {
          name: series.name,
          value: series.value,
        };
        _this.$emit("jumpPage", params);
      });
    },
    getOption() {
      const option = {
        tooltip: {
          trigger: "item",
          padding: [10, 16],
          formatter(series) {
            return `<div>${series.marker} ${series.name}分:  ${series.value}</div>`;
          },
        },
        legend: {},
        grid: {
          bottom: 30,
          top: 30,
        },
        xAxis: {
          type: "category",
          data: ["60-70", "71-80", "81-90", "91-100"],
          axisLabel: {
            formatter(val) {
              return val + "分";
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: this.data,
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    fontSize: 12,
                  },
                },
                color: function (params) {
                  var colorList = ["#ff761b", "#379dd5", "#ffbd00", "#58af4e"];
                  return colorList[params.dataIndex];
                },
                barBorderRadius: [10, 10, 0, 0],
              },
            },
          },
        ],
      };
      return option;
    },
  },
  mounted() {
    this.initCharts();
  },
  beforeDestroy() {
    this.charts && this.charts.dispose();
    this.charts = null;
  },
  watch: {
    // handler immediate deep
    data: {
      handler() {
        if (this.charts) {
          this.setOption();
        } else {
          this.initCharts();
        }
      },
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.chart {
  width: 100%;
  height: 100%;
}
</style>

把option替换成你需要的就可以

暂无数据组件

<template>
  <div class="empty-data">
    <div class="data-empty">
      <div class="data-empty-cont">
        <div class="data-empty-icon">
          <slot name="icon">
            <common-icon type="_icon_em" :size="36" />
          </slot>
        </div>
        <div class="data-empty-text">
          <slot name="text">
            <i></i>
            <span>{{ text }}</span>
            <i></i>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonIcon from "../CommonIcon";
export default {
  name: "EmptyData",
  components: {
    CommonIcon,
  },
  props: {
    text: {
      type: String,
      default: "暂无数据,请及时维护！",
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {
    // handler immediate deep
  },
  mounted() {},
  beforeDestroy() {},
  methods: {},
};
</script>

<style scoped lang="less">
.empty-data {
  height: 100%;
  padding: 20px;
  .data-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &-cont {
      overflow: hidden;
    }

    &-icon {
      text-align: center;
      color: #ddd;
    }

    &-text {
      font-size: 12px;
      color: #ddd;
      overflow: hidden;

      i,
      span {
        float: left;
      }

      i {
        width: 60px;
        border-bottom: 1px solid #ddd;
        padding-top: 9px;
      }

      span {
        padding: 0 10px;
      }
    }
  }
}
</style>

icon组件

<template>
  <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize" />
</template>

<script>
import Icons from '../icons'

export default {
  name: 'CommonIcon',
  components: {Icons},
  props: {
    type: {
      type: String,
      required: true,
    },
    color: String,
    size: Number,
  },
  computed: {
    iconType() {
      return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
    },
    iconName() {
      return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
    },
    iconSize() {
      return this.size || (this.iconType === 'Icons' ? 12 : undefined)
    },
    iconColor() {
      return this.color || ''
    },
  },
  methods: {
    getCustomIconName(iconName) {
      return iconName.slice(1)
    },
  },
}
</script>

<style></style>

<template>
  <i :class="`iconfont icon-${type}`" :style="styles"></i>
</template>

<script>
export default {
  name: 'Icons',
  props: {
    type: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#5c6b77',
    },
    size: {
      type: Number,
      default: 16,
    },
  },
  computed: {
    styles() {
      return {
        fontSize: `${this.size}px`,
        color: this.color,
      }
    },
  },
}
</script>

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