vue中使用热力地形图

本文主要是介绍vue中使用热力地形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下方是需要的json文件的下载路径(百度网盘)
链接: https://pan.baidu.com/s/1LwTgr30F4TZC2qN4_xGsTQ
提取码: 1vgw

首先直接出效果图,下图中地图,颜色皆可改

在这里插入图片描述
mian.js中需要添加

Vue.prototype.$http=axios

先来vue中的写法

<template>
<div id="myChart"></div>//具体大小按实际需求设计
</template>

接着是js的写法

export default {name: 'Home',//这里写你的vue组件的namemounted () {this.initMap()//页面加载的时候加载方法},methods: {initMap () {this.$http({method: 'get',url: '/static/json/210000_full.json',//这是你的json文件的路径;这里可以换成对应城市的jsondataType: 'json',crossDomain: true,cache: false}).then(res => {console.log(res.data)echarts.registerMap('liaoning', res.data)const chart = echarts.init(document.getElementById('myChart'))chart.on('click', function (params) {console.log(params)})chart.setOption({title:{show: false,text: '哈哈哈哈哈哈哈',textAlign: 'auto',textStyle: {fontSize: 25,fontWeight: 'bolder',color: 'red',},},tooltip: {trigger: 'item',formatter: '{b} : {c}'//鼠标放到对应城市显示的城市名和数据},visualMap: {type: 'continuous',min: 0,max: 100,//数据越大颜色跨度越大text: ['High', 'Low'],realtime: false,calculable: true,color: ['#3ADEF1', '#0089FC', '#0057FE'],//这里是地图显示深度的颜色,可以改变,从左到右为越来越浅show: false},series: [{type: 'map',mapType: 'liaoning',roam: false,label: {normal: {show: true,color: '#fff'},emphasis: {show: true}},itemStyle: {emphasis: {label: {show: true}}},data: [//各个城市的数据,如果是别的省份城市可以对应修改,没有数据地图也会显示就是鼠标放上后没有对应的数据{name: '沈阳市', value: 180},{name: '铁岭市', value: 15},{name: '抚顺市', value: 2},{name: '营口市', value: 33},{name: '大连市', value: 520},{name: '辽阳市', value: 111},{name: '本溪市', value: 1350},{name: '鞍山市', value: 1222},{name: '阜新市', value: 199},{name: '朝阳市', value: 799},{name: '丹东市', value: 123},{name: '葫芦岛市', value: 555},{name: '锦州市', value: 13123},{name: '盘锦市', value: 121111}]}]})})},}}