echarts的使用# Echarts 图集
# 引入包
npm install echarts -s
1
# 组件中导入
//app.vue
<template>
<div id="map">
</div>
</template>
<script setup lang='ts'>
import { onMounted } from "vue";
// import echarts from "echarts"//4.x的导入方式
import * as echarts from "echarts" //5.x需要取别名将全部API变成对象导入
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 中国地图配置参考
chinaMap(id, data) {
var myChart = echarts.init(document.getElementById(id));
var option = {
tooltip: {
//悬浮弹框
trigger: "item", //提示框触的条件
enterable: true, //鼠标是否可进入提示框浮层中,默认为false
// 点击后的触发事件或展示内容
formatter(item) { //item=下面serves里面的data里面的每一项//[{}]data={}abcd1
return item.name + item.value + '人'
// <a style='color:#fff;' href='#/city/" + item.name + "'>" + item.name + ':确诊人数' + item.value
}
},
legend: {
orient: 'horizontal', //图例的排列方向
textStyle: {
color: '#FFA500'
},
x: 'left', //图例的位置
y: '20',
data: ['全国数据']
//图例的名字就是下面series中的name
},
visualMap: [{ //映射高亮颜色
orient: "vertical", //水平
textStyle: {
color: '#fff'
},
type: "piecewise", //离散
bottom: 0,
pieces: [ //配置颜色区间
{
min: 0,
max: 0,
color: "#7cd130"
},
{
min: 1,
max: 100,
color: "#fbf042"
}, {
min: 100,
max: 1000,
color: "#f97703"
}, {
min: 1000,
max: 5000,
color: "#ef262b"
}, {
min: 5000,
color: "#7d0c0f"
}
]
}],
series: [{
name: '全国数据',
type: "map", //地图 bar line map
mapType: 'china', //中国地图 需要引入地图China.js
roam: false, //是否开启鼠标缩放和平移漫游
showLegendSymbol: false,
zoom: 1.2,
aspectScale: 0.75,
top: 60, //组件距离容器的距离
// layoutCenter: ['5%', '5%'],
// lable: {//配置字体
// normal: {
// show: true,
// textStyle: {
// fontSize: 2
// }
// }
// },
itemStyle: {
normal: { //默认状态下的样式
label: { //标签样式
show: true,
// 标签样式
textStyle: {
color: "#fff",
fontSize: 13
}
},
areaColor: '#206fd3',
borderColor: 'rgba(0,0,0,0.2)',
},
emphasis: { //选中的区域颜色及阴影效果等
areaColor: '#1bb1f0',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
}
},
//data数据
data
// data: [
// { name: '内蒙古', value: 200 },
// { name: '北京', value: 800 }]
}]
}
})
myChart.setOption(option);
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
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
# 修改 China.js 源码
由于不可知原因，Echarts 下架了地图，导致原地图文件与现在都 5.x 版本不兼容，修改 China.js 源码使其适配 Echarts 5.x 版本
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log('ECharts is not Loaded');
return;
}
if (!echarts.registerMap) {
log('ECharts Map is not loaded')
return;
}
//将以上所有代码替换成
import * as echarts from 'echarts'
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
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