vue electron自适应

问题：

pc端自适应。

移动端自适应。

解决方案：

pc: 

　　一个图，

window.onresize = function () {
    myChart.resize();            
}

　　多个图，代码写在同一个方法中，

window.onresize = function () {
    myChart.resize();
    myChart1.resize(); 
    myChart2.resize();   //以此类推添加多个echarts图形的名称
}              

　　多个图，不同的js中，调用 addEventListener

 window.addEventListener('resize', function () {
            myChart.resize();
})

移动端：

　　设置最大长度，宽度，长宽比。列举情况：

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

主要用在移动端~ 详情见 echarts官网

------------------------------------------------------------

根据语言也可以写做下列：

单：

window.onresize = this.chartPie.resize;

多：

window.addEventListener('resize', this.chartPie.resize);

 ----------------------------------------------------------

结束语：使用echarts的时候实例代码中，option需要  const定义一下。

如果对你有帮助，点赞点赞！！！