(echarts)热度图封装相关总结及使用

(echarts)热度图封装相关总结及使用

---

---

一、封装组件heatChart.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 {
          //过长可去echarts插件的热力图例子复制
          hours: ["12a", "1a", ...],
          days: [ "Saturday", "Friday", ...],
          data: [[0, 0, 5], [0, 1, 1], ...],//[y坐标，x坐标，值]，也可用对应值显示["Saturday","12a",5]
        };
      },
    },
  },
  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({
        //显示标签 
        tooltip: {
          position: "top",
        },
        grid: {
          height: "50%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          data: chartObj.hours,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: chartObj.days,
          splitArea: {
            show: true,
          },
        },
        //图例
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "15%",
        },
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: chartObj.data.map(function (item) {
              return [item[1], item[0], item[2] || "-"];
            }),//数据处理为[x轴，y轴，值]顺序无值时赋‘-’
            label: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

---

二、页面使用

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

<script>
import HeatChart from "@/components/Charts/heatChart";
export default { 
	components: { HeatChart},//组件注册
	data(){
		return:{		
	      echartsData: {
	          //过长可去echarts插件的热力图例子复制
	          hours: ["12a", "1a", ...],
	          days: [ "Saturday", "Friday", ...],
	          data: [[0, 0, 5], [0, 1, 1], ...],//[y坐标，x坐标，值]，也可用对应值显示["Saturday","12a",5]
	        },
		}
	}
}
</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

---

拓展:自适应可引下边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