Apache Echarts - использовать веб-шрифт для имени оси

Question

Я пытаюсь использовать собственный шрифт, когда имя оси настроек (например, на старших графиках 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

другим вариантом может быть использование конфигурации цвета фона. И элементом image может быть 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'
    }]
};

, и вот пример для заполнения элемента canvas отличным шрифтом

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 ...