vue使用echarts全国地图
vue使用echarts全国地图
前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。
效果图
代码
echarts.vue
<template>
<div id="app">
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
// 导入echarts，没装包记得npm装包再导入
import * as echarts from 'echarts'
import './model/china'
export default {
data () {
return {
}
},
mounted () {
this.drawChart()
},
methods: {
drawChart () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
var mapName = 'china'
var data = [
{ name: '北京', value: 199 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 47 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 82 },
{ name: '黑龙江', value: 123 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 92 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '山东', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 125 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 180 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
var geoCoordMap = {}
var toolTipData = [
{ name: '北京', value: [{ name: '科技人才总数', value: 95 }, { name: '理科', value: 82 }] },
{ name: '天津', value: [{ name: '文科', value: 22 }, { name: '理科', value: 20 }] },
{ name: '河北', value: [{ name: '文科', value: 60 }, { name: '理科', value: 42 }] },
{ name: '山西', value: [{ name: '文科', value: 40 }, { name: '理科', value: 41 }] },
{ name: '内蒙古', value: [{ name: '文科', value: 23 }, { name: '理科', value: 24 }] },
{ name: '辽宁', value: [{ name: '文科', value: 39 }, { name: '理科', value: 28 }] },
{ name: '吉林', value: [{ name: '文科', value: 41 }, { name: '理科', value: 41 }] },
{ name: '黑龙江', value: [{ name: '文科', value: 35 }, { name: '理科', value: 31 }] },
{ name: '上海', value: [{ name: '文科', value: 12 }, { name: '理科', value: 12 }] },
{ name: '江苏', value: [{ name: '文科', value: 47 }, { name: '理科', value: 45 }] },
{ name: '浙江', value: [{ name: '文科', value: 57 }, { name: '理科', value: 57 }] },
{ name: '安徽', value: [{ name: '文科', value: 57 }, { name: '理科', value: 52 }] },
{ name: '福建', value: [{ name: '文科', value: 59 }, { name: '理科', value: 57 }] },
{ name: '江西', value: [{ name: '文科', value: 49 }, { name: '理科', value: 42 }] },
{ name: '山东', value: [{ name: '文科', value: 67 }, { name: '理科', value: 52 }] },
{ name: '河南', value: [{ name: '文科', value: 69 }, { name: '理科', value: 68 }] },
{ name: '湖北', value: [{ name: '文科', value: 60 }, { name: '理科', value: 56 }] },
{ name: '湖南', value: [{ name: '文科', value: 62 }, { name: '理科', value: 52 }] },
{ name: '重庆', value: [{ name: '文科', value: 47 }, { name: '理科', value: 44 }] },
{ name: '四川', value: [{ name: '文科', value: 65 }, { name: '理科', value: 60 }] },
{ name: '贵州', value: [{ name: '文科', value: 32 }, { name: '理科', value: 30 }] },
{ name: '云南', value: [{ name: '文科', value: 42 }, { name: '理科', value: 41 }] },
{ name: '西藏', value: [{ name: '文科', value: 5 }, { name: '理科', value: 4 }] },
{ name: '陕西', value: [{ name: '文科', value: 38 }, { name: '理科', value: 42 }] },
{ name: '甘肃', value: [{ name: '文科', value: 28 }, { name: '理科', value: 28 }] },
{ name: '青海', value: [{ name: '文科', value: 5 }, { name: '理科', value: 5 }] },
{ name: '宁夏', value: [{ name: '文科', value: 10 }, { name: '理科', value: 8 }] },
{ name: '新疆', value: [{ name: '文科', value: 36 }, { name: '理科', value: 31 }] },
{ name: '广东', value: [{ name: '文科', value: 63 }, { name: '理科', value: 60 }] },
{ name: '广西', value: [{ name: '文科', value: 29 }, { name: '理科', value: 30 }] },
{ name: '海南', value: [{ name: '文科', value: 8 }, { name: '理科', value: 6 }] }
]
/* 获取地图数据 */
myChart.showLoading()
// var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading()
// mapFeatures.forEach(function(v) {
// // 地区名称
// var name = v.properties.name;
// // 地区经纬度
// geoCoordMap[name] = v.properties.cp;
// });
console.log(data)
console.log(toolTipData)
var max = 480
var min = 9 // todo
var maxSize4Pin = 100
var minSize4Pin = 20
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
const option = {
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#000',
decoration: 'none'
},
// position: function (point, params, dom, rect, size) {
// return [point[0], point[1]];
// },
formatter: function (params) {
// console.log(params)
var tipHtml = ''
tipHtml = '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>' +
'<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>' +
'' +
'<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>' +
'单位总数：' + '<span style="color:#11ee7d;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>' +
'<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>' +
'总人数：' + '<span style="color:#f48225;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>' +
'<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>' +
'总人数：' + '<span style="color:#f4e925;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>' +
'<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>' +
'总人数：' + '<span style="color:#25f4f2;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>' +
'' + 'china.js
(function (root, factory) {
// eslint-disable-next-line no-undef
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
// eslint-disable-next-line no-undef
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
}
echarts.registerMap('china',mapData)
// 此处mapData就是地图的数据，可以直接在DATAV.GeoAtlas中拿过来粘贴
}))
DATAV.GeoAtlas
打开后复制粘贴过去就可以了
