Apache Echarts - 在轴名称上使用 webfont

Question

我试图在设置轴名称时使用自定义字体（例如在 highcharts https://www.highcharts.com/forum/viewtopic.php?t=42108 上），例如 fontawesome，所以我可以有这样的东西：

option = {
    yAxis: {
        type: 'value',
        name: 'test' + String.fromCharCode(0xf111),
        nameTextStyle: {
            fontFamily: 'FontAwesome'
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

YAxis 名称应该类似于“test⏺”，但不幸的是未使用该字体并且我得到了一个未知字符。 => 这里

你知道如何做到这一点吗？

谢谢^_^

Answer 1

另一种选择是使用背景颜色配置。 并且图像元素可以是图像的 URL 或 HTMLCanvasElement，可以将其绘制成 awesomefont。

option = {
    yAxis: {
        type: 'value',
        name: 'text{x|  }',
        nameTextStyle: {
                    rich: {
                            x:{
                                backgroundColor: {
                                    image:'images/circle.png'
                                    // It can be URL of a image,
                                    // or dataURI,
                                    // or HTMLImageElement,
                                     // or HTMLCanvasElement. image: canvas 
                                }
                            }
                        }
                    }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

这是一个用很棒的字体填充画布元素的示例

var canvas = document.getElementById("your_canvasid");
var ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '14px "FontAwesome"';
ctx.fillText('\uf111', 10, 10);

我已经测试过它适用于图像 url，但我没有使用 canvas 元素进行测试...