echarts 使用案例(demo)
# js版本
# HTML
<div id="myChart"></div>
1
# javaScript
//防止出现 echarts.js:28681 There is a chart instance already initialized on the dom. 警告
if (myEcharts != null && myEcharts != "" && myEcharts != undefined) {
myEcharts.dispose();
};
// 初始化
let myEcharts = echarts.init(document.querySelector('#myChart'));
//显示加载动画( 根据需求自行添加 )
myEcharts.showLoading({
text: '加载中...',
color: '#c23531',
textColor: '#fff',
maskColor: 'transparent',
});
//装载配置项
let option = {}; // 请参考tab页的 Option配置,直接替换即可。
myEcharts.setOption(option, true);
//清除点击事件防止多次触发
myEcharts.off("click");
//图谱点击事件绑定
myEcharts.on("click", param => {
//做一些逻辑处理事件
console.log(param);
});
//监听浏览器窗口变化 自适应 注意:只在浏览器窗口发生改变时才会触发
window.addEventListener("resize", () => {
myEcharts.resize();
});
//关闭加载动画( 根据需求自行添加 )
myEcharts.hideLoading();
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
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
# vue版本
<template>
<div class="chart" ref="chart"></div>
<!-- <div class="chart" :style="{height:height+'px',width:'100%'}" ref="chart"></div> -->
</template>
<script>
export default {
name: "chart",
data: () => ({
myEcharts: null,
height: 520,
}),
// 使用 props 传参
props: ["content"],
watch: {
content(val) {
if (!this.myEcharts) {
this.$nextTick(() => {
this.showLoading("加载中...", true, "#2d8cf0");
if (val && val.show) {
this.setChart();
} else {
this.showLoading("暂无数据", false, "#666");
}
});
}
}
},
mounted() {
// this.setHeight();
this.$nextTick(() => {
if (!this.myEcharts) {
this.myEcharts = this.$echarts.init(this.$refs.chart);
this.setChart();
//监听窗口变化 自适应( 根据需求自行添加 )
window.addEventListener("resize", this.resize, true);
}
});
},
methods: {
showLoading(text, showSpinner, textColor) {
//显示加载动画( 根据需求自行添加 )
this.myEcharts.showLoading({
text,
showSpinner,
color: "#2d8cf0",
textColor,
// maskColor: "#2d8cf0",
});
},
setChart() {
if (this.content) {
let option = {};
// 将 option 注册到 echarts 中
this.myEcharts.setOption(option, true);
// 添加点击事件( 根据需求自行添加 )
this.myEcharts.off("click");
this.myEcharts.on("click", (param) => {
//根据需求做逻辑处理
// console.log(param);
});
//隐藏动画效果( 根据需求自行添加 )
this.myEcharts.hideLoading();
}
},
// setHeight() {
// this.height =
// document.body.clientHeight || document.documentElement.clientHeight;
// },
resize() {
// this.setHeight();
this.myEcharts.resize();
},
},
beforeDestroy() {
if (this.myEcharts) {
window.removeEventListener("resize", this.resize, true);
this.myEcharts.clear();
this.myEcharts.dispose();
}
}
};
</script>
<style lang="scss" scoped>
.chart {
height: 600px;
width: 100%;
}
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
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
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13