yxp-svg-map v1.0.0

project

vue

Build Setup

Build Setup

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';

            // 创建地图
            this.MAP = new yxp-svg-map({
                // 用来挂载的容器
                el: '#js-svg-map',
                // svg路径
                url: './static/svg/map.svg',
                // 数据配置
                data: {
                    // 数据源数组
                    dataArr: _this.dataListMap,
                    // 数据标识
                    valueKey: 'sl',
                    // 地图标识
                    mapKey: 'code',
                    // 文字标识
                    nameKey: 'dq'
                },
                // hover时的颜色
                // hoverColor: '#15f7ff',
                // 鼠标移进一个区域时的回调
                hoverIn: function () {
                    // 隐藏激活的提示框
                    _this.showActiveTip = false;
                },
                // 鼠标移出一个区域时的回调
                hoverOut: function () {
                    // 显示激活的提示框
                    _this.showActiveTip = true;
                },
                // tip配置
                tip: {
                    show: true,
                    render: function (item) {
                        return `<div class="fd-hover-map-tip">
                                    <p class="fd-name">${item.data.dq}</p>
                                    <div class="fd-right">
                                     <p class="fd-tip-title">${item.data.title}</p>
                                     <p class="fd-value"><strong>${item.data.sl}</strong><span>件</span></p>
                                    </div>
                                </div>`;
                    }
                },
                // 当地图挂载到页面上后调用，确保svg已经挂载到DOM上
                loaded: () => {
                    // 请求数据
                    this.init();
                }
            });
			
			this.MAP.$options.data.dataArr = this.dataListMap;
            // 更新地图
            this.MAP.update();