echarts -在地图上添加纹理条纹的能力

Question

我用电子地图生成了一张地图。

使用visualMap属性和inRange min、max、outOfRange选项相结合，我能够提取0值，使它们在灰色中着色。

想要的结果就快到了(见截图)！

但是我想用带条纹/模式的0值来显示元素--现在屏幕截图上是灰色的。我怎样才能用电子海图来实现这一点？

通缉模式的例子：

​

​

​

我查看了以下文档--并尝试了一些代码，但没有成功：

• https://echarts.apache.org/en/option.html#visualMap
• https://echarts.apache.org/en/option.html#aria.decal
• https://echarts.apache.org/examples/en/editor.html?c=pie-pattern

我的visualMap配置部分如下：

    visualMap : {
                type: 'continuous', 
                left : 'right',
                top : 'center',
                min : 469,
                max : 144464,
                inRange : {
                    color : colors
                },
                outOfRange: {
                    color:'#f4f4f4'
                },
                text : [ 'Haute', 'Faible' ],
                calculable : true
            },

另外的需要:我也很高兴能在传说中看到outOfRange。

(这里也有报道：https://github.com/apache/echarts/issues/14874)

Answer 1

为了使用模式填充，您需要使用画布对象作为颜色源。下面是一个代码示例，用于创建动态的、双色的条带模式：

function DashedPattern(color1, color2, canvasId) {
    var c = document.createElement('canvas');
    c.id = canvasId;
    c.width = 120;
    c.height = 120;
    c.style.border = "0px none";
    c.hidden = "true";
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(c);
    var ctx = c.getContext("2d");
    ctx.strokeStyle = color1;
    ctx.fillStyle = color2;
    ctx.lineWidth = "2";
    var patternSpread = 5;
    ctx.beginPath();
    for (i = 1; i <= c.width / patternSpread; i++) {
        ctx.moveTo(i * patternSpread, 0);
        ctx.lineTo(0, i * patternSpread);
    }
    for (i = 1; i < c.height / patternSpread; i++) {
        ctx.moveTo(c.width, i * patternSpread);
        ctx.lineTo(i * patternSpread, c.height);
    }
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.stroke();
    return c;
 }

 var c = DashedPattern(p.itemStyle.areaColor, p.itemStyle.secondColor, patternId);
 var newColor = { image: c, repeat: 'repeat' };
 p.itemStyle.areaColor = newColor;

当然，如果您只使用预定义的静态模式，您只需创建模式图像并将其加载到画布中，而不是动态生成。echarts中模式的缺点是它们是位图，不像地图的其他部分那么好看。下面是我使用模式的地图示例：

​

​

正如你所看到的，条纹在区域之间很好地对齐，但是当放大位图时，边缘是清晰可见的。可能可以通过使用模式大小来减少这种情况。

Answer 2

实际上，电子海图的5.0+版本实现了decal特性。

我们从计算机图形学中借用了标记的概念，以避免与ECharts已经使用的模式混淆。在ECharts中，标记和模式之间的区别是，标记是一种参数配置，它生成重复的图像，而模式需要图像来重复。

有关此新功能的更多信息和示例，请参阅以下链接：

• https://github.com/apache/echarts/issues/13263
• https://echarts.apache.org/examples/en/editor.html?c=doc-example/aria-decal
• https://echarts.apache.org/en/option.html#series-bar.itemStyle.decal

因为decal特性不依赖于图像，所以没有像素效应，不像使用pattern！