這次在做項目的時候，藍(lán)湖是 1920 x 1080 的設(shè)計圖。
寫頁面的時候用的1920 x 1080 的像素標(biāo)準(zhǔn)直接來寫。echarts 里面的尺寸 只能 寫 12 或 12%。有的如：fontSize 之類的 只有 12 。導(dǎo)致 寫的時候是 1920，輸出到 4k 屏幕上，label 標(biāo)簽 和 字就很很小

image.png

解決方案：

將實際窗口的大小與設(shè)計圖窗口大小做比得到要給相對的比率，每個單位數(shù)值和這個比率相乘即可。即：按比例縮放字體。比如設(shè)計圖是19201080的，某個數(shù)值是fontSize:12，當(dāng)前顯示器是3840的大屏，那么你現(xiàn)在的字體大小應(yīng)該是：12（3840/1920）= 24。

//當(dāng)前視口寬度
let nowClientWidth = document.documentElement.clientWidth;
 
換算方法
function nowSize(val,initWidth=1920){
    return val * (nowClientWidth/initWidth);


// 使用的時候 nowSize(13)就代表1920下是13px
fontSize: nowSize(13)
width: nowSize(13)

如果你的項目chart不多，你在組件里寫換算方法也可以，但更推薦在項目的全部做個封裝。

具體到項目里封裝一下：
chart-resize.js

// import Vue from "vue";
//當(dāng)前視口寬度
let nowClientWidth = document.documentElement.clientWidth;
// 換算方法
window.nowSize = function(val, initWidth = 1920) {
    return val * (nowClientWidth / initWidth);
};

// Vue.prototype.$nowSize = nowSize

/*
*
一、使用：
    第一種
    // 例如字體在1920下為14px:  const vm=this;   
    // 然后在options里字體的大小單位用  vm.$nowSize(14)
    
    第二種：
    例如chart里的某字體在1920下為14px, 在options里字體的大小單位用: nowSize(14)

 **其他適配技巧**
1、圖形的定位或位置偏移等用百分比設(shè)置
2、像lengend  tooltip  等屬性的formatter回調(diào)函數(shù)里，可以用直接用rem，
例如：
 tooltip:{
    formatter: function(params){
        const tip=`<div style="font-size:1.5rem;">
            ${params.name}：<span style="font-size:1.6rem;">${params.value}</span>  <br>
        </div>`
        return tip
    }
},

*
*/

main.js:

import  "./scripts/chart-resize";

注意事項

echarts很多屬性有默認(rèn)值，那么當(dāng)你的項目有自適應(yīng)大屏需求時，這些默認(rèn)值都要用nowSize方法改寫掉！

圖形要做到自適應(yīng)，以下屬性需全部改寫：

• x軸和y軸的軸線線條寬度
• x軸和y軸的坐標(biāo)字體大小
• x軸和y軸的坐標(biāo)字體大小
• lengend 字體大小
• tooltip字體大小
• 。。。。

使用：
chart.vue
寫成 window.nowSize(14) 或者 nowSize(14)
如果項目安裝了eslint,開啟了undefined檢查，就寫window.nowSize(14)

  let option = {
                xAxis: [{
                    type: 'category',
                    data: ['一級', '二級', '三級', '四級'],
                    axisLabel: {  // 坐標(biāo)值
                        show: true,
                        color: "#eee",
                        // fontSize: 12,
                        fontSize: nowSize(14),
                    },
                    axisTick:{  // 刻度點
                        show: false,
                    },
                    axisPointer:{ // 鼠標(biāo)劃上提示線
                        // show: false,
                        type: 'shadow'
                    }
                }],
                yAxis: {
                    min:0,  //取0為最小刻度
                    max: max2, //取100為最大刻度
                    minInterval:2, //分割刻度
                    type: 'value',
                    // show: false, // 隱藏y軸
                    axisTick:{  // 刻度點
                        show: false,
                    },
                    axisLabel: {  // 坐標(biāo)值
                        show: false,
                    },
                    axisPointer:{
                        show: false
                    },
                    splitLine:{ // y軸網(wǎng)格線
                        show: true,
                        lineStyle:{
                            type:'solid', // 設(shè)置背景為虛線
                            width: 0.3, // 網(wǎng)格線線寬
                            // color: '#eee',
                            color: [' #354ea0', '#354ea3'],  // 使用深淺的間隔色
                        }
                    },
                },
                tooltip:{
                    backgroundColor: 'rgba(1, 1, 1, 0.9)',
                    borderColor: "rgba(0, 225, 255, 0.17)",
                    textStyle:{
                        color: 'rgba(255, 255, 255, 0.99)',
                        fontSize: nowSize(17),
                    },
                    formatter: function(params){
                        //  ${params.marker}  
                        const tip=`<div style="font-size:1.4rem;">
                         ${params.name}：<span style="color:${params.color.colorStops[0].color};font-weight:800; ">${params.value}</span>  <br>
                        </div>`
                    return tip
                    }
                },
                grid:{ // 設(shè)置圖形位置  橫縱軸偏移
                    left: '10%',
                    top: '17%',
                    height: '66%',
                },
                series: [{
                        data: chart_data,
                        type: 'bar',
                        barWidth: "38%",
                        label: { //  柱子上方展示數(shù)量
                                show: true, //開啟顯示
                                position: 'top', //在上方顯示
                                color: '#47bdce',
                                // fontSize: 12,
                                fontSize: nowSize(14)
                        },
                        itemStyle: {
                                color: function (params) {
                                    var colorList = [
                                        ['#fb6560', '#fb3e35'],
                                        ['#ff9717', '#f56812'],
                                        ['#fff766eb', '#EFE42A'],
                                        ['#61dbe8', '#4e9ff5'],
                                    ];
                                    var index = params.dataIndex;
                                    if (params.dataIndex >= colorList.length) {
                                        index = params.dataIndex - colorList.length;
                                    }
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                        [{
                                            offset: 0,
                                            color: colorList[index][0]
                                        },
                                        {
                                            offset: 1,
                                            color: colorList[index][1]
                                        }
                                        ]);
                                },        
                        }
                }]
            };