Echarts 大屏大小自适应

Echarts 大屏大小自适应

// 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
    }
},

*
*/

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

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

  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]
                                        }
                                        ]);
                                },        
                        }
                }]
            };