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)
}
});
