(echarts)折线图封装相关总结及使用

(echarts)单/多折线图封装相关总结及使用

---

---

返回数据格式：

---

一、单折线、多折线通用封装组件linesCharts.vue

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "@/components/Charts/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    xData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    chartData: {
      type: Object,
      default: function () {
        return {
          data: [150, 230, 224, 218, 135, 147, 260],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart1() {
      this.chart = echarts.init(document.getElementById(this.id), "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartObj) {
      this.chart.setOption({
        //线颜色
        color: ["#52A8FF", "#91cc75"],
        //标签
        tooltip: {
          trigger: "axis",
        },
        //图例
        legend: {
          data: chartObj.name,
        },
        xAxis: {
          type: "category",
          data: chartObj.date,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
        },
        series: chartObj.data,
      });
    },
  },
};
</script>

<style>
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

---

二、页面使用

<div class="charts">
 <lines-chart :id="'pieChart0'" :height="'420px'" :chart-data="echartsData" />
</div>

<script>
import LinesChart from "@/components/Charts/linesChart"
export default { 
	components: { LinesChart},//组件注册
	data(){
		return:{		
	      echartsData: {
	        name: " ",
        	data: [],
	      },
		}
	},
	methods:{		
	    // 月销量对比
	    monthSalesComparison(params) {
	      monthSalesComparison(params).then((res) => {
	        if (res.code == 200) {
	          res.data.data.forEach((element) => {
	            this.$set(element, "type", "line");//给每条数据添加type字段，值为line
	          });
	          this.echartsData = res.data;
	        }
	      });
	    },
	}
}
</script>

// 样式
.charts {
    height: 420px;
    box-sizing: border-box;
    border: 1px solid rgb(213, 223, 232);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

---

拓展:自适应可引下边resize.js文件或myChart.resize()【在另一篇文章有写用法】

---

resize.js

import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }

    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57