如何实现词云图以及如何在词云图中使用特殊字体

884 阅读1分钟

1.引入ttf文件

首先需要获取该特殊字体的ttf文件,然后放在static目录下。

2.设置字体

css文件中

@font-face {
    font-family: 'aaaa';
    src: url('./static/test.ttf');
}

3.实现词云图

echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4
词云图版本2需要搭配echarts版本5,词云图版本1搭配echarts4

官网例子:
新版本 github.com/ecomfe/echa…
低版本 github.com/ecomfe/echa…

4.设置词云图font-family

以 echarts-worldcloud 为例(使用 echarts-worldcloud 时需要注意 echarts 的版本)。

series: [
    {
        ...
        testStyle: {
            fontFamily: 'aaaa',
        }
    }
]

提示:如果字体没有生效,hover 之后才生效,那么需要将setOption延迟执行。

setTimeout(() => {
    chart.setOption(option);
}, 50)