uniapp使用秋云echarts写中国地图

1.插件地址：https://ext.dcloud.net.cn/plugin?id=271

2.页面代码

<view>

<qiun-data-charts type="map" :canvas2d="true" :opts="config" canvasId="mapma" :chartData="chartsDataMaps"

tooltipFormat="tooltipFun" @getIndex="getIndex" />

</view>

</template>

<script>

import mapdata from '@/common/chinaMap.json'

import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js'

export default {

name:"mapChina",

data() {

return {

chartsDataMaps: {

series: []

},

// 覆盖的是 option

config: {

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": true,

"background": "none",

"animation": true,

"timing": "easeOut",

"duration": 1000,

"color": ['#FFFFF0'],

"padding": [

0,

0,

0,

0

],

"fontSize": 8,

"rotate": false,

"errorReload": true,

"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": "#ccc",

"activeFillColor": "#FFFFF0", //设置 鼠标 悬停 地图展示的背景颜色

"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()

},

methods: {

//模拟从服务器获取数据

getServerData() {

//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象

//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式

console.log(mapdata)

this.chartsDataMaps.series = mapdata.features

},

// 根据条件添加颜色

addColor(count) {

},

//鼠标点击地图 会触发该事件

getIndex(e) { // 点击地图进行操作

this.$emit('chartsDataMaps',mapdata.features[e.currentIndex])

}

},

}

</script>

<style lang="less">

</style>

3.chinaMap.json需要自己去 http://datav.aliyun.com/tools/atlas/下载

4.关于二级省市的数据，我选择直接去请求

uni.request({

    url:`https://geo.datav.aliyun.com/areas_v2/bound/${data.properties.adcode}_full.json`, //仅为示例，并非真实接口地址。

    success: (res) => {

console.log(res)

console.log(111)

        this.chartsDataMapa.series = res.data

        console.log(this.chartsDataMapa)

        // this.chinaCityType = true

    },

fail(reg) {

console.log(reg)

}

});