请选择 进入手机版 | 继续访问电脑版

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

电子表格 发表于 2022-6-14 09:11
回帖奖励 5 麦豆      回复本帖可获得 5 麦豆奖励! 每人限 1 次(中奖概率 20%)
发表于 2022-6-14 09:11:16

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

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

最终效果

最终效果

测试

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

使用道具 举报

发表于 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| 回复

回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表