下載

https://ext.dcloud.net.cn/plugin?id=271

描述

根據數據門店數量 地圖顏色逐步加深

效果

使用

目錄結構

新建index.vue （復制以下內容）

<template><view ><mapdemo></mapdemo></view> </template><script>import mapdemo from './mapdemo.vue' export default {data() {return {}},components: {mapdemo},} </script>```## 新建文件mapdemo.vue （復制以下內容） ```javascript <template><view class="content"><view class="charts-box" style="height: 400px;"><qiun-data-charts type="map" :canvas2d="true" :opts="config" canvasId="mapma" :chartData="chartsDataMap"tooltipFormat="tooltipFun" @getIndex="getIndex" /></view></view> </template><script>//下面是演示地圖數據 更希望是從服務器獲取// http://datav.aliyun.com/portal/school/atlas/area_selector 中國地圖的json資源，阿里云的資源地址//建議把json下載到本地 import mapdata from '@/mockdata/mapdata.json' //自己的存放路徑 我這是在ucharts 實例拷下來的 下面有我的這個文件//引用配置文件 用于改寫樣式覆蓋使用import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件庫下載下來就是這個路徑 可以自己改export default {data() {return {//地圖數據chartsDataMap: {series: []},// 覆蓋的是 optionconfig: {extra: {map: {mercator: true}}}};},created() {//@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 更詳細配置的查看此處// 文檔可看 https://ext.dcloud.net.cn/plugin?id=271//https://demo.ucharts.cn/#/ 在線生成工具 配置代碼config-ucharts.js內容uCharts.map = {"type": "map","canvasId": "","canvas2d": false,"background": "none","animation": true,"timing": "easeOut","duration": 1000,"color": ['#ff4455'],"padding": [0,0,0,0],"fontSize": 8,"rotate": false,"errorReload": true,"fontSize": 8,"fontColor": "#666666","enableScroll": false,"touchMoveLimit": 60,"enableMarkLine": false,"dataLabel": true,"dataPointShape": true,"dataPointShapeType": "solid","tapLegend": true,"extra": {"map": {"border": true,"mercator": false,"borderWidth": 1,"borderColor": "#666666","fillOpacity": 0.6,"activeBorderColor": "#55aa00","activeFillColor": "#FF0033", //設置 鼠標 懸停 地圖展示的背景顏色"activeFillOpacity": 1},"tooltip": {"showBox": true,"showArrow": true,"showCategory": false,"borderWidth": 0,"borderRadius": 0,"borderColor": "#000000","borderOpacity": 0.7,"bgColor": "#000000","bgOpacity": 0.7,"gridType": "solid","dashLength": 4,"gridColor": "#CCCCCC","fontColor": "#FFFFFF","splitLine": true,"horizentalLine": false,"xAxisLabel": false,"yAxisLabel": false,"labelBgColor": "#FFFFFF","labelBgOpacity": 0.7,"labelFontColor": "#666666"}}}//模擬從服務器獲取數據this.getServerData()//自定義格式化Tooltip顯示內容 uCharts.formatter.tooltipFun = (item, category, index, opts) => {// console.log(item, index, "=item, category, index, opts=")return item.data.storeSym ? `${item.name}地區門店數量：${item.data.storeSym}` : '暫無門面'}},methods: {//模擬從服務器獲取數據getServerData() {//因部分數據格式一樣，這里不同圖表引用同一數據源的話，需要深拷貝一下構造不同的對象//開發者需要自行處理服務器返回的數據，應與標準數據格式一致，注意series的data數值應為數字格式// this.chartsDataMap = {// series: mapdata.features,// }//模擬 接口數據 2 let data = [{storeSym: 823, //門店數量companyNumber: 0, //缺編人數storeName: '北京', //地區},{storeSym: 753, //門店數量companyNumber: 0, //缺編人數storeName: '天津', //地區},{storeSym: 653, //門店數量companyNumber: 0, //缺編人數storeName: '上海', //地區},{storeSym: 553, //門店數量companyNumber: 0, //缺編人數storeName: '新疆', //地區},{storeSym: 832, //門店數量companyNumber: 0, //缺編人數storeName: '西藏', //地區},]// this.chartsDataMap.series = mapdata.features.filter((x)=>this.storeName==x.properties.name)let mapseries = mapdata.features.map((item) => {//根據接口數據查找到當前匹配的數據let dataItem = data.find((x) => x.storeName == item.properties.name) || {storeSym: 0, //門店數量companyNumber: 0, //缺編人數storeName: item.properties.name, //地區}//添加到 json data中item.data = dataItem//設置顏色item.color = this.addColor(dataItem?.storeSym || 0)return item})this.chartsDataMap.series = mapseries},// 根據條件添加顏色addColor(count) {if (count > 800) {return '#bc3e10';} else if (count > 700) {return '#fc5902';} else if (count > 500) {return '#fc9c02';} else if (count > 400) {return '#fbdb0f';} else if (count > 200) {return '#93ce05';} else {return '#62ae02';}},//鼠標點擊地圖 會觸發該事件getIndex(e) { // 點擊地圖進行操作console.log(e, "===uCharts====")}}}; </script><style>.content {display: flex;flex-direction: column;flex: 1;}.charts-box {width: 100%;height: 360px;} </style>

新建mapdata.json

該地址提供下載
https://gitcode.net/weixin_42863800/hb-ucharts-demo2/-/blob/master/mapdata.json

總結

以上是生活随笔為你收集整理的uni-app使用ucharts地图(主要微信小程序-初步使用)的全部內容，希望文章能夠幫你解決所遇到的問題。

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