下載

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

描述

根據(jù)數(shù)據(jù)門店數(shù)量 地圖顏色逐步加深

效果

使用

目錄結(jié)構(gòu)

新建index.vue （復(fù)制以下內(nèi)容）

<template><view ><mapdemo></mapdemo></view> </template><script>import mapdemo from './mapdemo.vue' export default {data() {return {}},components: {mapdemo},} </script>```## 新建文件mapdemo.vue （復(fù)制以下內(nèi)容） ```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>//下面是演示地圖數(shù)據(jù) 更希望是從服務(wù)器獲取// http://datav.aliyun.com/portal/school/atlas/area_selector 中國地圖的json資源，阿里云的資源地址//建議把json下載到本地 import mapdata from '@/mockdata/mapdata.json' //自己的存放路徑 我這是在ucharts 實(shí)例拷下來的 下面有我的這個(gè)文件//引用配置文件 用于改寫樣式覆蓋使用import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件庫下載下來就是這個(gè)路徑 可以自己改export default {data() {return {//地圖數(shù)據(jù)chartsDataMap: {series: []},// 覆蓋的是 optionconfig: {extra: {map: {mercator: true}}}};},created() {//@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 更詳細(xì)配置的查看此處// 文檔可看 https://ext.dcloud.net.cn/plugin?id=271//https://demo.ucharts.cn/#/ 在線生成工具 配置代碼config-ucharts.js內(nèi)容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", //設(shè)置 鼠標(biāo) 懸停 地圖展示的背景顏色"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"}}}//模擬從服務(wù)器獲取數(shù)據(jù)this.getServerData()//自定義格式化Tooltip顯示內(nèi)容 uCharts.formatter.tooltipFun = (item, category, index, opts) => {// console.log(item, index, "=item, category, index, opts=")return item.data.storeSym ? `${item.name}地區(qū)門店數(shù)量：${item.data.storeSym}` : '暫無門面'}},methods: {//模擬從服務(wù)器獲取數(shù)據(jù)getServerData() {//因部分?jǐn)?shù)據(jù)格式一樣，這里不同圖表引用同一數(shù)據(jù)源的話，需要深拷貝一下構(gòu)造不同的對象//開發(fā)者需要自行處理服務(wù)器返回的數(shù)據(jù)，應(yīng)與標(biāo)準(zhǔn)數(shù)據(jù)格式一致，注意series的data數(shù)值應(yīng)為數(shù)字格式// this.chartsDataMap = {// series: mapdata.features,// }//模擬 接口數(shù)據(jù) 2 let data = [{storeSym: 823, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: '北京', //地區(qū)},{storeSym: 753, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: '天津', //地區(qū)},{storeSym: 653, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: '上海', //地區(qū)},{storeSym: 553, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: '新疆', //地區(qū)},{storeSym: 832, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: '西藏', //地區(qū)},]// this.chartsDataMap.series = mapdata.features.filter((x)=>this.storeName==x.properties.name)let mapseries = mapdata.features.map((item) => {//根據(jù)接口數(shù)據(jù)查找到當(dāng)前匹配的數(shù)據(jù)let dataItem = data.find((x) => x.storeName == item.properties.name) || {storeSym: 0, //門店數(shù)量companyNumber: 0, //缺編人數(shù)storeName: item.properties.name, //地區(qū)}//添加到 json data中item.data = dataItem//設(shè)置顏色item.color = this.addColor(dataItem?.storeSym || 0)return item})this.chartsDataMap.series = mapseries},// 根據(jù)條件添加顏色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';}},//鼠標(biāo)點(diǎn)擊地圖 會(huì)觸發(fā)該事件getIndex(e) { // 點(diǎn)擊地圖進(jìn)行操作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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。