vue引入echarts 展示中国地图，点击省份显示市级区域
vue 2021-10-06 22:31:04

点击前展示：

china.png

点击省份后，展示：

点击后.png

 

 

1、5.0以上不再有省市区数据，所以npm 4.9版本

C/C++ Code复制内容到剪贴板
  1. npm install echarts@4.9.0  

 

2、使用：

XML/HTML Code复制内容到剪贴板
  1.         <div class="map">  
  2.           <china-map :mapStyle="{width: '550px', height: '450px'}"></china-map>  
  3.         </div>  
  4.   
  5.   
  6. <script>  
  7. import chinaMap from './components/chind-map.vue'  
  8.   
  9. export default {  
  10.     components: {  
  11.         chinaMap  
  12.     },  
  13. ...  

 

 

 

不带点击进入市区的模板

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="map">  
  3.     <div id="myChartChina" :style="mapStyle"></div>  
  4.   </div>  
  5. </template>  
  6.   
  7. <script>  
  8. import echarts from 'echarts'  
  9. import china from 'echarts/map/json/china.json'  
  10. // import Vue from 'vue'  
  11. // echarts.registerMap('china', china)  
  12. // Vue.prototype.$echartsecharts = echarts  
  13.   
  14. export default {  
  15.     props: {  
  16.         mapStyle: {  
  17.             type: Object,  
  18.             default () {  
  19.                 return {}  
  20.             }  
  21.         }  
  22.     },  
  23.     data () {  
  24.         return {  
  25.             // state: {  
  26.             //     option: option,  
  27.             //     detail: false, // 是否使用详细地图  
  28.             //     curMap:geoJson,  
  29.             // }  
  30.         }  
  31.     },  
  32.     created () {  
  33.       this.init()  
  34.     },  
  35.     methods: {  
  36.         init () {  
  37.             setTimeout(() => {  
  38.                 echarts.registerMap('china', china)  
  39.                 this.drawLine()  
  40.             }, 100)  
  41.             console.log(this.mapStyle)  
  42.         },  
  43.         drawLine () {  
  44.             console.log('地图初始化')  
  45.             // 基于准备好的dom，初始化echarts实例  
  46.             var myChartContainer = document.getElementById('myChartChina')  
  47.             // console.log(myChartContainer)  
  48.             // console.log(this.$refs.mapOption)  
  49.             // var resizeMyChartContainer = function () {  
  50.             //     myChartContainer.style.width = 100 + '%'  
  51.             //     myChartContainer.style.height = window.innerHeight * 0.7 + 'px'  
  52.             // }  
  53.             // resizeMyChartContainer()  
  54.             function randomData () {  
  55.                 return Math.round(Math.random() * 500)  
  56.             }  
  57.             var nationMap = echarts.init(myChartContainer)  
  58.             // 绘制图表  
  59.             var option = {  
  60.                 tooltip: {  
  61.                     trigger: 'item',  
  62.                     formatter: p => {  
  63.                             // console.log(p)  
  64.                             let val = p.value  
  65.                             if (window.isNaN(val)) {  
  66.                                 val = 0  
  67.                             }  
  68.                             // const txtCon =  
  69.                             // "<div style='text-align:center'> 地区：" + p.name + '<br />value值：' + p.data.value + '<br />code：' + p.data.cityCode + '</div>'  
  70.                             return "<div style='text-align:center'>地区：" + p.name + '<br />'  
  71.                         }  
  72.                 },  
  73.                 legend: {  
  74.                     orient: 'vertical',  
  75.                     left: 'left',  
  76.                     data: ['']  
  77.                 },  
  78.                 // 是否允许缩放  
  79.                 // roam: true,  
  80.                 // top: 100,  
  81.                 zoom: 2, // 默认显示级别  
  82.                 visualMap: {  
  83.                     show: false,  
  84.                     // min: 0,  
  85.                     // max: 1500,  
  86.                     // // left: '10%',  
  87.                     // // top: 'bottom',  
  88.                     // text: ['高', '低'],  
  89.                     calculable: true,  
  90.                     color: ['#0b50b9', '#c3e2f4']  
  91.                 },  
  92.                 selectedMode: 'single',  
  93.                 series: [  
  94.                     {  
  95.                         // name: '',  
  96.                         type: 'map',  
  97.                         mapType: 'china',  
  98.                         itemStyle: {  
  99.                             normal: {  
  100.                                 borderColor: 'rgba(0, 0, 0, 0.2)'  
  101.                             },  
  102.                             emphasis: {  
  103.                                 shadowOffsetX: 0,  
  104.                                 shadowOffsetY: 0,  
  105.                                 shadowBlur: 20,  
  106.                                 borderWidth: 0,  
  107.                                 shadowColor: 'rgba(0, 0, 0, 0.5)'  
  108.                             }  
  109.                         },  
  110.                         showLegendSymbol: true,  
  111.                         label: {  
  112.                             normal: {  
  113.                                 show: true  
  114.                             },  
  115.                             emphasis: {  
  116.                                 show: true  
  117.                             }  
  118.                         },  
  119.                         data: [  
  120.                             { name: '北京', value: randomData() },  
  121.                             { name: '天津', value: randomData() },  
  122.                             { name: '上海', value: randomData() },  
  123.                             { name: '重庆', value: randomData() },  
  124.                             { name: '河北', value: randomData() },  
  125.                             { name: '河南', value: randomData() },  
  126.                             { name: '云南', value: randomData() },  
  127.                             { name: '辽宁', value: randomData() },  
  128.                             { name: '黑龙江', value: randomData() },  
  129.                             { name: '湖南', value: randomData() },  
  130.                             { name: '安徽', value: randomData() },  
  131.                             { name: '山东', value: randomData() },  
  132.                             { name: '新疆', value: randomData() },  
  133.                             { name: '江苏', value: randomData() },  
  134.                             { name: '浙江', value: randomData() },  
  135.                             { name: '江西', value: randomData() },  
  136.                             { name: '湖北', value: randomData() },  
  137.                             { name: '广西', value: randomData() },  
  138.                             { name: '甘肃', value: randomData() },  
  139.                             { name: '山西', value: randomData() },  
  140.                             { name: '内蒙古', value: randomData() },  
  141.                             { name: '陕西', value: randomData() },  
  142.                             { name: '吉林', value: randomData() },  
  143.                             { name: '福建', value: randomData() },  
  144.                             { name: '贵州', value: randomData() },  
  145.                             { name: '广东', value: randomData() },  
  146.                             { name: '青海', value: randomData() },  
  147.                             { name: '西藏', value: randomData() },  
  148.                             { name: '四川', value: randomData() },  
  149.                             { name: '宁夏', value: randomData() },  
  150.                             { name: '海南', value: randomData() },  
  151.                             { name: '台湾', value: randomData() },  
  152.                             { name: '香港', value: randomData() },  
  153.                             { name: '澳门', value: randomData() }  
  154.                         ]  
  155.                     }  
  156.                 ]  
  157.             }  
  158.             nationMap.setOption(option, true, true)  
  159.               
  160.         },  
  161.     }  
  162. }  
  163. </script>  

 

 

点击进入市区的模板

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="map">  
  3.     <div id="myChartChina" :style="mapStyle"></div>  
  4.   </div>  
  5. </template>  
  6.   
  7. <script>  
  8. import echarts from 'echarts'  
  9. import china from 'echarts/map/json/china.json'  
  10. // 定义全国省份的数组  
  11. var provinces = {  
  12.     '上海': {  
  13.         'py': 'shanghai'  
  14.     },  
  15.     '河北': {  
  16.         'py': 'hebei'  
  17.     },  
  18.     '山西': {  
  19.         'py': 'shanxi'  
  20.     },  
  21.     '内蒙古': {  
  22.         'py': 'neimenggu'  
  23.     },  
  24.     '辽宁': {  
  25.         'py': 'liaoning'  
  26.     },  
  27.     '吉林': {  
  28.         'py': 'jilin'  
  29.     },  
  30.     '黑龙江': {  
  31.         'py': 'heilongjiang'  
  32.     },  
  33.     '江苏': {  
  34.         'py': 'jiangsu'  
  35.     },  
  36.     '浙江': {  
  37.         'py': 'zhejiang'  
  38.     },  
  39.     '安徽': {  
  40.         'py': 'anhui'  
  41.     },  
  42.     '福建': {  
  43.         'py': 'fujian'  
  44.     },  
  45.     '江西': {  
  46.         'py': 'jiangxi'  
  47.     },  
  48.     '山东': {  
  49.         'py': 'shandong'  
  50.     },  
  51.     '河南': {  
  52.         'py': 'henan'  
  53.     },  
  54.     '湖北': {  
  55.         'py': 'hubei'  
  56.     },  
  57.     '湖南': {  
  58.         'py': 'hunan'  
  59.     },  
  60.     '广东': {  
  61.         'py': 'guangdong'  
  62.     },  
  63.     '广西': {  
  64.         'py': 'guangxi'  
  65.     },  
  66.     '海南': {  
  67.         'py': 'hainan'  
  68.     },  
  69.     '四川': {  
  70.         'py': 'sichuan'  
  71.     },  
  72.     '贵州': {  
  73.         'py': 'guizhou'  
  74.     },  
  75.     '云南': {  
  76.         'py': 'yunnan'  
  77.     },  
  78.     '西藏': {  
  79.         'py': 'xizang'  
  80.     },  
  81.     '陕西': {  
  82.         'py': 'shanxi1'  
  83.     },  
  84.     '甘肃': {  
  85.         'py': 'gansu'  
  86.     },  
  87.     '青海': {  
  88.         'py': 'qinghai'  
  89.     },  
  90.     '宁夏': {  
  91.         'py': 'ningxia'  
  92.     },  
  93.     '新疆': {  
  94.         'py': 'xinjiang'  
  95.     },  
  96.     '北京': {  
  97.         'py': 'beijing'  
  98.     },  
  99.     '天津': {  
  100.         'py': 'tianjin'  
  101.     },  
  102.     '重庆': {  
  103.         'py': 'chongqing'  
  104.     },  
  105.     '香港': {  
  106.         'py': 'xianggang'  
  107.     },  
  108.     '澳门': {  
  109.         'py': 'aomen'  
  110.     },  
  111.     '台湾': {  
  112.         'py': 'taiwan'  
  113.     }  
  114. }  
  115. var nationMap  
  116. export default {  
  117.     props: {  
  118.         mapStyle: {  
  119.             type: Object,  
  120.             default () {  
  121.                 return {}  
  122.             }  
  123.         }  
  124.     },  
  125.     data () {  
  126.         return {  
  127.             isIntoProvince: false  
  128.         }  
  129.     },  
  130.     created () {  
  131.       this.init()  
  132.     },  
  133.     methods: {  
  134.         init () {  
  135.             setTimeout(() => {  
  136.                 echarts.registerMap('china', china)  
  137.                 this.drawLine('china')  
  138.   
  139.                 // console.log(china)  
  140.                 nationMap.on('click', param => {  
  141.                     this.isIntoProvince = !this.isIntoProvince  
  142.                     // console.log(param)  
  143.                     // console.log(this.isIntoProvince)  
  144.                     if (!this.isIntoProvince) {  
  145.                         this.drawLine('china')  
  146.                     } else {  
  147.                         // 遍历取到provincesText 中的下标  去拿到对应的省js  
  148.                         const province = provinces[param.name]  
  149.                         if (province) {  
  150.                             console.log(province)  
  151.                             // 获取得城市拼音  
  152.                             this.showProvince(param.name, province.py)  
  153.                         }  
  154.                     }  
  155.                 })  
  156.             }, 100)  
  157.         },  
  158.         drawLine (area) {  
  159.             console.log('地图初始化')  
  160.             // 基于准备好的dom，初始化echarts实例  
  161.             var myChartContainer = document.getElementById('myChartChina')  
  162.             // console.log(myChartContainer)  
  163.             // console.log(this.$refs.mapOption)  
  164.             // var resizeMyChartContainer = function () {  
  165.             //     myChartContainer.style.width = 100 + '%'  
  166.             //     myChartContainer.style.height = window.innerHeight * 0.7 + 'px'  
  167.             // }  
  168.             // resizeMyChartContainer()  
  169.             function randomData () {  
  170.                 return Math.round(Math.random() * 500)  
  171.             }  
  172.             nationMap = echarts.init(myChartContainer)  
  173.             // 绘制图表  
  174.             var option = {  
  175.                 tooltip: {  
  176.                     trigger: 'item',  
  177.                     formatter: p => {  
  178.                             // console.log(p)  
  179.                             let val = p.value  
  180.                             if (window.isNaN(val)) {  
  181.                                 val = 0  
  182.                             }  
  183.                             // const txtCon =  
  184.                             // "<div style='text-align:center'> 地区：" + p.name + '<br />value值：' + p.data.value + '<br />code：' + p.data.cityCode + '</div>'  
  185.                             return "<div style='text-align:center'>地区：" + p.name + '<br />'  
  186.                         }  
  187.                 },  
  188.                 legend: {  
  189.                     orient: 'vertical',  
  190.                     left: 'left',  
  191.                     data: ['']  
  192.                 },  
  193.                 // 是否允许缩放  
  194.                 // roam: true,  
  195.                 // top: 100,  
  196.                 zoom: 2, // 默认显示级别  
  197.                 visualMap: {  
  198.                     show: false,  
  199.                     // min: 0,  
  200.                     // max: 1500,  
  201.                     // // left: '10%',  
  202.                     // // top: 'bottom',  
  203.                     // text: ['高', '低'],  
  204.                     calculable: true,  
  205.                     color: ['#0b50b9', '#c3e2f4']  
  206.                 },  
  207.                 selectedMode: 'single',  
  208.                 series: [  
  209.                     {  
  210.                         // name: '',  
  211.                         type: 'map',  
  212.                         mapType: area,  
  213.                         itemStyle: {  
  214.                             normal: {  
  215.                                 borderColor: 'rgba(0, 0, 0, 0.2)'  
  216.                             },  
  217.                             emphasis: {  
  218.                                 shadowOffsetX: 0,  
  219.                                 shadowOffsetY: 0,  
  220.                                 shadowBlur: 20,  
  221.                                 borderWidth: 0,  
  222.                                 shadowColor: 'rgba(0, 0, 0, 0.5)'  
  223.                             }  
  224.                         },  
  225.                         showLegendSymbol: true,  
  226.                         label: {  
  227.                             normal: {  
  228.                                 show: true  
  229.                             },  
  230.                             emphasis: {  
  231.                                 show: true  
  232.                             }  
  233.                         },  
  234.                         data: [  
  235.                             { name: '北京', value: randomData() },  
  236.                             { name: '天津', value: randomData() },  
  237.                             { name: '上海', value: randomData() },  
  238.                             { name: '重庆', value: randomData() },  
  239.                             { name: '河北', value: randomData() },  
  240.                             { name: '河南', value: randomData() },  
  241.                             { name: '云南', value: randomData() },  
  242.                             { name: '辽宁', value: randomData() },  
  243.                             { name: '黑龙江', value: randomData() },  
  244.                             { name: '湖南', value: randomData() },  
  245.                             { name: '安徽', value: randomData() },  
  246.                             { name: '山东', value: randomData() },  
  247.                             { name: '新疆', value: randomData() },  
  248.                             { name: '江苏', value: randomData() },  
  249.                             { name: '浙江', value: randomData() },  
  250.                             { name: '江西', value: randomData() },  
  251.                             { name: '湖北', value: randomData() },  
  252.                             { name: '广西', value: randomData() },  
  253.                             { name: '甘肃', value: randomData() },  
  254.                             { name: '山西', value: randomData() },  
  255.                             { name: '内蒙古', value: randomData() },  
  256.                             { name: '陕西', value: randomData() },  
  257.                             { name: '吉林', value: randomData() },  
  258.                             { name: '福建', value: randomData() },  
  259.                             { name: '贵州', value: randomData() },  
  260.                             { name: '广东', value: randomData() },  
  261.                             { name: '青海', value: randomData() },  
  262.                             { name: '西藏', value: randomData() },  
  263.                             { name: '四川', value: randomData() },  
  264.                             { name: '宁夏', value: randomData() },  
  265.                             { name: '海南', value: randomData() },  
  266.                             { name: '台湾', value: randomData() },  
  267.                             { name: '香港', value: randomData() },  
  268.                             { name: '澳门', value: randomData() }  
  269.                         ]  
  270.                     }  
  271.                 ]  
  272.             }  
  273.             nationMap.setOption(option, true, true)  
  274.             // nationMap.on('georoam', this.onDatazoom) // 缩放监听事件  
  275.         },  
  276.         /**  
  277.          *  
  278.          * @param {省份中文名} cnName  
  279.          * @param {省份拼音名} pyName  
  280.          */  
  281.         showProvince (cnName, pyName) {  
  282.             require('echarts/map/js/province/' + pyName + '.js')  
  283.             this.drawLine(cnName)  
  284.         },  
  285.         /**  
  286.          * 地图缩小/放大  
  287.          */  
  288.         onDatazoom () {  
  289.             console.log('地图放大，缩小')  
  290.             // const { detail, option } = this.state  
  291.             // const { zoom } = this.getZoom()  
  292.             // const threshold = 1.7  
  293.             // this.saveZoom() // 地图缩放后，将缩放值和center保存在状态中  
  294.             // if (zoom >= threshold && !detail) {  
  295.             //     // 切换详细地图  
  296.             //     option.geo.itemStyle.normal.borderColor = darkBlue  
  297.             //     option.geo.itemStyle.normal.shadowColor = darkBlue  
  298.             //     this.setState({  
  299.             //         detail: true,  
  300.             //         option,  
  301.             //         curMap: sqJson  
  302.             //     })  
  303.             //     this.drawMap(sqJson)  
  304.             // } else if (detail && zoom < threshold) {  
  305.             //     // 切换默认地图  
  306.             //     option.geo.itemStyle.normal.borderColor = defaultBlue  
  307.             //     option.geo.itemStyle.normal.shadowColor = defaultBlue  
  308.             //     this.setState({  
  309.             //         detail: false,  
  310.             //         option,  
  311.             //         curMap: geoJson  
  312.             //     })  
  313.             //     this.drawMap(geoJson)  
  314.             // }  
  315.         }  
  316.     }  
  317. }  
  318. </script>  

 

给地图加阴影

3.png

XML/HTML Code复制内容到剪贴板
  1. series: [  
  2.     {  
  3.         // name: '',  
  4.         type: 'map',  
  5.         mapType: area,  
  6.         itemStyle: {  
  7.             normal: {  
  8.                 borderColor: 'rgba(0, 0, 0, 0.2)',  
  9.                 // 设置扇形的阴影  
  10.                 shadowBlur: 20,  
  11.                 shadowColor: 'rgba(0,0,0,0.4)',  
  12.                 shadowOffsetX: -5,  
  13.                 shadowOffsetY: 5  
  14.             },  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/601.html

上一篇 无缝公告滚动
下一篇 vue实现仿淘宝详情页商品轮播效果
相关的文章
Powered by yoyo苏ICP备15045725号