Echarts-x中MarkLine颜色和legend颜色不对应

Question

如下图，我没有设置颜色，那么echarts应该使用默认颜色。可是这里颜色却对应不上，比如图中橘色对应的是淡蓝色。即使在option中设置color，颜色还是不对应。请问有谁遇到过这种问题或者可以哪位高手帮我解决这个问题吗？

代码如下：

var data = "my json data";

                var devices = [];
                $.each(data.points, function (key, value) {
                    devices.push({
                        itemStyle: { 
                    			normal: {
                        		color: 'red'
                    			}
                				},
                        geoCoord: value
                    })
                });

                //types
                var types = [];
                $.each(data.lineTypes, function (key, value) {
                    types.push(key);;
                });

                //lines
                var lineGroupByScanType = {};

                data.lines.forEach(function (line) {
                    var typeName = line.type_name;
                    if (!lineGroupByScanType[typeName]) {
                        lineGroupByScanType[typeName] = [];
                    }
                    lineGroupByScanType[typeName].push(line);
                });

                var opts = {
                    color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#28c6b9', '#84e6f1'],//设置和不设置color结果都不对，我觉得设置的时候不对是应为series[0]不是markline，不需要显示legend
                    legend: {
                        show: true,
                        data: types.map(function (item) {
                            return item;
                        }),
                        selected: {},
                        x: 'left',
                        orient: 'vertical',
                        textStyle: {
                            color: 'auto'
                        }
                    },
                    tooltip: {
                        formatter: '{b}'
                    },
                    series: [
                        {
                            type: 'map3d',
                            mapType: 'world',
                            baseLayer: {
                                backgroundColor: '',
                                backgroundImage: '/resources/img/earth.jpg'
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 0.5,
                                    borderColor: 'yellow',
                                    areaStyle: {
                                        color: 'rgba(0, 0, 0, 0)'
                                    }
                                }
                            },
                            name: 'points',
                            markPoint: {
                                effect: {
                                    show: true
                                },
                                large: true,
                                symbolSize: 5,
                                data: devices
                            }
                        }]
                };

                types.forEach(function (item) {
                    var lines = lineGroupByScanType[item];
                    if (lines) {
                        opts.series.push({
                            type: 'map3d',
                            name: item,
                            markLine: {
                                smooth: true,
                                effect: {
                                    show: true,
                                    scaleSize: 3
                                },
                                //large: true,
                                itemStyle: {
                                    normal: {
                                        borderWidth: 2,
                                        width: 3,
                                        opacity: 1
                                    }
                                },
                                data: lines.map(function (line) {
                                    return [{
                                        geoCoord: line.startGeo 
                                    }, {
                                        geoCoord: line.endGeo 
                                    }]
                                })
                            }
                        });
                    }
                });
                chart.setOption(opts);
                chart.hideLoading();

Answer 1

+1