更新记录

1.0.0（2026-09-24）

首次发布 wui-charts-chinaMap 地图·图表 组件 uniapp-x 蒸汽模式下跨全端。

平台兼容性

uni-app x(5.23)

其他

wui-charts-chinaMap 地图·图表 组件 开发文档介绍

简介：

wui-charts-chinaMap 地图·图表 组件 仅支持uniapp-x项目蒸汽模式下跨全端通用，支持js / ts/ uts 跨语言使用，高性能。

优势：

组件逻辑依然采用uts语法，支持新版Vapor蒸汽模式，跨全端，体积小，高性能。

使用说明：

通过插件市场下载会自动导入插件到项目中,然后就可以直接写wui-charts-chinaMap标签使用了。

下面是标签的使用示例，这里data是UTSJSONObject[]数组数据类型下面有专题介绍。

<wui-charts-chinaMap :data="data"></wui-charts-chinaMap>

wui-charts-chinaMap 组件的所有属性如下：

组件的 @menuEvent="menuEvent" 点击画布事件监听：

    <template>
        <view class="map-box">
            <wui-charts-chinaMap  :data="data" @menuEvent="menuEvent"></wui-charts-chinaMap>
        </view>
    </template>

    <script setup lang="uts">
        //示例替换掉新疆的填充色为#fff
        let data = [{
            seriesName: '新疆',
            value: '600',
            itemFill: '#fff'
        }];
        //绑定menuEvent事件获取被选中的数据
        //注意：isClick为true时生效，组件默认是true
        function menuEvent(e : UTSJSONObject) {
            console.log(e);
        }
    </script>
    <style>
    </style>

menuEvent(datas : UTSJSONObject) 获取到的datas属性介绍

组件的 data 数组每一项的 UTSJSONObject 属性说明介绍：

组件的 styleOpts 对象属性说明介绍：

wui-charts-ball 组件 对外暴露的方法如下：

selectedState(selec : UTSJSONObject) 参数介绍：

组件使用代码示例

<template>
    <view class="map-box">
        <view class="btn-box">
            <button class="btn" size="mini" @click="clikWH">修改宽高尺寸</button>
            <button class="btn" size="mini" @click="upTitle">修改地图标题</button>
            <button class="btn" size="mini" @click="upMapbor">修改边框颜色</button>
            <button class="btn" size="mini" @click="btnClik">{{btntxt}}</button>
        </view>

        <view class="btn-box">
            <button class="btn" size="mini" @click="upPadding">修改画布边距</button>
            <button class="btn" size="mini" @click="upBgColor">修改背景颜色</button>
            <button class="btn" size="mini" @click="upFont">修改文字大小</button>
            <button class="btn" size="mini" @click="upNameColor">修改文字颜色</button>
        </view>
        <view style="flex: 1;width: 100%;margin-bottom: 5px;">
            <button style="flex: 1;width: 100%;" size="mini" @click="upTitleColor">修改标题颜色</button>
        </view>
        <wui-charts-chinaMap ref="chinaMap" :data="data" :selected="selected" :styleOpts="styleOpts" :title="title" :isAnimate="isAnimate"
            @menuEvent="menuEvent" :isMessage="true" :isClick="true"></wui-charts-chinaMap>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('河北')">河北</button>
            <button class="btn" size="mini" @click="btnheClik('北京')">北京</button>
            <button class="btn" size="mini" @click="btnheClik('吉林')">吉林</button>
            <button class="btn" size="mini" @click="btnheClik('辽宁')">辽宁</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('黑龙江')">黑龙江</button>
            <button class="btn" size="mini" @click="btnheClik('内蒙古')">内蒙古</button>
            <button class="btn" size="mini" @click="btnheClik('新疆')">新疆</button>
            <button class="btn" size="mini" @click="btnheClik('西藏')">西藏</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('海南')">海南</button>
            <button class="btn" size="mini" @click="btnheClik('香港')">香港</button>
            <button class="btn" size="mini" @click="btnheClik('天津')">天津</button>
            <button class="btn" size="mini" @click="btnheClik('台湾')">台湾</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('广东')">广东</button>
            <button class="btn" size="mini" @click="btnheClik('湖南')">湖南</button>
            <button class="btn" size="mini" @click="btnheClik('云南')">云南</button>
            <button class="btn" size="mini" @click="btnheClik('上海')">上海</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('湖北')">湖北</button>
            <button class="btn" size="mini" @click="btnheClik('陕西')">陕西</button>
            <button class="btn" size="mini" @click="btnheClik('山西')">山西</button>
            <button class="btn" size="mini" @click="btnheClik('宁夏')">宁夏</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('四川')">四川</button>
            <button class="btn" size="mini" @click="btnheClik('重庆')">重庆</button>
            <button class="btn" size="mini" @click="btnheClik('广西')">广西</button>
            <button class="btn" size="mini" @click="btnheClik('江西')">江西</button>
        </view>
        <view class="btn-box">
            <button class="btn" size="mini" @click="btnheClik('甘肃')">甘肃</button>
            <button class="btn" size="mini" @click="btnheClik('青海')">青海</button>
            <button class="btn" size="mini" @click="btnheClik('山东')">山东</button>
            <button class="btn" size="mini" @click="btnheClik('河南')">河南</button>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { mapData } from './mapData.uts';
    let data = mapData;
    let selected = '新疆';//设置初始化新疆被选中
    let styleOpts = ref({
        mapBorColor: "rgba(000,000,255,0.3)",
        bgColor: "#ffffff",
        regBgColor: "#ffff00",
        regBorColor: "#0000ff",
        seriesNameColor: "#333333",
        font: 8
    });
    let isAnimate = ref(true);
    let title = ref('地图·图表');
    let btntxt = ref('关闭进场动画');
    function menuEvent(e : UTSJSONObject) {
        console.log(e);
    }
    const chinaMap = ref<ComponentPublicInstance | null>(null);
    function btnheClik(seriesName : string) {
        chinaMap.value!.$callMethod('selectedState', {
            seriesName:seriesName,
            success:(datas:UTSJSONObject)=>{
                console.log(datas);
            }
        });
    }
    /* 修改背景 */
    function upBgColor() {
        if (styleOpts.value['bgColor'] != "#ffffff") {
            styleOpts.value['bgColor'] = "#ffffff";
        } else {
            styleOpts.value['bgColor'] = "#000000";
        }
    }
    /* 修改标题颜色 */
    function upTitleColor() {
        if (styleOpts.value['titleColor'] == "#ff0000") {
            styleOpts.value['titleColor'] = "#333333";
        } else {
            styleOpts.value['titleColor'] = "#ff0000";
        }
    }
    /* 修改地图字体大小*/
    function upFont() {
        if ((styleOpts.value['font'] as number) != 8) {
            styleOpts.value['font'] = 8;
        } else {
            styleOpts.value['font'] = 10;
        }
    }
    /* 设置地图文字色 */
    function upNameColor() {
        if (styleOpts.value['seriesNameColor'] != "#333333") {
            console.log(999);
            styleOpts.value['seriesNameColor'] = "#333333";
        } else {
            styleOpts.value['seriesNameColor'] = "#b9b9b9";
        }
    }
    /* 设置边距 */
    function upPadding() {
        if ((styleOpts.value['padding'] as number) != 10) {
            styleOpts.value['padding'] = 10;
        } else {
            styleOpts.value['padding'] = 5;
        }
    }
    /* 修改宽高 */
    function clikWH() {
        if (styleOpts.value['width'] != 400) {
            styleOpts.value['width'] = 400;
            styleOpts.value['height'] = 300;
        } else {
            styleOpts.value['width'] = 350;
            styleOpts.value['height'] = 250;
        }
    }
    /* 修改标题 */
    let isTitle = true;
    function upTitle() {
        if (isTitle) {
            title.value = '警示⚠区域'
            isTitle = false;
        } else {
            isTitle = true;
            title.value = '地图·图表';
        }
    }

    /* 修改地图边框色 */
    function upMapbor() {
        if (`${styleOpts.value.mapBorColor}` != "rgba(000,000,255,0.3)") {
            styleOpts.value.mapBorColor = "rgba(000,000,255,0.3)"
        } else {
            styleOpts.value.mapBorColor = "rgba(255, 101, 12, 0.3)"
        }
    }

    /* 渲染进场动画 */
    function btnClik() {
        isAnimate.value = isAnimate.value ? false : true;
        btntxt.value = isAnimate.value ? '关闭进场动画' : '开启进场动画';
    }
</script>

<style>
    .map-box {
        align-items: center;
        background-color: #eee;
    }

    .btn-box {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
    }

    .btn {
        width: 80px;
    }
</style>

mapData.uts定义数据示例。

export const mapData = [{
        seriesName: '福建',
        value: '600',
        itemFill: '#fff'
    },
    {
        seriesName: '江西',
        value: '1300',
        itemFill: '#ff0000'
    },
    {
        seriesName: '浙江',
        value: '1050',
        itemFill: '#fff'
    },
    {
        seriesName: '安徽',
        value: '1000',
        itemFill: '#fff'
    },
    {
        seriesName: '江苏',
        value: '1009',
        itemFill: 'rgba(255, 0, 0, 0.8)'
    },
    {
        seriesName: '山东',
        value: '1003',
        itemFill: 'rgba(255, 0, 0, 0.8)'
    },
    {
        seriesName: '河北',
        value: '1002',
        itemFill: '#fff'
    },
    {
        seriesName: '天津',
        value: '1009',
        itemFill: '#fff'
    },
    {
        seriesName: '北京',
        value: '222',
        itemFill: '#fff'
    },
    {
        seriesName: '上海',
        value: '222',
        itemFill: '#fff'
    },
    {
        seriesName: '辽宁',
        value: '1006',
        itemFill: '#fff'
    },
    {
        seriesName: '吉林',
        value: '1001',
        itemFill: '#fff'
    },
    {
        seriesName: '黑龙江',
        value: '1000',
        itemFill: '#fff'
    },
    {
        seriesName: '内蒙古',
        value: '100',
        itemFill: '#fff'
    },
    {
        seriesName: '新疆',
        value: '10',
        itemFill: 'rgba(255, 0, 0, 0.8)'
    },
    {
        seriesName: '甘肃',
        value: '2100',
        itemFill: '#fff'
    },
    {
        seriesName: '青海',
        value: '104',
        itemFill: '#fff'
    },
    {
        seriesName: '西藏',
        value: '100',
        itemFill: '#fff'
    },
    {
        seriesName: '宁夏',
        value: '104',
        itemFill: '#fff'
    },
    {
        seriesName: '四川',
        value: '107',
        itemFill: '#fff'
    },
    {
        seriesName: '云南',
        value: '1009',
        itemFill: '#fff'
    },
    {
        seriesName: '陕西',
        value: '160',
        itemFill: '#fff'
    },
    {
        seriesName: '重庆',
        value: '100',
        itemFill: '#fff'
    },
    {
        seriesName: '贵州',
        value: '180',
        itemFill: '#fff'
    },
    {
        seriesName: '山西',
        value: '190',
        itemFill: '#fff'
    },
    {
        seriesName: '河南',
        value: '700',
        itemFill: '#fff'
    },
    {
        seriesName: '湖北',
        value: '400',
        itemFill: '#fff'
    },
    {
        seriesName: '湖南',
        value: '500',
        itemFill: '#fff'
    },
    {
        seriesName: '广西',
        value: '1000',
        itemFill: '#fff'
    },
    {
        seriesName: '海南',
        value: '100',
        itemFill: '#fff'
    },
    {
        seriesName: '广东',
        value: '900',
        itemFill: '#fff'
    },
    {
        seriesName: '香港',
        value: '600',
        itemFill: '#fff'
    },
    {
        seriesName: '澳门',
        value: '500',
        itemFill: '#fff'
    },
    {
        seriesName: '台湾',
        value: '10',
        itemFill: '#fff'
}] ;