vue集成echarts，vue中npm安装echarts

安装echarts

1	npm install echarts -D

配置echarts

在项目src目录下main.js文件中加入配置：

1
2
3

import echarts from 'echarts'

Vue.use(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
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

<template>
<div id="echartId" class="o-echarts"></div>
</template>

<script>
import echarts from 'echarts'
import JSON from 'echarts/map/json/china.json'
export default {
name: "ChinaList",
data(){
return{
option: {
title: {
text: '全国疫情汇总',
subtext: '最新疫情病例数量显示',
top: '3%',
left: '5%',
textStyle: {
fontSize: 30,
fontWeight: 300,
color: 'green'
}
},
tooltip: {
padding: 0,
backgroundColor: 'transparent',
formatter: params => {
return `<div>疑似病例人数->${params.data.obj}</div> `;
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: {
min: 0,
max: 500,
show: false,
splitNumber: 5,
inRange: {
color: ['#FACD91', '#74DFB2', '#81D3F8', '#768FDE', '#e9969f'].reverse()
},
textStyle: {
color: '#fff'
}
},
geo: {
map: '中国',
label: {
normal: {
show: true,
color: '#000'
},
emphasis: {
show: true,
color: '#fff'
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#8db200',
borderColor: '#6367ad',
borderWidth: 1
},
emphasis: {
areaColor: '#feb6aa' // hover效果
}
},
left: '15%',
right: '0%',
top: '5%',
bottom: '5%'
},
series: [{
name: '区域疫情汇总',
type: 'map',
geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
data: []
}]
}
}
},
mounted() {
let jsonstr = JSON.features.map(rg => {
return {
name: rg.properties.name,
value: Math.ceil(Math.random() * 500),
obj: Math.ceil(Math.random() * 500)
}
})
this.option.series[0].data=jsonstr
let echartObj = echarts.init(document.getElementById('echartId'));
echarts.registerMap('中国', JSON);
echartObj.setOption(this.option);
}
}
</script>

<style scoped>
.o-echarts {
width:80%;
height:95%;
}
</style>