basic.vue
2 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
<template>
<div class="chart" :id="chartId"></div>
</template>
<script>
// import echarts from 'echarts'
import echarts from "@/third-party/echart_lib";
import { optionFormatter } from "@/utils/dealChart";
import downloadIcon from "@/assets/img/export.png";
import i18n from "@/assets/i18n/i18n";
export default {
name: "Charts",
props: {
chartId: {
type: String,
default: () => 'chart_'+Math.random().toString(16).substr(2,5)
},
chartData: {
type: Object,
default: () => {}
}
},
filters: {
},
watch: {
chartData: {
handler(newVal, val) {
// draw chart
newVal && this.drawEchart(newVal);
},
deep: true
}
},
data() {
return {
chart: null,
downloadIcon: "image://" + downloadIcon,
};
},
mounted() {
this.initChart();
this.drawEchart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart =
echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
echarts.init(document.getElementById(this.chartId));
},
drawEchart(){
if(!this.chartData)return;
this.chart.clear();
if(!this.chartData.hideLoading){
if(!this.chart.loading){
/*this.chart.showLoading("default", {
text: "",
color: "#409eff"
});*/
}
/*setTimeout(() => {
if (this.chart) {
this.chart.loading = false;
this.chart.hideLoading();
}
}, 500);*/
}
this.chart.setOption(this.dealOption());
},
/**
* option 部分chart特殊处理
**/
dealOption(){
let optionFormat = Object.assign({},this.chartData);
optionFormat.color = optionFormat.color || ['#5A8DEE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
return optionFormat;
}
}
};
</script>