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