vue + echart 云南省地图展示

本文主要是介绍vue + echart 云南省地图展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue + echart 云南省地图展示

vue + echart 云南省地图展示
云南省地图json ：http://datav.aliyun.com/portal/school/atlas/area_selector

图片: 在这里插入图片描述

map.js

云南省地图json ：http://datav.aliyun.com/portal/school/atlas/area_selector

index.vue 代码

直接上代码

<template><div :style="{ height: scrollerHeight, width: scrollerWeight }" ref="charts"></div>
</template><script>
import * as echarts from 'echarts';
import YunNan from '../../public/map/yunnan.json';
const dataList = [{ name: '昆明市', value: 20057.34 },{ name: '丽江市', value: 15477.48 },{ name: '大理白族自治州', value: 31686.1 },{ name: '玉溪市', value: 6992.6 },{ name: '曲靖市', value: 44045.49 },{ name: '昭通市', value: 40689.64 },{ name: '西双版纳傣族自治州', value: 37659.78 },{ name: '文山壮族苗族自治州', value: 45180.97 },{ name: '迪庆藏族自治州', value: 55204.26 },{ name: '怒江傈僳族自治州', value: 21900.9 },{ name: '保山市', value: 4918.26 },{ name: '德宏傣族景颇族自治州', value: 5881.84 },{ name: '临沧市', value: 4178.01 },{ name: '普洱市', value: 2227.92 },{ name: '红河哈尼族彝族自治州', value: 2180.98 },{ name: '楚雄彝族自治州', value: 9172.94 }
];export default {data() {return {}},computed: {scrollerHeight: function () {return (document.documentElement.clientHeight - 250) + 'px'; //自定义高度},scrollerWeight: function () {return (document.documentElement.clientWeight - 550) + 'px'; //自定义宽度}},created() {this.$nextTick(() => {this.initCharts();})},methods: {initCharts() {const charts = echarts.init(this.$refs["charts"]);const option = {title: {text: '视力筛查数据大屏',subtext: '云南省',left: 'center'},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},visualMap: {min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '数据表名称',type: 'map',map: 'YunNan',label: {show: true},data: dataList}]}// 地图注册，第一个参数的名字必须和option.geo.map一致echarts.registerMap("YunNan", YunNan)charts.setOption(option);charts.on("mouseover", function () { //取消鼠标移入地图区域高亮charts.dispatchAction({type: 'legendUnSelect'});});// 地图点击事件charts.on('click', function (params) {// 跳转到新页面 下钻到下一级市县window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));// this.$router.push({ path: '/system/user', query: { name: params.name } })});},}}
</script>