1.搭建vue-cli项目
2.安装echarts
$ yarn add echarts
3.main.js引入echarts
1 import echarts from 'echarts' 2 Vue.prototype.$echarts = echarts // 把echarts挂载到Vue原型
4.直接上Home.vue代码
1 <template>
2 <div class="home">
3 <div id="echarts_pie" class="echarts"></div>
4 <div id="echarts_bar" class="echarts"></div>
5 <div id="echarts_line" class="echarts"></div>
6 </div>
7 </template>
8
9 <script>
10
11 export default {
12 name: 'Home',
13 data() {
14 return {
15 myEcharts: null
16 }
17 },
18 methods: {
19 initEcharts() {
20 var echartsPie = this.$echarts.init(document.getElementById('echarts_pie'))
21 var echartsBar = this.$echarts.init(document.getElementById('echarts_bar'))
22 var echartsLine = this.$echarts.init(document.getElementById('echarts_line'))
23 echartsPie.setOption({
24 title: {
25 text: '运动员分布图', // 图标标题
26 },
27 series: [{
28 name: '运动员分布图',
29 type: 'pie', // 图类型-饼图
30 radius: '55%', // 图占容器大小
31 data: [ // 饼图数据格式
32 {
33 value: 235,
34 name: '珠三角',
35 itemStyle: {
36 color: 'skyblue', // 某一项的颜色
37 }
38 },
39 {
40 value: 123,
41 name: '粤东',
42 itemStyle: {
43 color: 'orange'
44 }
45 },
46 {
47 value: 154,
48 name: '粤西',
49 itemStyle: {
50 color: 'yellowgreen'
51 }
52 },
53 {
54 value: 88,
55 name: '粤北',
56 itemStyle: {
57 color: 'pink'
58 }
59 }
60 ],
61 itemStyle: {
62 normal: {
63 shadowBlur: 20, // 阴影散发长度
64 shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
65 label: {
66 show: true, // 是否显示标识文字
67 fontSize: 16, // 字体大小，单位px
68 formatter: '{b} : {c} ({d}%)', // a=>series.name b=>series.data.name c=>series.data.value, d=>占比
69 }
70 }
71 }
72 }]
73 })
74
75 echartsBar.setOption({
76 title: {
77 text: '运动员分布图', // 图标题
78 },
79 color: ['purple', 'red'], // 柱图调色盘
80 xAxis: {
81 data: [
82 {
83 value: '珠三角',
84 textStyle: {
85 color: 'skyblue',
86 fontSize: 16
87 }
88 },
89 {
90 value: '粤东',
91 textStyle: {
92 color: 'orange',
93 fontSize: 16
94 }
95 },
96 {
97 value: '粤西',
98 textStyle: {
99 color: 'yellowgreen',
100 fontSize: 16
101 }
102 },
103 {
104 value: '粤北',
105 textStyle: {
106 color: 'pink',
107 fontSize: 16
108 }
109 }
110 ]
111 },
112 yAxis: {}, // 必须
113 legend: {
114 data: ['男', '女']
115 },
116 series: [
117 {
118 name: '男',
119 type: 'bar', // 图类型-饼图
120 data: [100, 60, 84, 66], // 饼图数据格式
121 itemStyle: {
122 normal: {
123 label: {
124 show: true, // 显示对应文字
125 position: 'top', // 在上方显示
126 textStyle: { // 文字样式
127 color: 'purple',
128 fontSize: 16
129 }
130 }
131 }
132 }
133 },
134 {
135 name: '女',
136 type: 'bar', // 图类型-饼图
137 data: [135, 63, 70, 22], // 饼图数据格式
138 itemStyle: {
139 normal: {
140 label: {
141 show: true, // 显示对应文字
142 position: 'top', // 在上方显示
143 textStyle: { // 文字样式
144 color: 'red',
145 fontSize: 16
146 }
147 }
148 }
149 }
150 }
151 ]
152 })
153
154 echartsLine.setOption({
155 title: {
156 text: '运动员分布图', // 图标题
157 },
158 color: ['purple', 'red'], // 柱图调色盘
159 xAxis: {
160 data: [
161 {
162 value: '珠三角',
163 textStyle: {
164 color: 'skyblue',
165 fontSize: 16
166 }
167 },
168 {
169 value: '粤东',
170 textStyle: {
171 color: 'orange',
172 fontSize: 16
173 }
174 },
175 {
176 value: '粤西',
177 textStyle: {
178 color: 'yellowgreen',
179 fontSize: 16
180 }
181 },
182 {
183 value: '粤北',
184 textStyle: {
185 color: 'pink',
186 fontSize: 16
187 }
188 }
189 ]
190 },
191 yAxis: {}, // 必须
192 legend: {
193 data: ['男', '女']
194 },
195 series: [
196 {
197 name: '男',
198 type: 'line', // 图类型-折线图
199 data: [100, 60, 84, 66], // 折线图数据格式
200 itemStyle: {
201 normal: {
202 label: {
203 show: true, // 显示对应文字
204 position: 'top', // 在上方显示
205 textStyle: { // 文字样式
206 color: 'purple',
207 fontSize: 16
208 }
209 }
210 }
211 }
212 },
213 {
214 name: '女',
215 type: 'line', // 图类型-折线图
216 data: [135, 63, 70, 22], // 折线图数据格式
217 itemStyle: {
218 normal: {
219 label: {
220 show: true, // 显示对应文字
221 position: 'top', // 在上方显示
222 textStyle: { // 文字样式
223 color: 'red',
224 fontSize: 16
225 }
226 }
227 }
228 }
229 }
230 ]
231 })
232 }
233 },
234 mounted() {
235 this.initEcharts()
236 }
237 }
238 </script>
239 <style scoped>
240 .echarts {
241 display: inline-block;
242 width: 700px;
243 height: 500px;
244 margin-left: 100px;
245 /* border: 1px solid #c0c0c0; */
246 }
247 </style>