vue封装折柱图

最新推荐文章于 2024-06-06 16:31:44 发布

小橘子皮__兜兜

最新推荐文章于 2024-06-06 16:31:44 发布

阅读量84

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_43657954/article/details/130085696

版权

该文章展示了一个基于Vue的ECharts组件，用于创建条形图和折线图。组件接受各种配置属性如数据、坐标轴、图例等，并在数据变化时更新图表。当数据为空时，组件会显示自定义的空数据占位符。组件利用混入(mixins)来复用代码并简化维护。

摘要由CSDN通过智能技术生成

<template>
  <div class="chart-wrap">
    <div v-show="!isEmpty" class="chart" ref="chart" v-resize="resizeChart"></div>
    <EmptyData v-show="isEmpty"></EmptyData>
  </div>
</template>

<script>
import chartMixins from '../mixins'
import EmptyData from '_com_c/EmptyData' //这里用自己的路径
export default {
  name: 'ComBar',
  props: {
    data: {
      type: [Array, null],
      default () {
        return [];
      }
    },
    yAxis: {
      type: [Array, Object],
      default () {
        return [];
      }
    },
    xAxis: {
      type: [Array, Object],
      default () {
        return [];
      }
    },
    legend: {
      type: Object,
      default () {
        return {}
      }
    },
    grid: {
      type: [Array, Object],
      default () {
        return {}
      }
    },
    tooltip: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    isEmpty () {
      if (this.data !== undefined && this.data !== null && this.data.length > 0) {
        return this.data[0].data === null || this.data[0].data === undefined || this.data[0].data.length === 0
      }
      return this.data === null || this.data === undefined || this.data.length === 0
    }
  },
  methods: {
    createChart () {
      if (!this.isEmpty) {
        const option = this.getOption();
        this.initCharts(option);
      }
    },
    getOption () {
      const option = {
        tooltip: this.getTooltip(this.tooltip),
        legend: this.getLegend(this.legend),
        grid: this.getGrid(this.grid),
        yAxis: this.getAxis(this.yAxis),
        xAxis: this.getAxis(this.xAxis),
        series: this.getSeries(this.data)
      };
      return option;
    },
    updateChart (option, replaceMerge) {
      if (!this.isEmpty) {
        this.$nextTick(() => {
          if (this.charts) {
            this.charts.setOption(option, replaceMerge);
            this.resizeChart();
          } else {
            this.createChart();
          }
        });
      }
    }
  },
  mounted () {
    this.createChart();
  },
  beforeDestroy () {
  },
  watch: {
    // handler immediate deep
    data: {
      handler () {
        const option = {
          series: this.getSeries(this.data)
        };
        this.updateChart(option, {
          replaceMerge: 'series'
        });
      },
      deep: true
    },
    yAxis: {
      handler () {
        const option = {
          yAxis: this.getAxis(this.yAxis)
        };
        this.updateChart(option, {
          replaceMerge: 'yAxis'
        });
      },
      deep: true
    },
    xAxis: {
      handler () {
        const option = {
          xAxis: this.getAxis(this.xAxis)
        };
        this.updateChart(option, {
          replaceMerge: 'xAxis'
        });
      },
      deep: true
    },
    tooltip: {
      handler () {
        const option = {
          tooltip: this.getAxis(this.tooltip)
        };
        this.updateChart(option, {
          replaceMerge: 'tooltip'
        });
      },
      deep: true
    },
    legend: {
      handler () {
        const option = {
          legend: this.getLegend(this.legend)
        };
        this.updateChart(option, {
          replaceMerge: 'legend'
        });
      },
      deep: true
    },
    grid: {
      handler (grid) {
        const option = {
          grid: this.getGrid(grid)
        };
        this.updateChart(option, {
          replaceMerge: 'grid'
        });
      },
      deep: true,
      // immediate: true
    }
  },
  components: {
    EmptyData
  },
  mixins: [chartMixins]
}
</script>

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

vue组件中使用

<div class="charts1">
     <ComBarLine
        :data="BarLine.data"
        :xAxis="BarLine.xAxis"
        :yAxis="BarLine.yAxis"
        :legend="BarLine.legend"
     ></ComBarLine>
</div>

、、、
import ComBarLine from "_com_c/Charts/ComBarLine"; //注意，使用自己的路径

data(){
return {
//需要什么自己配
 BarLine: {
        legend: {
          left: "center",
          top: 252,
          type: "scroll",
          itemGap: 40, //间距
        },
        data: [
          {
            name: "供货数量",
            type: "bar",
            barWidth: 14,
            data: [],
            itemStyle: {
              barBorderRadius: [11, 11, 0, 0],
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#63c082", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#a4d8b3", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            name: "合格率",
            type: "line",
            itemStyle: {
              color: "#FCCF89",
            },
            lineStyle: {
              color: "#FCCF89",
            },
            showSymbol: false,
            data: [],
            yAxisIndex: 1,
          },
        ],
        xAxis: {
          data: [],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, //隐藏x轴刻度线
          },
        },
        yAxis: [
          {
            type: "value",
            show: true,
            name: "单位：个",
            nameTextStyle: { // y轴name的样式调整
              padding: [0, 50, 0, 0] // 加上padding可以调整其位置
            },
            axisTick: {
              show: false, //刻度线
            },
            axisLine: {
              show: false, //隐藏y轴
            },
          },
          {
            type: "value",
            name: "单位：%",
            axisTick: {
              show: false, //刻度线
            },
            axisLine: {
              show: false, //隐藏y轴
            },
            splitLine: {
              show: false, //隐藏y轴线
            },
          },
        ],
      },
}
}
、、、
components: {  ComBarLine },

、、、
//注意一定要加高度，不然图出不来
.charts1 {
  width: 100%;
  height: 270px;
}

EmptyData---暂无数据，图没数据的时候显示，一般放在公共里直接用

<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>
export default {
  name: 'EmptyData',
  props: {
    text: {
      type: String,
      default: '暂时没有数据哦'
    }
  },
  data () {
    return {}
  },
  computed: {},
  methods: {},
  mounted () {
  },
  beforeDestroy () {
  },
  watch: {
    // handler immediate deep
  },
  components: {}
}
</script>

<style scoped lang="less">
.empty-data {
  height: 100%;
  padding: 20px;
}
</style>