echarts图表大小随着窗口大小调整以及echarts图表的媒体查询

时间:2019-03-12
本文章向大家介绍echarts图表大小随着窗口大小调整以及echarts图表的媒体查询,主要包括echarts图表大小随着窗口大小调整以及echarts图表的媒体查询使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

主要是resize()方法;

基本使用方法(摘要):

this.echartsEle=document.getElementById('myEcharts')
this.echartsEle.resize();

let that= this
window.onresize = function() {
 that.echartsEle.resize();
}

具体的使用根据具体情境自行封装;

等有空上自己做的demo

echarts图表的媒体查询:

参考文档:https://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94

官方文档摘要:

要在 option 中设置 Media Query 须遵循如下格式:

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

 media的配置示例:

media: [
   
    {
        query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右侧中间。
                top: '15%',
                orient: 'vertical'      // 纵向布局。
            },
            series: [                   // 两个饼图上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

有空上自己做的demo。

(注:更具体内容待补充;)