echarts自适应大屏方案（转载版）

写页面的时候用的1920 x 1080 的像素标准直接来写。echarts 里面的尺寸 只能 写 12 或 12%。有的如：fontSize 之类的 只有 12 。导致 写的时候是 1920，输出到 4k 屏幕上，label 标签 和 字就很很小

解决方案：

将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是19201080的，某个数值是fontSize:12，当前显示器是3840的大屏，那么你现在的字体大小应该是：12（3840/1920）= 24。

//当前视口宽度
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";
//当前视口宽度
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、图形的定位或位置偏移等用百分比设置
2、像lengend  tooltip  等属性的formatter回调函数里，可以用直接用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很多属性有默认值，那么当你的项目有自适应大屏需求时，这些默认值都要用nowSize方法改写掉！

图形要做到自适应，以下属性需全部改写：

• x轴和y轴的轴线线条宽度
• x轴和y轴的坐标字体大小
• x轴和y轴的坐标字体大小
• lengend 字体大小
• tooltip字体大小
• 等等

使用：
chart.vue
写成 window.nowSize(14) 或者 nowSize(14)
如果项目安装了eslint,开启了undefined检查，就写window.nowSize(14)

  let option = {
                xAxis: [{
                    type: 'category',
                    data: ['一级', '二级', '三级', '四级'],
                    axisLabel: {  // 坐标值
                        show: true,
                        color: "#eee",
                        // fontSize: 12,
                        fontSize: nowSize(14),
                    },
                    axisTick:{  // 刻度点
                        show: false,
                    },
                    axisPointer:{ // 鼠标划上提示线
                        // show: false,
                        type: 'shadow'
                    }
                }],
                yAxis: {
                    min:0,  //取0为最小刻度
                    max: max2, //取100为最大刻度
                    minInterval:2, //分割刻度
                    type: 'value',
                    // show: false, // 隐藏y轴
                    axisTick:{  // 刻度点
                        show: false,
                    },
                    axisLabel: {  // 坐标值
                        show: false,
                    },
                    axisPointer:{
                        show: false
                    },
                    splitLine:{ // y轴网格线
                        show: true,
                        lineStyle:{
                            type:'solid', // 设置背景为虚线
                            width: 0.3, // 网格线线宽
                            // 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:{ // 设置图形位置  横纵轴偏移
                    left: '10%',
                    top: '17%',
                    height: '66%',
                },
                series: [{
                        data: chart_data,
                        type: 'bar',
                        barWidth: "38%",
                        label: { //  柱子上方展示数量
                                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]
                                        }
                                        ]);
                                },        
                        }
                }]
            };

 转载方便自用。

转载出处：echarts自适应大屏方案 亲测有用 - 简书