chart-base.vue
2.13 KB
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
<!--
* @Description:
* @Date: 2021-06-15 19:55:05
-->
<!--
* @Description:
* @Date: 2020-07-16 18:27:04
-->
<template>
<div class="ebox" :id="uuid">
<slot class="table" name="map" />
</div>
</template>
<script>
// import { v4 } from 'uuid';
/**
* echart 配置
*/
import { use, init, registerMap } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart, LineChart, MapChart } from 'echarts/charts';
import china from '../chart-type/json/china.json';
// import chinaMapOutline from '../chart-type/json/chinaMapOutline.json';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
DatasetComponent,
PolarComponent,
VisualMapComponent
} from 'echarts/components';
use([
SVGRenderer,
BarChart,
PieChart,
LineChart,
MapChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
DatasetComponent,
PolarComponent,
VisualMapComponent
]);
export default {
props: {
option: {
type: Object,
default: () => ({})
},
type: [Number, String],
autoresize: Boolean
},
data() {
return {
uuid: `${parseInt(Math.random())}-${new Date().getTime()}`,
myChart: null,
height: 0,
imgUrl: ''
};
},
watch: {
option: {
deep: true,
immediate: true,
handler(v) {
if (v) {
this.$nextTick(() => {
this.init();
});
}
}
}
},
methods: {
init() {
if (!this.myChart) {
if (this.type === 13) {
registerMap('china', china);
// registerMap('chinaMapOutline', chinaMapOutline);
}
this.myChart = init(document.getElementById(this.uuid));
}
this.myChart.setOption(this.option);
// this.imgUrl = this.myChart.getDataURL({
// type: 'png',
// pixelRatio: 1, //放大2倍
// backgroundColor: '#fff'
// });
}
},
mounted() {},
created() {}
};
</script>
<style lang="scss">
.ebox.hide > div {
opacity: 0;
}
</style>
<style scoped lang="scss">
.ebox {
display: flex;
& + .ebox {
margin-top: 80px;
}
}
</style>