第一步，下载echartscnpm install echarts --save-dev第二步，在main.js中全局引入//引入echarts import echarts from \'echar
用echarts在vue绘制世界地图和中国地图
顺晟科技
2022-09-13 11:23:38
77
第一步，下载echarts
cnpm install echarts --save-dev
第二步，在main.js中全局引入
//引入echarts import echarts from \'echarts\' Vue.prototype.$echarts = echarts
第三步，建立echarts组件
<template>
<div class="echarts">
<div :style="{height:\'400px\',width:\'100%\'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
// import \'../../node_modules/echarts/map/js/world.js\'
import \'../../node_modules/echarts/map/js/china.js\' // 引入中国地图数据
export default {
name: "echarts",
props: ["userJson"],
data() {
return {
chart: null
};
},
mounted() {
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
console.log(this.userJson)
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
myChart.setOption({ // 进行相关配置
backgroundColor: "#02AFDB",
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
max: 1000,
text: [\'High\', \'Low\'],
realtime: true,
calculable: true,
color: [\'orangered\', \'yellow\', \'lightskyblue\']
},
geo: { // 这个是重点配置区
map: \'china\', // 表示中国地图
roam: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: \'rgba(0,0,0,0.4)\'
}
}
},
itemStyle: {
normal: {
borderColor: \'rgba(0, 0, 0, 0.2)\'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: \'rgba(0, 0, 0, 0.5)\'
}
}
},
series: [{
type: \'scatter\',
coordinateSystem: \'geo\' // 对应上方配置
},
{
name: \'启动次数\', // 浮动框的标题
type: \'map\',
geoIndex: 0,
data: [{
"name": "北京",
"value": 599
}, {
"name": "上海",
"value": 142
}, {
"name": "黑龙江",
"value": 44
}, {
"name": "深圳",
"value": 92
}, {
"name": "湖北",
"value": 810
}, {
"name": "四川",
"value": 453
}]
}
]
})
}
}
}
</script>
效果图如下
如果是世界地图的话
<template>
<div class="echarts">
<div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
<!-- <Title :title="title"></Title>
<Search :placeholder="placeholder" :find="find" @listenSearch="searchItem" @listenAdd="addNew" @listenLeadIng="leadingItem"></Search> -->
<!-- <div id="provinceChart" class="charts" ref="myEchart1" style="height:400px;"></div> -->
</div>
</template>
<script>
import echarts from "echarts";
import \'../../node_modules/echarts/map/js/world.js\'
// import \'../../node_modules/echarts/map/js/china.js\' // 引入中国地图数据
import Title from \'./title\'
import Search from \'./search\'
export default {
name: "echarts",
props: {
className: {
type: String,
default: "yourClassName"
},
id: {
type: String,
default: "yourID"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "400px"
}
},
data() {
return {
title: "图表",
placeholder: "用户名/电话",
find: "2", //1显示新增按钮，2显示导入按钮，若不显示这两个按钮可以写0或者不写值
chart: null
};
},
components: {
Title,
Search
},
mounted() {
this.initChart();
// this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
let myChart = echarts.init(this.$refs.myEchart1); //这里是为了获得容器所在位置
myChart.setOption({ // 进行相关配置
backgroundColor: "#02AFDB",
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
max: 1000000,
text: [\'High\', \'Low\'],
realtime: true,
calculable: true,
color: [\'orangered\', \'yellow\', \'lightskyblue\']
},
geo: { // 这个是重点配置区
map: \'china\', // 表示中国地图
roam: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: \'rgba(0,0,0,0.4)\'
}
}
},
itemStyle: {
normal: {
borderColor: \'rgba(0, 0, 0, 0.2)\'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: \'rgba(0, 0, 0, 0.5)\'
}
}
},
series: [{
type: \'scatter\',
coordinateSystem: \'geo\' // 对应上方配置
},
{
name: \'启动次数\', // 浮动框的标题
type: \'map\',
geoIndex: 0,
data: [{
name: \'广东\',
value: 1324
}] // 这里就是数据，即数组可以单独放在外面也可以直接写
}
]
})
},
//搜索回调
searchItem(val) {
console.log(val)
},
//新增回调
addNew(val) {
console.log(val)
},
//导入
leadingItem(val) {
console.log(val)
},
initChart() {
this.chart = echarts.init(this.$refs.myEchart);
window.onresize = echarts.init(this.$refs.myEchart).resize;
// 把配置和数据放这里
this.chart.setOption({
backgroundColor: "#02AFDB",
title: {
// text: \'在线设备分布\',
left: \'40%\',
top: \'0px\',
textStyle: {
color: \'#fff\',
opacity: 0.7
}
},
dataRange: {
show: false,
min: 0,
max: 1000000,
text: [\'High\', \'Low\'],
realtime: true,
calculable: true,
color: [\'orangered\', \'yellow\', \'lightskyblue\']
},
tooltip: {
trigger: \'item\'
},
geo: {
map: \'world\',
label: {
emphasis: {
show: false
}
},
roam: false,
silent: true,
itemStyle: {
normal: {
areaColor: \'#37376e\',
borderColor: \'#000\'
},
emphasis: {
areaColor: \'#2a333d\'
}
}
},
series: [{
type: \'map\',
mapType: \'world\',
// zoom: 1.2,
mapLocation: {
y: 100
},
data: [{
name: \'Afghanistan\',
value: 28397.812
},
{
name: \'Angola\',
value: 19549.124
},
{
name: \'Albania\',
value: 3150.143
},
{
name: \'United Arab Emirates\',
value: 8441.537
},
{
name: \'Argentina\',
value: 40374.224
},
{
name: \'Armenia\',
value: 2963.496
},
{
name: \'French Southern and Antarctic Lands\',
value: 268.065
},
{
name: \'Australia\',
value: 22404.488
},
{
name: \'Austria\',
value: 8401.924
},
{
name: \'Azerbaijan\',
value: 9094.718
},
{
name: \'Burundi\',
value: 9232.753
},
{
name: \'Belgium\',
value: 10941.288
},
{
name: \'Benin\',
value: 9509.798
},
{
name: \'Burkina Faso\',
value: 15540.284
},
{
name: \'Bangladesh\',
value: 151125.475
},
{
name: \'Bulgaria\',
value: 7389.175
},
{
name: \'The Bahamas\',
value: 66402.316
},
{
name: \'Bosnia and Herzegovina\',
value: 3845.929
},
{
name: \'Belarus\',
value: 9491.07
},
{
name: \'Belize\',
value: 308.595
},
{
name: \'Bermuda\',
value: 64.951
},
{
name: \'Bolivia\',
value: 716.939
},
{
name: \'Brazil\',
value: 195210.154
},
{
name: \'Brunei\',
value: 27.223
},
{
name: \'Bhutan\',
value: 716.939
},
{
name: \'Botswana\',
value: 1969.341
},
{
name: \'Central African Republic\',
value: 4349.921
},
{
name: \'Canada\',
value: 34126.24
},
{
name: \'Switzerland\',
value: 7830.534
},
{
name: \'Chile\',
value: 17150.76
},
{
name: \'China\',
value: 1359821.465
},
{
name: \'Ivory Coast\',
value: 60508.978
},
{
name: \'Cameroon\',
value: 20624.343
},
{
name: \'Democratic Republic of the Congo\',
value: 62191.161
},
{
name: \'Republic of the Congo\',
value: 3573.024
},
{
name: \'Colombia\',
value: 46444.798
},
{
name: \'Costa Rica\',
value: 4669.685
},
{
name: \'Cuba\',
value: 11281.768
},
{
name: \'Northern Cyprus\',
value: 1.468
},
{
name: \'Cyprus\',
value: 1103.685
},
{
name: \'Czech Republic\',
value: 10553.701
},
{
name: \'Germany\',
value: 83017.404
},
{
name: \'Djibouti\',
value: 834.036
},
{
name: \'Denmark\',
value: 5550.959
},
{
name: \'Dominican Republic\',
value: 10016.797
},
{
name: \'Algeria\',
value: 37062.82
},
{
name: \'Ecuador\',
value: 15001.072
},
{
name: \'Egypt\',
value: 78075.705
},
{
name: \'Eritrea\',
value: 5741.159
},
{
name: \'Spain\',
value: 46182.038
},
{
name: \'Estonia\',
value: 1298.533
},
{
name: \'Ethiopia\',
value: 87095.281
},
{
name: \'Finland\',
value: 5367.693
},
{
name: \'Fiji\',
value: 860.559
},
{
name: \'Falkland Islands\',
value: 49.581
},
{
name: \'France\',
value: 63230.866
},
{
name: \'Gabon\',
value: 1556.222
},
{
name: \'United Kingdom\',
value: 62066.35
},
{
name: \'Georgia\',
value: 4388.674
},
{
name: \'Ghana\',
value: 24262.901
},
{
name: \'Guinea\',
value: 10876.033
},
{
name: \'Gambia\',
value: 1680.64
},
{
name: \'Guinea Bissau\',
value: 10876.033
},
{
name: \'Equatorial Guinea\',
value: 696.167
},
{
name: \'Greece\',
value: 11109.999
},
{
name: \'Greenland\',
value: 56.546
},
{
name: \'Guatemala\',
value: 14341.576
},
{
name: \'French Guiana\',
value: 231.169
},
{
name: \'Guyana\',
value: 786.126
},
{
name: \'Honduras\',
value: 7621.204
},
{
name: \'Croatia\',
value: 4338.027
},
{
name: \'Haiti\',
value: 9896.4
},
{
name: \'Hungary\',
value: 10014.633
},
{
name: \'Indonesia\',
value: 240676.485
},
{
name: \'India\',
value: 12054.648
},
{
name: \'Ireland\',
value: 4467.561
},
{
name: \'Iran\',
value: 240676.485
},
{
name: \'Iraq\',
value: 30962.38
},
{
name: \'Iceland\',
value: 318.042
},
{
name: \'Israel\',
value: 7420.368
},
{
name: \'Italy\',
value: 60508.978
},
{
name: \'Jamaica\',
value: 2741.485
},
{
name: \'Jordan\',
value: 6454.554
},
{
name: \'Japan\',
value: 127352.833
},
{
name: \'Kazakhstan\',
value: 15921.127
},
{
name: \'Kenya\',
value: 40909.194
},
{
name: \'Kyrgyzstan\',
value: 5334.223
},
{
name: \'Cambodia\',
value: 14364.931
},
{
name: \'South Korea\',
value: 51452.352
},
{
name: \'Kosovo\',
value: 97.743
},
{
name: \'Kuwait\',
value: 2991.58
},
{
name: \'Laos\',
value: 6395.713
},
{
name: \'Lebanon\',
value: 4341.092
},
{
name: \'Liberia\',
value: 3957.99
},
{
name: \'Libya\',
value: 6040.612
},
{
name: \'Sri Lanka\',
value: 20758.779
},
{
name: \'Lesotho\',
value: 2008.921
},
{
name: \'Lithuania\',
value: 3068.457
},
{
name: \'Luxembourg\',
value: 507.885
},
{
name: \'Latvia\',
value: 2090.519
},
{
name: \'Morocco\',
value: 31642.36
},
{
name: \'Moldova\',
value: 103.619
},
{
name: \'Madagascar\',
value: 21079.532
},
{
name: \'Mexico\',
value: 117886.404
},
{
name: \'Macedonia\',
value: 507.885
},
{
name: \'Mali\',
value: 13985.961
},
{
name: \'Myanmar\',
value: 51931.231
},
{
name: \'Montenegro\',
value: 620.078
},
{
name: \'Mongolia\',
value: 2712.738
},
{
name: \'Mozambique\',
value: 23967.265
},
{
name: \'Mauritania\',
value: 3609.42
},
{
name: \'Malawi\',
value: 15013.694
},
{
name: \'Malaysia\',
value: 28275.835
},
{
name: \'Namibia\',
value: 2178.967
},
{
name: \'New Caledonia\',
value: 246.379
},
{
name: \'Niger\',
value: 15893.746
},
{
name: \'Nigeria\',
value: 159707.78
},
{
name: \'Nicaragua\',
value: 5822.209
},
{
name: \'Netherlands\',
value: 16615.243
},
{
name: \'Norway\',
value: 4891.251
},
{
name: \'Nepal\',
value: 26846.016
},
{
name: \'New Zealand\',
value: 4368.136
},
{
name: \'Oman\',
value: 2802.768
},
{
name: \'Pakistan\',
value: 173149.306
},
{
name: \'Panama\',
value: 3678.128
},
{
name: \'Peru\',
value: 29262.83
},
{
name: \'Philippines\',
value: 93444.322
},
{
name: \'Papua New Guinea\',
value: 6858.945
},
{
name: \'Poland\',
value: 38198.754
},
{
name: \'Puerto Rico\',
value: 3709.671
},
{
name: \'North Korea\',
value: 1.468
},
{
name: \'Portugal\',
value: 10589.792
},
{
name: \'Paraguay\',
value: 6459.721
},
{
name: \'Qatar\',
value: 1749.713
},
{
name: \'Romania\',
value: 21861.476
},
{
name: \'Russia\',
value: 21861.476
},
{
name: \'Rwanda\',
value: 10836.732
},
{
name: \'Western Sahara\',
value: 514.648
},
{
name: \'Saudi Arabia\',
value: 27258.387
},
{
name: \'Sudan\',
value: 35652.002
},
{
name: \'South Sudan\',
value: 9940.929
},
{
name: \'Senegal\',
value: 12950.564
},
{
name: \'Solomon Islands\',
value: 526.447
},
{
name: \'Sierra Leone\',
value: 5751.976
},
{
name: \'El Salvador\',
value: 6218.195
},
{
name: \'Somaliland\',
value: 9636.173
},
{
name: \'Somalia\',
value: 9636.173
},
{
name: \'Republic of Serbia\',
value: 3573.024
},
{
name: \'Suriname\',
value: 524.96
},
{
name: \'Slovakia\',
value: 5433.437
},
{
name: \'Slovenia\',
value: 2054.232
},
{
name: \'Sweden\',
value: 9382.297
},
{
name: \'Swaziland\',
value: 1193.148
},
{
name: \'Syria\',
value: 7830.534
},
{
name: \'Chad\',
value: 11720.781
},
{
name: \'Togo\',
value: 6306.014
},
{
name: \'Thailand\',
value: 66402.316
},
{
name: \'Tajikistan\',
value: 7627.326
},
{
name: \'Turkmenistan\',
value: 5041.995
},
{
name: \'East Timor\',
value: 10016.797
},
{
name: \'Trinidad and Tobago\',
value: 1328.095
},
{
name: \'Tunisia\',
value: 10631.83
},
{
name: \'Turkey\',
value: 72137.546
},
{
name: \'United Republic of Tanzania\',
value: 44973.33
},
{
name: \'Uganda\',
value: 33987.213
},
{
name: \'Ukraine\',
value: 46050.22
},
{
name: \'Uruguay\',
value: 3371.982
},
{
name: \'United States of America\',
value: 312247.116
},
{
name: \'Uzbekistan\',
value: 27769.27
},
{
name: \'Venezuela\',
value: 236.299
},
{
name: \'Vietnam\',
value: 89047.397
},
{
name: \'Vanuatu\',
value: 236.299
},
{
name: \'West Bank\',
value: 13.565
},
{
name: \'Yemen\',
value: 22763.008
},
{
name: \'South Africa\',
value: 51452.352
},
{
name: \'Zambia\',
value: 13216.985
},
{
name: \'Zimbabwe\',
value: 13076.978
}
],
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: \'#fff\',
borderWidth: 1
}
}
}],
});
}
}
}
</script>
效果如下
注意：只需要将请求来的json放在 series中的data即可
就这........
相关文章
-
13
2022-09
-
13
2022-09
-
16
2019-08
随机推荐
- 【小白求助】vue与后端数据库通信
- 非生产环境的模式，如何压缩代码并打包
- H5+vue-router做单页面应用的时候如何加载其他页面
- 让Vue原生支持在浏览器中直接运行.vue组件文件
- 如何在VUE使用虚拟语气和虚拟表演
- Setup语法糖语法中没有this实例，我改怎么获取this.$slots？
- 子组件之间，路由参数互相控制
- 请问能通过指令给宿主组件传参吗
- vue移动webview视频光应用
- 9 什么是Vue-loader？使用它的目的是什么？
- Vue2.6的项目在ie中老是空白，打不开
- Hash模式下，query在hash前无法获取到
- Vue的基本用法(11)组件化
- 使用阿里巴巴矢量标志库的vue项目教程
- Cordova混合App开发:Cordova Vue实现Android APP开发(Cordova框架生成APP安装)(2)
- 使用webstorm构建vue项目
- 什么事：视图何曰QQ jssdk□对 339 www .百度 com/more/
- 基于vue.js的前端开发项目,Vue.js项目集成ElementUI - HackerVirus
- 关于electron-vue打包后静态视频文件无法正常加载的问题解决方法
- vue插槽用法,Vue插槽的作用