devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts地图3D效果_echarts地图立体效果

作者：2023面试高手 | 2024-02-23 00:34:03

赞

踩

echarts地图立体效果


 

  1. <template>
  2.     <div class="app-container">
  3.         <div class="chart-wrapper">
  4.             <div id="chinaMap" style="width: 100%;height: 80vh;"></div>
  5.         </div>
  6.     </div>
  7. </template>
  8. <script>
  9.     import * as echarts from 'echarts'
  10.     import chinaJson from './china.json' // 这个是中国地图json 
  11.     import 'echarts-gl'
  12.     export default {
  13.         name: '',
  14.         data() {
  15.             return {
  16.                 chinaMapData: [{
  17.                         name: '东北',
  18.                         value: this.randomValue(),
  19.  
  20.                     },
  21.                     {
  22.                         name: '华北',
  23.                         value: this.randomValue()
  24.                     },
  25.                     {
  26.                         name: '西北',
  27.                         value: this.randomValue()
  28.                     },
  29.                     {
  30.                         name: '西南',
  31.                         value: this.randomValue()
  32.                     },
  33.                     {
  34.                         name: '华中',
  35.                         value: this.randomValue()
  36.                     },
  37.                     {
  38.                         name: '华南',
  39.                         value: this.randomValue()
  40.                     },
  41.                     {
  42.                         name: '华东',
  43.                         value: this.randomValue()
  44.                     }
  45.                 ],
  46.                 chinaDaquGeo: {}
  47.             }
  48.         },
  49.         methods: {
  50.             progressFormat(percentage) {
  51.                 return ""
  52.             },
  53.             randomValue() {
  54.                 return Math.round(Math.random() * 1000);
  55.             },
  56.             drawChinaMap(id) {
  57.                 this.mapCharts = echarts.init(document.getElementById(id));
  58.                 var option = {
  59.                     tooltip: {
  60.                         // show:false
  61.                         // formatter: function(params, ticket, callback) {
  62.                         //     return params.seriesName + '<br />' + params.name + '：' + params.value
  63.                         // } //数据格式化
  64.                     },
  65.                     // visualMap使用了不能单独对板块设置颜色 （geo-> regions -> itemStyle -> areaColor ）
  66.                     visualMap: {
  67.                         min: 0,
  68.                         max: 1500,
  69.                         left: 'left',
  70.                         top: 'bottom',
  71.                         type: "piecewise",
  72.                         //text: ['高','低'],//取值范围的文字
  73.                         inRange: {
  74.                             color: ['#e0ffff', '#006edd'] //取值范围的颜色
  75.                         },
  76.                         show: true //图注
  77.                     },
  78.                     // geo: {
  79.                     //     map: 'china',
  80.                     //     roam: true, //不开启缩放和平移
  81.                     //     zoom: 1, //视角缩放比例
  82.                     //     center: [108.5525, 34.3227],
  83.                     //     label: {
  84.                     //         normal: {
  85.                     //             show: true,
  86.                     //             fontSize: '18',
  87.  
  88.                     //             color: 'rgba(0,0,0,0.7)'
  89.                     //         }
  90.                     //     },
  91.                     //     regions: [{ // 可对单个地图区域进行设置
  92.                     //         name: '华北', // 所对应的地图区域的名称
  93.                     //         //regionHeight: '',            // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
  94.                     //         itemStyle: { // 单个区域的样式设置
  95.                     //             color: '#00FF00',
  96.                     //             opacity: 1,
  97.                     //             borderWidth: 0.4,
  98.                     //             areaColor: '#5F9EA0'
  99.                     //         },
  100.                     //         emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) 
  101.                     //             label: { // label高亮时的配置
  102.                     //                 show: true,
  103.                     //                 textStyle: {
  104.                     //                     color: '#fff   ', // 高亮时标签颜色变为 白色
  105.                     //                     fontSize: 15, // 高亮时标签字体 变大
  106.                     //                 }
  107.                     //             },
  108.                     //             itemStyle: { // itemStyle高亮时的配置
  109.                     //                 areaColor: '#5F9EA0', // 高亮时地图板块颜色改变
  110.                     //             }
  111.                     //         },
  112.                     //     }, {
  113.                     //         name: '西南',
  114.                     //         itemStyle: {
  115.                     //                 areaColor: 'red',
  116.                     //                 color: 'red',
  117.                     //                  borderColor:'red'
  118.                     //             },
  119.                     //         emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) 
  120.                     //             label: { // label高亮时的配置
  121.                     //                 show: true,
  122.                     //                 textStyle: {
  123.                     //                     color: '#fff   ', // 高亮时标签颜色变为 白色
  124.                     //                     fontSize: 15, // 高亮时标签字体 变大
  125.                     //                 }
  126.                     //             },
  127.                     //             itemStyle: { // itemStyle高亮时的配置
  128.                     //                 areaColor: '#F3B329', // 高亮时地图板块颜色改变
  129.                     //             }
  130.                     //         },
  131.                     //     }],
  132.                     //     itemStyle: {
  133.                     //         normal: {
  134.                     //             borderColor: 'rgba(0, 0, 0, 0.2)'
  135.                     //         },
  136.                     //         emphasis: {
  137.                     //             areaColor: '#F3B329', //鼠标选择区域颜色
  138.                     //             shadowOffsetX: 0,
  139.                     //             shadowOffsetY: 0,
  140.                     //             shadowBlur: 20,
  141.                     //             borderWidth: 0,
  142.                     //             shadowColor: 'rgba(0, 0, 0, 0.5)'
  143.                     //         }
  144.                     //     }
  145.                     // },
  146.                     geo: [{
  147.                                                 map: 'china',
  148.                                                 zlevel:5,
  149.                                                 label: {
  150.                                                     show: true,
  151.                                                     color: '#eee'
  152.                                                 },
  153.                                                 itemStyle: {
  154.                                                     color: '#2075B8', // 背景
  155.                                                     borderWidth: '1', // 边框宽度
  156.                                                     borderColor: '#fff', // 边框颜色
  157.                                                 }
  158.                                             },
  159.                                             {
  160.                                                 map: 'china',
  161.                                                 top:'11%',
  162.                                                 zlevel:4,
  163.                                                 itemStyle: {
  164.                                                     color: '#3C5FA1', // 背景
  165.                                                     borderWidth: '1', // 边框宽度
  166.                                                     borderColor: '#3C5FA1', // 边框颜色
  167.                                                 }
  168.                                             },
  169.                                             {
  170.                                                 map: 'china',
  171.                                                 top:'12%',
  172.                                                 zlevel:3,
  173.                                                 itemStyle: {
  174.                                                     color: '#163F6C', // 背景
  175.                                                     borderWidth: '1', // 边框宽度
  176.                                                     borderColor: '#163F6C', // 边框颜色
  177.                                                 }
  178.                                             },
  179.                                             {
  180.                                                 map: 'china',
  181.                                                 top:'13%',
  182.                                                 zlevel:2,
  183.                                                 itemStyle: {
  184.                                                     color: '#31A0E6', // 背景
  185.                                                     borderWidth: '1', // 边框宽度
  186.                                                     borderColor: '#31A0E6', // 边框颜色
  187.                                                     shadowColor: '#fff',  // 外部阴影 
  188.                                                     shadowBlur:'10'
  189.                                                 }
  190.                                             }
  191.                                         ],
  192.                     
  193.                 
  194.                     series: [
  195.                         // {
  196.                         //            type: "scatter",
  197.                         //            roam: false,
  198.                         //            zoom: 1,
  199.  
  200.                         //            coordinateSystem: "geo",
  201.                         //            data: [[121.221, 23.43, 12]], //散点的数据
  202.                         //            symbol: function (params) {
  203.                         //               return "image://http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png" ;
  204.                         //              // if (params[2] === "0") {
  205.                         //              //   return "image://" + process.env.BASE_URL + "map/1.svg";
  206.                         //              // } else if (params[2] === "1") {
  207.                         //              //   return "image://http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png" ;
  208.                         //              // }
  209.                         //            }, // svg图标
  210.                         //            z: 2,
  211.                         //            symbolSize: [48.63, 40], // symbols图标大小
  212.                         //          },
  213.  
  214.                         {
  215.                             name: '事业部',
  216.                             type: 'map',
  217.                                 // type: 'map3D',
  218.                             geoIndex: 0,
  219.                             data: this.chinaMapData,
  220.  
  221.                             markPoint: { //图表标注。
  222.                                 label: {
  223.                                     normal: {
  224.                                         show: true,
  225.                                     },
  226.                                     emphasis: {
  227.                                         show: true,
  228.                                     }
  229.                                 },
  230.                                 itemStyle: {
  231.                                     normal: {
  232.                                         color: 'rgba(72,150,128,1)'
  233.                                     }
  234.                                 },
  235.                                 data: [{
  236.                                     name: "四川移动",
  237.                                     coord: [
  238.                                         123.97, 47.33 //坐标，通过百度地图提取
  239.                                     ],
  240.                                     symbol: 'http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png', // 标注图片地址路径
  241.                                     symbolSize: 32,
  242.                                     service: '这个是自定义的字段，不是echarts的配置',
  243.                                     url: '这个也是自定义的字段，不是echarts的配置'
  244.                                 }, {
  245.                                     name: "河南电信",
  246.                                     coord: [
  247.                                         105.97, 36.33
  248.                                     ],
  249.                                     symbol: 'http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png', // 标注图片地址路径
  250.                                     symbolSize: 32,
  251.                                     service: '自定义',
  252.                                     url: 'http://www.idcd.com'
  253.                                 }, ]
  254.                             }
  255.                         },
  256.                         // 散点图
  257.                         { // 涟漪效果
  258.                             name: 'Top 6',
  259.                             type: 'effectScatter',
  260.                             coordinateSystem: 'geo',
  261.                             data: [{
  262.                                     name: "苏尼特左旗",
  263.                                     value: [113.653412, 43.854108, 4500]
  264.                                 },
  265.                                 {
  266.                                     name: "二连浩特市",
  267.                                     value: [111.97981, 43.652895, 3560]
  268.                                 },
  269.                                 {
  270.                                     name: "阿巴嘎旗",
  271.                                     value: [114.970618, 44.022728, 3300]
  272.                                 },
  273.                                 {
  274.                                     name: "苏尼特右旗",
  275.                                     value: [112.65539, 42.746662, 2800]
  276.                                 },
  277.                                 {
  278.                                     name: "正镶白旗",
  279.                                     value: [115.031423, 42.286807, 2100]
  280.                                 },
  281.                                 {
  282.                                     name: "太仆寺旗",
  283.                                     value: [115.28728, 41.895199, 1900]
  284.                                 }
  285.                             ],
  286.                             symbolSize: function(val) {
  287.                                 return val[2] / 200;
  288.                             },
  289.                             encode: {
  290.                                 value: 2
  291.                             },
  292.                             showEffectOn: 'render',
  293.                             rippleEffect: {
  294.                                 brushType: 'stroke', //fill 、stroke
  295.                                 color: 'red'
  296.                             },
  297.                             emphasis: {
  298.  
  299.                                 scale: false
  300.                             },
  301.                             label: {
  302.                                 position: 'left',
  303.                                 // formatter: '{b}',
  304.                                 position: 'right',
  305.                                 show: true,
  306.                                 // formatter:'{b}'
  307.                                 formatter: '{b}: {@score}'
  308.                                 // formatter: function(params) {
  309.                                 //     // console.log(params)
  310.                                 //     return `${params.data.name}:${params.data.value[2]}个`
  311.                                 // } //数据格式化
  312.                             },
  313.                             hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
  314.                             itemStyle: {
  315.                                 shadowBlur: 10,
  316.                                 shadowColor: 'rgba(230, 10, 10, 1)',
  317.                                 color: 'red'
  318.                             },
  319.                             zlevel: 8
  320.                         }
  321.  
  322.                     ]
  323.                 };
  324.                 this.mapCharts.setOption(option);
  325.  
  326.                 this.mapCharts.on('click', params => {
  327.                     console.log(params)
  328.                     let clickRegionCode = params.data.cityCode;
  329.                     // this.getGeoJson(clickRegionCode)
  330.                     //     .then(regionGeoJson => this.initEcharts(regionGeoJson.data, params.data.cityCode))
  331.                     //     .catch(err => {
  332.                     //         this.getGeoJson('440000').then(GdGeoJson => this.initEcharts(GdGeoJson.data,
  333.                     //             '440000'))
  334.                     //     })
  335.                 })
  336.                 // },
  337.  
  338.                 /*this.mapCharts.on('click', function (params) {
  339.                   alert(params.name);
  340.                 });*/
  341.             },
  342.  
  343.             //划分大区
  344.             mergeProvinces(chinaJson, names, properties) { //合并大区里省份的coordinates
  345.                 var features = chinaJson.features;
  346.                 var polygons = [];
  347.                 for (var i = 0; i < names.length; i++) {
  348.                     var polygonsCoordinates = [];
  349.                     for (var z = 0; z < names[i].length; z++) {
  350.                         for (var j = 0; j < features.length; j++) {
  351.  
  352.                             if (features[j].properties.name == names[i][z]) {
  353.                                 // polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
  354.                                 // if (features[j].geometry.coordinates[0].constructor == String) { //合并coordinates
  355.                                 //     for (var l = 0; l < features[j].geometry.coordinates.length; l++) {
  356.                                 //         polygonsCoordinates.push(features[j].geometry.coordinates[l]);
  357.                                 //     }
  358.  
  359.                                 // } else if (features[j].geometry.coordinates[0].constructor == Array) {
  360.                                 for (var k = 0; k < features[j].geometry.coordinates.length; k++) {
  361.  
  362.                                     if (features[j].properties.name == '内蒙古自治区') {
  363.                                         polygonsCoordinates.push(features[j].geometry.coordinates[k]);
  364.                                     } else {
  365.                                         for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
  366.  
  367.                                             polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
  368.  
  369.                                         }
  370.                                     }
  371.                                     //         for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
  372.  
  373.                                     //                 polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
  374.  
  375.                                     //         }
  376.                                 }
  377.                                 // }
  378.                                 break;
  379.                             }
  380.                         }
  381.                     }
  382.                     polygons.push(polygonsCoordinates);
  383.                 }
  384.  
  385.                 // 构建新的合并区域
  386.                 var features = [];
  387.  
  388.                 for (var a = 0; a < names.length; a++) {
  389.                     var feature = {
  390.                         id: features.length.toString(),
  391.                         type: "FeatureCollection",
  392.                         geometry: {
  393.                             type: "Polygon",
  394.                             coordinates: polygons[a]
  395.                         },
  396.                         properties: {
  397.                             name: properties.name[a] || "",
  398.                             childNum: polygons[a].length
  399.                         }
  400.                     };
  401.                     if (properties.cp[a]) {
  402.                         feature.properties.cp = properties.cp[a];
  403.                     }
  404.  
  405.                     // 将新的合并区域添加到地图中
  406.                     features.push(feature);
  407.                 }
  408.                 console.log(polygons)
  409.                 this.chinaDaquGeo.type = "FeatureCollection";
  410.                 this.chinaDaquGeo.features = features;
  411.             },
  412.  
  413.             repRegionStrategy() {
  414.                 var params = {
  415.                     names: [ //把各个大区的省份用二维数组分开
  416.                         ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
  417.                         ["黑龙江省", "吉林省", "辽宁省"],
  418.                         ['山东省', '江苏省', '安徽省', '江西省', '浙江省', '福建省', '上海市', '台湾省'],
  419.                         ['河南省', '湖北省', '湖南省'],
  420.                         ['广东省', '广西壮族自治区', '海南省', '香港特别行政区', '澳门特别行政区'],
  421.                         ['重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
  422.                         ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
  423.                     ],
  424.                     properties: { //自定义大区的名字，要和上面的大区省份一一对应
  425.                         name: ['华北', '东北', '华东', '华中', '华南', '西南', '西北'],
  426.                         cp: [ //经纬度可以自己随意定义
  427.                             [116.24, 40.54],
  428.                             [126.32, 43.50],
  429.                             [121.28, 31.13],
  430.                             [114.20, 30.32],
  431.                             [113.15, 23.08],
  432.                             [104.04, 30.39],
  433.                             [103.49, 36.03]
  434.                         ]
  435.                     }
  436.                 };
  437.                 this.mergeProvinces(chinaJson, params.names, params.properties);
  438.             }
  439.         },
  440.         //调用
  441.         created() {
  442.             this.repRegionStrategy()
  443.             // 注册地图 
  444.             echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
  445.             
  446.         },
  447.         mounted() {
  448.             // this.repRegionStrategy()
  449.             // // 注册地图
  450.             // this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
  451.             this.$nextTick(function() {
  452.                 this.drawChinaMap('chinaMap')
  453.                 // this.repRegionStrategy()
  454.                 // 注册地图
  455.                 // this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
  456.             })
  457.         }
  458.     }
  459. </script>
  460. <style scoped>
  461.     #chinaMap {
  462.         background-color: beige;
  463.     }
  464. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/132367
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号