[问题求助]smartbi的地图引导线要怎么配置吗，我试了好像不生效

电子表格发表于 2022-6-14 09:11

关注主题


5 麦豆回复本帖可获得 5 麦豆奖励! 每人限 1 次(中奖概率 20%)

哈喽 Lv2 关注ta

发表于 2022-6-14 09:11:16

地图外置引导线在扩展属性里面应该怎么配置吗

哈喽 Lv2 关注ta

发表于 2022-6-14 09:15:23

最终效果

测试

这样配置不能使用，还有安装echarts官网的视觉引导线配置也不生效

使用道具赞举报

E-R图版主关注ta

发表于 2022-6-14 09:23:10

可以发一下你写的完整的扩展属性看看吗？

哈喽

{
    "series": [{
        "type": "map",
        "map": "china",
        "roam": "false",
        "labelLine": {
            "show": true,
            "normal": {
                "length": 15,
                "length2": 120,
                "lineStyle": {
                    "color": "#d3d3d3",
                    "width": 1,
                    "type": "solid",
                    "cap": "butt"
                },
                "align": "right"
            },
            "color": "#000",
            "emphasis": {
                "show": true
            }
        },

    }]
}，上面图片那个是在地图里面用type：lines不适合，所以想问有其它方法实现吗

2022-6-14 09:39| 回复

打工人的一天

回复哈喽

series序列里边是对图形的类型定义，如果map地图下并没有labelLine属性，所以直接调用是没有办法生效的。
从现在这个效果看，网上echarts地图中的引导线效果是图形叠加效果，就是在地图上增加一个线图所引导出来的效果。但在实际应用叠加的线图正常也是动态的，如果需要在smartbi中使用动态增加的线条，通过用宏来封装调用会更快捷，图形扩展属性实现的相对是比较固定的属性配置。
如果要写图形宏可以看：https://wiki.smartbi.com.cn/pages/viewpage.action?pageId=62292694

2022-6-14 10:16| 回复

哈喽

回复打工人的一天

这样子呀，但是我看他有这个属性，图形宏，网上的echarts的引导线也是在series里面配置的,网上的只要把type：lines就能实现吧：列如：var westLakeJson = '/asset/get/s/data-1629870668058-sUScloabor.json';
setTimeout(function () {
    mapInit();
}, 1000);
let LableData = [
    {
        name: '北山街道',
        coords: [
            [120.141592, 30.266991],
            [120.161592, 30.266991],
        ],
    },
    {
        name: '西溪街道',
        coords: [
            [120.138631, 30.283470],
            [120.158631, 30.283470],
        ],
    },
    {
        name: '',
        coords: [
            [120.123053, 30.285058],
            [120.123053, 30.305058],
        ],
    },
    {
        name: '翠苑街道',
        coords: [
            [120.123053, 30.305058],
            [120.134053, 30.305058],
        ],
    },
    {
        name: '',
        coords: [
            [120.107471, 30.282745],
            [120.107471, 30.312745],
        ],
    },
    {
        name: '文新街道',
        coords: [
            [120.107471, 30.312745],
            [120.114471, 30.312745],
        ],
    },
    {
        name: '西湖街道',
        coords: [
            [120.106272, 30.227680],
            [120.106272, 30.227680],
        ],
    },
    {
        name: '留下街道',
        coords: [
            [120.038079, 30.233002],
            [120.038079, 30.233002],
        ],
    },
    {
        name: '转塘街道',
        coords: [
            [120.063915, 30.166397],
            [120.063915, 30.166397],
        ],
    },
    {
        name: '双浦镇',
        coords: [
            [120.063915, 30.116397],
            [120.063915, 30.116397],
        ],
    },
    {
        name: '蒋村街道',
        coords: [
            [120.048893, 30.280981],
            [120.048893, 30.280981],
        ],
    },
    {
        name: '',
        coords: [
            [120.120306, 30.263343],
            [120.122606, 30.243343],
        ],
    },
    {
        name: '灵隐街道',
        coords: [
            [120.122606, 30.243343],
            [120.155306, 30.243343],
        ],
    },
    {
        name: '',
        coords: [
            [120.094471, 30.285745],
            [120.094471, 30.325745],
        ],
    },
    {
        name: '古荡街道',
        coords: [
            [120.094471, 30.325745],
            [120.114471, 30.325745],
        ],
    },
    {
        name: '三墩镇',
        coords: [
            [120.039023, 30.326986],
            [120.039023, 30.326986],
        ],
    },
];
var mapInit = () => {
    // 这里需要这样使用地图JSON，实际开发中直接使用即可echarts.registerMap("XH", westLakeJson);
    $.getJSON(westLakeJson, function (geoJson) {
        echarts.registerMap('XH', geoJson);
        myChart.hideLoading();
        option = {
            tooltip: {
                trigger: 'item',
                formatter(value) {
                    return value.name;
                },
                show: false,
            },
            geo: {
                map: 'XH',
                geoIndex: -1,
                zoom: 1.285,
                selectedMode: false,
                aspectScale: 0.9,
                hoverAnimation: false,
                // position: [500, 500],
                left: 50,
                itemStyle: {
                    normal: {
                        label: { show: false },
                        borderWidth: 0,
                        borderColor: '#00a4e7',
                        areaColor: '#00a4e7',
                    },
                    emphasis: {
                        label: { show: false },
                        borderWidth: 0,
                        borderColor: '#00a4e7',
                        areaColor: '#00a4e7',
                    },
                },
            },
            series: [
                {
                    type: 'map',
                    mapType: 'XH',
                    animation: false,
                    hoverAnimation: true,
                    zoom: 1.25,
                    aspectScale: 0.9,
                    left: 50,
                    selectedMode: false,
                    itemStyle: {
                        normal: {
                            label: { show: false },
                            padding: [10, 20],
                            borderWidth: 0.5, //区域边框宽度
                            borderColor: '#00c3f1', //区域边框颜色
                            areaColor: '#1FA6ED', //区域颜色
                        },
                        emphasis: {
                            label: { show: false },
                            padding: [50, 50],
                            borderWidth: 0.5,
                            borderColor: '#00c3f1',
                            areaColor: '#1FA6ED',
                            borderWidth: 1,
                            shadowColor: '#00c3f1',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 1,
                        },
                    },
                },
                {
                    type: 'lines',
                    zlevel: 3,
                    symbol: 'none',
                    symbolSize: [5, 5],
                    color: '#4699b1',
                    opacity: 1,
                    label: {
                        show: true,
                        padding: [0, 10],
                        color: '#000',
                        borderWidth: 2,
                        borderRadius: 6,
                        formatter(params) {
                            let arr = [params.name];
                            return arr.join('n');
                        },
                        textStyle: {
                            align: 'left',
                            lineHeight: 20,
                            color: '#000', fontSize: '18px'
                        },
                    },
                    lineStyle: {
                        type: 'solid',
                        color: '#4699b1',
                        width: 1,
                        opacity: 1,
                    },
                    data: LableData,
                },
            ],
        };
        myChart.setOption(option);
    });
};

2022-6-14 13:01| 回复

打工人的一天

回复哈喽

在这个示例中线图的数据是 LableData中定义的数据，实际就是在LableData 定义好了数据了，再type: 'lines',中对数据进行回调  data: LableData,但在smartbi中的数据是接口动态生成的数据，那就在线图上用扩展属性就无法回调到数据了。

2022-6-15 21:09| 回复

使用道具赞举报

返回列表

6回帖数	0关注人数	2546浏览人数
最后回复于：2022-6-14 09:23

邀请回答

邀请麦粉解答问题，每天可以发送10次邀请！请勿重复邀请~

头像	昵称	操作
	ekko	邀请TA
	打工人的一天	邀请TA
	大傻boy	邀请TA
	鬼仔性格	邀请TA
	Eva_Li	邀请TA
	君茗	邀请TA