SCRIPT5022: SyntaxError echarts.js, 行7302 字符13

背景

今日使用 echarts 4.3.0 创建一个折线图；在 Chrome 浏览器上面能正常显示，但是在 IE11 上面抛出了如下错误：

SCRIPT5022: SyntaxError 
echarts.js, 行7302 字符13

解决办法

刚开始还以为是 echarts 4.3.0 不兼容IE，通过错误信息定位到 echarts.js 的 7302 行，代码如下：

getGradient: function (ctx, obj, rect) {
    var method = obj.type === 'radial' ? createRadialGradient : createLinearGradient;
    var canvasGradient = method(ctx, obj, rect);
    var colorStops = obj.colorStops;
    for (var i = 0; i < colorStops.length; i++) {
        canvasGradient.addColorStop(
            colorStops[i].offset, colorStops[i].color
        );
    }
    return canvasGradient;
}

错误发生在 canvasGradient.addColorStop() 方法调用。该方法的定义如下：

void gradient.addColorStop(offset, color);

参数说明：

• offset：0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误

• color：CSS颜色值 <color>。如果颜色值不能被解析为有效的CSS颜色值 <color>，将抛出SYNTAX_ERR错误。

公共广告位-前端

我们在设置背景渐变颜色时使用了 “#CF132220” 格式的颜色值，其中末尾的 20 表示透明度。如下：

itemStyle: { // 设置则线图的线条样式
    normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#CF1322' // 0% 处的颜色
        }, {
            offset: 0.8,
            color: '#CF132220' // 100% 处的颜色
        }]), // 背景渐变色
        lineStyle: { // 系列级个性化折线样式
            width: 2,
            type: 'solid',
            color: "#CF1322"
        }
    }
}

很不巧的是，IE并不能识别该种样式的值。需要将 “#CF132220” 改为 “rgba(207, 19, 34, 32)”。