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

思路：监听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()})

Echart自适应图表大小和字体大小相关推荐

html与word字体大小转换,字体大小不一样，当html转换为Word使用Microsoft.Office.Interop.Word...
我试图将html文件转换为MS word(docx)文件. 使用Microsoft.Office.Interop.Word我能够从HTML转换为Word,但字体大小不一样的文件的HTML和Word格式 ...
Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
linux文字大小,Qt 字体大小的计算
在QFont当中有两种方式设置字体大小,一种是PixelSize,另一种是PointSize Point实际是磅,也就是 1/72 inch 我们可以从PainterDevice中得到当前DPI(Do ...
UIPickerView用法(左右比例，整体大小，字体大小)
UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectZero]; pickerView.autoresizingM ...
css文字大小fontsize,字体大小：font-size - CSS | 绿叶学习网
在CSS中,我们可以使用font-size属性来定义字体大小. 语法: font-size: 像素值; 说明: 实际上,font-size属性取值有两种:一种是"关键字",如sma ...
html中span标签字数大小,DIV字体大小 span字体大小 font-size样式
DIV内字体大小,DIV内文字大小设置,div font-size字体大小布局篇,同时扩展到span字体大小,等标签内字体大小设置布局教程设置对象DIV字体大小或span字体大小设置有两种方法,一种 ...
苹果android在哪里设置字体大小,iPhone11字体大小怎么调？苹果手机调节字体大小的三种方法...
现在智能手机几乎是人手一部,就连我们身边的很多老年人也用上了智能手机.由于年龄的关系,老年人的视力一般都不太好.以苹果手机为例,如果用标准字体大小,老年人看上去就会很吃力.在这里介绍下如何在苹果手机上 ...
LaTeX 调整行距、列宽，以及表格的整体大小和字体大小
LaTeX 调整行距.列宽,以及表格的整体大小看到有很多小可爱在疑惑这个问题.稍微解答一下. 默认表格表格行距默认行距1 \begin{table}[h]\renewcommand{\array ...
css字体适配rem 根据屏幕大小变换字体大小
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

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

Echart自适应图表大小和字体大小相关推荐

最新文章

热门文章