Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

echarts 地图飞线绘制出现循环报错,地图可以绘制成功,添加飞线配置就会循环报错,直到开发工具卡死 #949

Open
2 tasks done
shengke90 opened this issue Oct 17, 2024 · 1 comment

Comments

@shengke90
Copy link

提问前应该做的事

请确保提问前做了以下事,将完成的项目的 [] 改为 [x]

需提供的信息

将符合项的 [] 改为 [x],并补充需要的信息:

简单描述问题:

echarts 地图飞线绘制,地图可以正常绘制成功,添加飞线时,出现报错,并循环报同样一个错误,直到开发工具卡死
项目是git下载源码,并在这个基础上添加开发的,是微信小程序不支持飞线开发嘛?
image
代码里只要添加这个配置,data属性有值就会循环报错

预期效果:

image

(如有需要请提供预期的图)

实际效果:

1729154128700

(如有需要请提供截图)

复现环境:

  • [] 在微信开发工具中存在该问题
@shengke90
Copy link
Author

这是详情代码,series: [] 里注释的代码放开,就会循环报错
`import * as echarts from '../../ec-canvas/echarts'; // 引入 echarts

import geoJson from './mapData.js';

const geoCoordMap = {
'Beijing': [116.407396, 39.904200],
'Shanghai': [121.473701, 31.230416],
'Guangzhou': [113.264385, 23.129112],
'Chengdu': [104.066541, 30.572269],
'Xi'an': [108.940175, 34.341568]
};

const routes = [
[{name: 'Beijing'}, {name: 'Shanghai', value: 100}],
[{name: 'Beijing'}, {name: 'Guangzhou', value: 100}],
[{name: 'Beijing'}, {name: 'Chengdu', value: 100}],
[{name: 'Beijing'}, {name: 'Xi'an', value: 100}],
];

function convertData(data) {
const res = [];
for (let i = 0; i < data.length; i++) {
const fromCoord = geoCoordMap[data[i][0].name];
const toCoord = geoCoordMap[data[i][1].name];
if (fromCoord && toCoord) {
res.push({
fromName: data[i][0].name,
toName: data[i][1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
}

function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);

// 注册中国地图
echarts.registerMap('china', geoJson);

const option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            if (params.seriesType === "lines") {
                return params.data.fromName + " → " + params.data.toName;
            }
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        // {
        //     name: 'Flight Routes',
        //     type: 'lines',
        //     coordinateSystem: 'geo',
        //     zlevel: 2,
        //     effect: {
        //         show: true,
        //         period: 6,
        //         trailLength: 0.7,
        //         color: '#fff',
        //         symbolSize: 3
        //     },
        //     lineStyle: {
        //         normal: {
        //             color: '#ffa022',
        //             width: 0,
        //             curveness: 0.2
        //         }
        //     },
        //     data: convertData(routes)
        // },
        // {
        //     name: 'Flight Routes',
        //     type: 'lines',
        //     coordinateSystem: 'geo',
        //     zlevel: 2,
        //     large: true,
        //     effect: {
        //         show: true,
        //         constantSpeed: 30,
        //         symbol: 'arrow',
        //         symbolSize: 8,
        //         trailLength: 0,
        //     },
        //     lineStyle: {
        //         normal: {
        //             color: '#ffa022',
        //             width: 1,
        //             opacity: 0.6,
        //             curveness: 0.2
        //         }
        //     },
        //     data: convertData(routes)
        // },
        // {
        //     name: 'Cities',
        //     type: 'effectScatter',
        //     coordinateSystem: 'geo',
        //     zlevel: 2,
        //     rippleEffect: {
        //         brushType: 'stroke'
        //     },
        //     label: {
        //         show: true,
        //         position: 'right',
        //         formatter: '{b}'
        //     },
        //     symbolSize: 10,
        //     itemStyle: {
        //         color: '#ffa022'
        //     },
        //     data: Object.keys(geoCoordMap).map(function (name) {
        //         return {
        //             name: name,
        //             value: geoCoordMap[name]
        //         };
        //     })
        // }
    ]
};

chart.setOption(option);
return chart;

}

Page({
data: {
ec: {
lazyLoad: true // 延迟加载
}
},

onLoad: function() {
    this.echartsComponent = this.selectComponent('#mychart-dom');
    this.initChart();
},

initChart: function() {
    this.echartsComponent.init((canvas, width, height, dpr) => {
        return initChart(canvas, width, height, dpr);
    });
}

});
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant