效果圖：

下載echarts

npm i echarts@4.9.0

導入

import * as echart from 'echarts'

html結構

<div style="width: 19.2rem; height: 10.8rem" id="chongqing-map"></div>

引入重慶的json文件

const dt = require('echarts/map/json/province/chongqing.json')

methods事件
areas數據是通過調用后端接口得到

// 重慶地圖chongqingMap(areas) {var myChart = echart.init(document.getElementById('chongqing-map'))echart.registerMap('dt', dt)const bgColors = [['#1770b5', '#0f6db2'], // '萬州區'['#2e779e', '#2a7da0'], // '涪陵區'['#2a9fcb', '#229ecb'], // '渝中區'['#1fabd5', '#219dc9'], // '大渡口區'['#23a0cf', '#2eaedc'], // '江北區'['#24a1cf', '#27a3d3'], // '沙坪壩區'['#249fce', '#239ac9'], // '九龍坡區'['#23a1cf', '#2eafdd'], // '南岸區'['#17a7be', '#18a2b8'], // '北碚區'['#337ba2', '#3389ae'], // '綦江區'['#1982b4', '#1e6098'], // '大足區'['#1ea8d1', '#219eca'], // '渝北區'['#5197d2', '#5298d3'], // '巴南區'['#2081b5', '#23629e'], // '黔江區'['#2892b8', '#2e779e'], // '長壽區'['#2c689b', '#2c81ad'], // '江津區'['#2896bd', '#2f7399'], // '合川區'['#265d9a', '#1f70ae'], // '永川區'['#2e779e', '#0ea9dd'], // '南川區'['#297c9e', '#27739c'], // '璧山區'['#286799', '#2b6597'], // '銅梁區'['#208cb6', '#24669d'], // '潼南區'['#187bb8', '#1d59a0'], // '榮昌區'['#229bbe', '#26779e'], // '梁平縣'['#2797c2', '#296c9e'], // '城口縣'['#2d709e', '#296b9d'], // '豐都縣'['#238fb2', '#267a9f'], // '墊江縣'['#018897', '#0292a2'], // '武隆縣'['#2d6d9f', '#2b6c9d'], // '忠縣'['#24669b', '#1f6597'], // '云陽縣'['#206499', '#1d659a'], // '奉節縣'['#1672ae', '#1b5295'], // '巫山縣'['#2174ad', '#225696'], // '巫溪縣'['#296ba2', '#28689d'], // '石柱土家族自治縣'['#1d6aad', '#236aad'], // '秀山土家族苗族自治縣'['#1d74b0', '#215fa1'], // '酉陽土家族苗族自治縣'['#21719f', '#227ba8'], // '彭水苗族土家族自治縣'['#3392c2', '#2d679e'], // '開州區']const splitList = dt.features.map((v, index) => {const { name: label } = v.propertiesconst Area = areas.find((v) => v['行政區劃'].substr(0, 2) === label.substr(0, 2))return {label,start: index,end: index,fzl: Area['事故率'],color: bgColors[index][0],}})var option = {series: [{type: 'map3D',name: '重慶',selectedMode: 'single', // 地圖高亮單選boxDepth: 95, // 地圖傾斜度regionHeight: 3, // 地圖高度map: 'dt',label: {show: true, // 是否顯示市textStyle: {color: '#FFFFFF', // 文字顏色fontSize: 14, // 文字大小backgroundColor: 'transparent',},// 自定義label值// formatter: '\t{c}\n{b}',formatter: function ({ data }) {return (data.name.substr(0, 2) +' ' +data.fzl +'%')},},itemStyle: {// 漸變色normal: {opacity: 0.9,borderColor: '#DDD',borderWidth: 1, // 分界線wdith// areaColor: {// type: 'radial',// x: 0.5,// y: 0.5,// r: 0.8,// colorStops: [// {// offset: 0,// color: '#000', // 0% 處的顏色// },// {// offset: 1,// color: '#fff', // 100% 處的顏色// },// ],// globalCoord: true, // 缺省為 false// },},},emphasis: {label: {show: true, // 是否顯示高亮textStyle: {color: '#fff', // 高亮文字顏色},},itemStyle: {show: true, // 是否顯示高亮color: '#FEB65C', // 地圖高亮顏色},},symbolSize: [8, 10],symbol: '../../assets/imgs/zuobiao.png', // 定位小圖標data: splitList.map((v, index) => {return { name: v.label, value: index, fzl: v.fzl }}),shading: 'realistic',// 真實感材質相關配置 shading: 'realistic'時有效realisticMaterial: {detailTexture: '#fff', // 紋理貼圖textureTiling: 1, // 紋理平鋪，1是拉伸，數字表示紋理平鋪次數roughness: 1, // 材質粗糙度，0完全光滑，1完全粗糙metalness: 0, // 0材質是非金屬 ，1金屬roughnessAdjust: 0,},viewControl: {distance: 125, // 地圖視角 控制初始大小// rotateSensitivity: 1, // 旋轉zoomSensitivity: 1, // 縮放// autoRotate: true,// autoRotateDirection:'ccw'// 地圖平移panMouseButton: 'left',rotateMouseButton: 'right',center: [5, -10, 0],},},],dataRange: {show: false,splitList: splitList,},animation: true,animationDurationUpdate: 5000,}myChart.setOption(option)// myChart.setOption(option)myChart.on('click', function (e) {console.log(e)})},

注意：echarts不能使用高于4.9.0版本，4.9.0以上版本在依賴包里已經沒有地圖json數據。

總結

以上是生活随笔為你收集整理的重庆3d地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。