Apache Echarts - 在轴名称上使用 webfont

Question

I'm trying to use a custom font when settings axis name(like on highcharts https://www.highcharts.com/forum/viewtopic.php?t=42108 ), for example fontawesome, so i can have something like this:

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

The YAxis name should be like 'test⏺', but unfortunately the font is not used and i get an unknown character. => here

Do you have any idea how can this be done?

Thanks ^_^

Answer 1

another option could be use the background color configuration. And the image element could be URL of a image or HTMLCanvasElement, which could be drawn awesomefont to it.

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'
    }]
};

and here is an example to fill a canvas element with awesome font

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);

I have tested it works with image url, but i did not test with the canvas element...