Echarts二次封装

//柱状图
<template>
  <div :id="chartId"></div>
</template>
<script>
export default {
  name: "bar-chart",
  props: [
    "chartId",
    "chartOpts",
    "chartClick",
    "barNumber",
    "scroll",
    "chartmouseover",
    "chartmouseout",
  ],
  data() {
    return {
      width: undefined,
      height: undefined,
      scrollX: undefined,
      scrollY: undefined,
      legend: [],
    };
  },
  mounted() {
    let chart = document.getElementById(this.chartId);
    this.charts = this.$echarts.init(chart);
    this.$nextTick(() => {
      this.setOpts();
    });
  },
  updated() {
    this.setOpts();
  },
  methods: {
    setOpts() {
      if (this.chartOpts && this.chartOpts.series !== undefined) {
        let len = 0,
          xAxis,
          yAxis;
        if (this.chartOpts.xAxis instanceof Array) {
          xAxis = this.chartOpts.xAxis[0];
        } else {
          xAxis = this.chartOpts.xAxis;
        }
        if (this.chartOpts.yAxis instanceof Array) {
          yAxis = this.chartOpts.yAxis[0];
        } else {
          yAxis = this.chartOpts.yAxis;
        }
        if (this.chartOpts.series && this.chartOpts.series.length) {
          this.chartOpts.series.forEach((item) => {
            if (item.stack) {
              if (xAxis && xAxis.type === "category") {
                len = xAxis.data.length;
              }
              if (yAxis && yAxis.type === "category") {
                len = yAxis.data.length;
              }
            } else {
              len += item.data.length;
            }
          });
        }
        if (this.scroll !== false) {
          if (xAxis.type === "category" && len > (this.barNumber || 6)) {
            //给x轴设置滚动条
            // eslint-disable-next-line vue/no-mutating-props
            this.chartOpts.dataZoom = [
              {
                start: 0.5, //默认为0
                end: this.GetPercent(this.barNumber || 6, len), //默认为100
                type: "slider",
                show: true,
                height: 0, //组件高度
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                borderRadius: 13,
                backgroundColor: "rgba(0, 0, 0, 0)", //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                moveHandleIcon: "none",
                moveHandleSize: 10,
                moveHandleStyle: {
                  color: "#fff",
                  backgroundColor: "#000",
                  borderColor: "#000",
                  borderWidth: 1,
                  borderRadius: 5,
                  borderCap: "butt",
                },
                fillerColor: "#fff",
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                filterMode: "filter",
                bottom: "12px",
              },
            ];
          }
          if (yAxis.type === "category" && len > (this.barNumber || 5)) {
            //给x轴设置滚动条
            // eslint-disable-next-line vue/no-mutating-props
            this.chartOpts.dataZoom = [
              {
                start: 100, //默认为0
                end: 100 - this.GetPercent(this.barNumber || 5, len), //默认为100
                type: "slider",
                show: true,
                width: 0,
                height: "80%", //组件高度
                right: 15,
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                borderRadius: 13,
                backgroundColor: "rgba(0, 0, 0, 0)", //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                moveHandleIcon: "none",
                moveHandleSize: 10,
                moveHandleStyle: {
                  color: "#fff",
                  backgroundColor: "#000",
                  borderColor: "#000",
                  borderWidth: 1,
                  borderRadius: 5,
                  borderCap: "butt",
                },
                fillerColor: "#fff",
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                filterMode: "filter",
                yAxisIndex: [0], //控制的 y轴
              },
            ];
          }
        }
        this.charts.setOption({ ...this.chartOpts }, true);
        this.charts.resize({
          width: "auto",
          height: "auto",
        });
        if (this.chartClick) {
          let that = this;
          this.charts.on("click", function (params) {
            that.chartClick(params);
          });
        }
        if (this.chartmouseover) {
          let that = this;
          this.charts.on("mouseover", function (params) {
            that.chartmouseover(params);
          });
        }
        if (this.chartmouseout) {
          let that = this;
          this.charts.on("mouseout", function (params) {
            that.chartmouseout(params);
          });
        }
      }
    },
    GetPercent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0
        ? 0
        : Math.ceil(Math.round((num / total) * 10000) / 100);
    },
  },
};
</script>

//半圆饼图

<template>
    <div :id="chartId"></div>
</template>
<script>
export default {
    name: 'clip-pie',
    props: ['chartId', 'chartOpts'],
    data(){
        return {
            chart: undefined
        }
    },
    mounted(){
        this.chart = new this.$G2.Pie(this.chartId, {
            // appendPadding: 10,
            data: [],
            appendPadding: -40,
            angleField: 'value',
            colorField: 'type',
            padding: [80, 80,100, 80],
            radius: 1,
            // 设置圆弧起始角度
            
            startAngle: Math.PI,
            endAngle: Math.PI * 2,
            innerRadius: 0.8,
            statistic: {
                title: false,
                content: {
                    formatter: () => ''
                }
            }
        });
        this.chart.render()
    },
    updated(){
        this.chart.update({
            ...this.chartOpts
        });
    }
}
</script>
<style lang="less">

</style>

//折线图
<template>
  <div :id="chartId">
    <div class="nodata">
      <img src="@/assets/nodata.png" alt="暂无数据" />
      <span>暂无数据</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "line-chart",
  props: ["chartId", "chartOpts", "chartClick", "updateAxisPointer"],
  mounted() {
    if (!this.nodata) {
      let chart = document.getElementById(this.chartId);
      this.charts = this.$echarts.init(chart);
      this.$nextTick(() => {
        this.setOpts();
      });
    }
  },
  updated() {
    if (!this.nodata) {
      this.setOpts();
    }
  },
  methods: {
    setOpts() {
      if (this.chartOpts) {
        this.charts.setOption({ ...this.chartOpts }, true);
        this.charts.resize({
          width: "auto",
          height: "auto",
        });
        if (this.chartClick) {
          let that = this;
          this.charts.on("click", function (params) {
            that.chartClick(params);
          });
        }
        if (this.updateAxisPointer) {
          let that = this;
          this.charts.on("updateAxisPointer", function (event) {
            that.updateAxisPointer(event);
          });
        }
      }
    },
  },
};
</script>

//雷达图
<template>
  <div :id="chartId">
    <div class="nodata">
      <img src="@/assets/nodata.png" alt="暂无数据" />
      <span>暂无数据</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "radar-chart",
  props: ["chartId", "chartOpts", "chartClick"],
  mounted() {
    if (!this.nodata) {
      let chart = document.getElementById(this.chartId);
      this.charts = this.$echarts.init(chart);
      this.$nextTick(() => {
        this.setOpts();
      });
    }
  },
  updated() {
    if (!this.nodata) {
      this.setOpts();
    }
  },
  methods: {
    setOpts() {
      if (this.chartOpts) {
        this.charts.setOption({ ...this.chartOpts }, true);
        this.charts.resize({
          //   width: "auto",
          //   height: "auto",
        });
        if (this.chartClick) {
          let that = this;
          this.charts.on("click", function (params) {
            that.chartClick(params);
          });
        }
      }
    },
  },
};
</script>