echarts Bug：设置不同 lines、effectScatter 时，颜色没生效

你的名字 2023-05-29 06:28 13阅读 0赞

[源码下载][Link 1]

series : [{ 
        name: 'rode', //省内连接
        type: 'lines',
        coordinateSystem: 'geo',
        data: [],
        lineStyle: { 
            color: 'orange', // 颜色生效
            type: 'solid',
            width: 2,
            opacity: 1,
            curveness: 0.2
        },
        label:{ 
            normal:{ 
                show:true,
                position:'middle',
                formatter: '{c}'
            }
        }
    },{ 
        name: 'outRode', //省外连接
        type: 'lines',
        coordinateSystem: 'geo',
        data: [],
        lineStyle: { 
            color: 'green', //有bug,颜色没生效
            type: 'dashed',
            width: 2,
            opacity: 1,
            curveness: 0.2
        },
        label:{ 
            normal:{ 
                show: true,
                position:'middle',
                formatter: ''
            }
        }
    }]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70]  
找到源码文件echart.js 的 `lineProto._updateCommonStl` 方法。  
将如下代码：

var visualColor = lineData.getItemVisual(idx, 'color');

修改成：

var visualColor = lineStyle.stroke || lineData.getItemVisual(idx, 'color');

如果是压缩文件：则找到 OL.\_updateCommonStl，添加 `a.stroke ||`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70 1]  
效果如下，颜色设置成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70 2]  
补充：添加不同颜色的 effectScatter 时，也出现颜色无效问题，找到 `symbolProto._updateCommon` 处

symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) { 
        var symbolPath = this.childAt(0);
        var seriesModel = data.hostModel;
        var color =  data.getItemVisual(idx, 'color');
        // 添加如下代码
    	if(data._visual && data._visual.color){ 
    		color = data._visual.color
    	}
    	// 以下代码省略……
    }

[Link 1]: https://download.csdn.net/download/lishk314/11958400
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105110912568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191105111305919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191105111412233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hrMzE0,size_16,color_FFFFFF,t_70