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 = 480var min = 9 // todovar maxSize4Pin = 100var minSize4Pin = 20var 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>' +'<div style="padding:20px">' +'<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>' +'</div>' + '</div>'setTimeout(function () {tooltipCharts(params.name)}, 10)return tipHtml}},visualMap: {show: true,min: 0,max: 200,left: '10%',top: 'bottom',calculable: true,seriesIndex: [1],inRange: {color: ['#04387b', '#467bc0'] // 蓝绿}},geo: {show: true,map: mapName,label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {areaColor: '#023677',borderColor: '#1180c7'},emphasis: {areaColor: '#4499d0'}}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 10},label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#fff'}}},{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, // 长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077'},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',zlevel: 6},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function (a, b) {return b.value - a.value}).slice(0, 10)),symbolSize: function (val) {return val[2] / 10},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'left',show: false}},itemStyle: {normal: {color: 'yellow',shadowBlur: 10,shadowColor: 'yellow'}},zlevel: 1}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)}}
}
</script>

china.js

(function (root, factory) {// eslint-disable-next-line no-undefif (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.// eslint-disable-next-line no-undefdefine(['exports', 'echarts'], factory)} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts'))} else {// Browser globalsfactory({}, 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

打开后复制粘贴过去就可以了

vue使用echarts全国地图相关推荐

Vue版本echarts 全国地图geo、geo3D
需求:大屏显示3D全国地图,点击地图上标记连接到指定页面,网上资源多数不是Vue版本的,实现的方式也是由html页面修改为Vue版本效果展示: 由于图片涉嫌违规,给大家一个自己脑补的 ...
echarts全国地图点击弹窗（Vue）
前言 echarts使用很多次了,可以配置地图还是第一次,要实现的是地图上标注两个点,点击点弹出弹窗,点击可以跳转,效果如下: Echarts官网配置项参考 Echarts官网的一参考demo 贴关键 ...
echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源全国地图山东黑龙江吉林辽宁北京天津河北河南山西陕西内蒙古安徽江苏上海浙江福建台湾广东香港澳门广西江 ...
Layuiadmin+Echarts全国地图数据分布
Layuiadmin+Echarts全国地图数据分布 *样式要引用layui的css js Html代码 <div class="layui-col-sm8">< ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
vue echarts全国地图和区域地图 map
vue echart map 全国和地区数据此案例并不是全国省市区下钻只是展示全国或省或市的echarts地图如果想看全国省市区下钻,请看此连接链接: 全国省市区下钻. 效果图如下(可通过省市区 ...
vue中引用echarts全国地图
<template><div><div ref="mapInfo" style="width:750px; height: 540px&qu ...
echarts全国地图只显示南海诸岛问题
在使用百度开源的可视化工具echarts时,用到中国地图,参照官方文档用此段代码 value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]attr = [&qu ...
Vue使用Echarts绘画地图可视化
下载Echarts npm install echarts 效果一(城市标记点) 完整代码如下 <template><div class="chartBox"&g ...
vue引入echarts中国地图
需求:显示各省名字,滑过标记地显示接入数量,点击标记地显示系统数量已接入及能跳转对应页面信息的入口: 配置: 1.安装依赖 npm install echarts -S 2.全局引入main.js ...

vue使用echarts全国地图

vue使用echarts全国地图

效果图

代码

vue使用echarts全国地图相关推荐

最新文章

热门文章