vue Echarts 样式设置【持续】

参考地址

图形的标题富文本样式设置，需要在options中添加属性title。示例如下：

title:
{
    show: true,
    text: "{desc|已入园人数} {num|74}     {desc|当前容量} {num|1723}", // 竖线|前面的表示样式名称,后面的是需要修饰的内容。
    x: 'center',
    textStyle:
    {
        rich:
        {
            desc:
            {
                color:"#E9E9E9"
            },
            num:
            {
                color:"#F9CE37",
                fontSize: 16
            }
        }
    }
}

修改折线图的网格边距：

grid: // 设置网格样式
{
    left: '15%',
    top: '15%',
    right: '10%',
    bottom: '20%'
}

 字体缩放,参考地址：https://blog.csdn.net/HuangsTing/article/details/103468936

在全局文件中tools.ts中添加function，如下

/**
 * 字体缩放（主要应用在ECharts）
 * @param window 当前窗体
 * @param res 比例，如字体为12px,则可传入0.12，默认为0.12
 */
export function fontZoomer(window: Window, res: number = 0.12): number
{
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth)
    {
        return;
    }

    let fontSize = 100 * (clientWidth / 1920);
    
    return res * fontSize;
}

调用页面，引入上面提到的tools.ts文件，调用代码如下

tools.fontZoomer(window)

vue px转为rem的配置，参考地址：https://cloud.tencent.com/developer/article/1492497