Echart自适应图表大小和字体大小

最新推荐文章于 2024-09-02 16:11:36 发布

新时代的弩力

最新推荐文章于 2024-09-02 16:11:36 发布

阅读量2.4k

点赞数 1

分类专栏：数据可视化

本文链接：https://blog.csdn.net/qq_42372534/article/details/117220322

版权

数据可视化专栏收录该内容

6 篇文章 1 订阅

订阅专栏

思路：监听window的resize事件，获取屏幕宽度，计算出设计图下的字体大小，通过通过echart实例的setOption()和resize()方法就可以。其中，setOption方法是用来重新设置字体大小等参数和数据，echart会自动合并这些参数，resize是用来在容器发生改变时该表图表尺寸的。

主要代码如下：

window.addEventListener('resize', () => {
			//新的配置参数，会和老的配置参数合并
            var newOption ={
                series: [
                    {
                        name: '能源消耗',
                        type: 'pie',
                        radius: '65%',
                        center: ["45%", "50%"],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 3
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#444',
                                    fontSize: 16 * pxRatio//pxRatio是根据window的resize动态计算的
                                },
                                formatter: '{center|{b}}\n{d}吨',
                                padding: 10 * pxRatio,
                                borderWidth: 1,
                                borderColor: '#333',
                                borderRadius: 10,
                                rich: {
                                    center: {
                                        align: 'center',
                                        padding: [0, 0, 8, 0],
                                        fontSize: 16 * pxRatio,
                                        fontWeight: 'bolder'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '能源消耗',
                        type: 'pie',//显示百分比的pie图
                        radius: '65%',
                        data: data,
                        center: ["45%", "50%"],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 3
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{d}%',
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 16 * pxRatio
                                }
                            }
    
                        }
                    }
                ]
            }
            myChart.setOption(newOption)
            myChart.resize()
        })