echarts折线图封装案例

一、封装代码

<template>
  <div class="echarts" ref="chart"></div>
</template>

<script>
const echarts = require("echarts");

import { mapGetters } from "vuex";
import "echarts/theme/macarons.js";
export default {
  name: "line_chart",
  props: {
    barData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
      chart: null,
      xData: [],
      yData: [],
      sdata: [],
      legendData: []
    };
  },

  components: {},

  computed: {
    ...mapGetters(["isCollapse"])
  },
  watch: {
    barData: {
      handler () {
        this.initCharts();
      },
      deep: true
    },
    isCollapse: {
      handler () {
        setTimeout(() => {
          this.chart.resize();
        }, 500);
      },
      deep: true
    }
  },
  mounted () {
    this.initCharts();
    this.resizeChart();
  },
  beforeDestroy () {
    window.onresize = null;
  },
  methods: {
    resizeChart () {
      var that = this;
      window.addEventListener("resize", function () {
        that.chart.resize();
      });
    },
    initCharts () {
      this.chart = echarts.init(this.$refs.chart, "macarons");
      this.barData.xdata && (this.xData = this.barData.xdata);
      this.barData.ydata && (this.yData = this.barData.ydata);
      this.barData.legend && (this.legendData = this.barData.legend);
    //   this.changeCharts();
      this.setChartOption();
    },
    setChartOption () {
      //this.chart.setOption(option,true)第二个参数为true可以解决重新渲染问题
      this.chart.setOption(
        {
        title: {
        text: '电流趋势图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['全电流有效值', '阻性电流有效值', '容性电流有效值']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        // feature: {
        //     saveAsImage: {}
        // }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['05-12', '05-14', '05-21', '05-22', '05-23', '05-27', '05-31']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '全电流有效值',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '阻性电流有效值',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '容性电流有效值',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]
        },
        true
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

二、使用

2.1、提取

import piechart from "./components/piechart"
import piechart1 from "./components/piechart2"
export default {
components:{
    piechart,
    piechart1
},

2.2、使用

  <piechart />