vue中使⽤echarts来绘制世界地图和中国地图第⼀步，下载echarts
cnpm install echarts --save-dev
第⼆步，在main.js中全局引⼊
//引⼊echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第三步，建⽴echarts组件
<template>
<div class="echarts">
<div : 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.$Echart); //这⾥是为了获得容器所在位置
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,
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" : 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" ></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: "图表",
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.$Echart1); //这⾥是为了获得容器所在位置        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)
},
this.chart = echarts.init(this.$Echart);
// 把配置和数据放这⾥
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: 'Austria',
value: 8401.924
},
{
name: 'Azerbaijan',
value: 9094.718
},
{
name: 'Burundi',
value: 9232.753
setoption},
{
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