一、问题
pc端使用echart,屏幕变大或变小时,echart的字体大小没有根据屏幕大小变化
二、解决方案
方法
const = fontSizeRem(size)=> {
const clientWidth = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
let fontSize = clientWidth / 1920;//尺寸大小
return size* fontSize;
}
tips:
- 使用后还需要监听浏览器窗口大小,改变时进行重绘,可查看文章http://t.csdn.cn/YNFQ8
图表样式
{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// toolbox: {
// show: true,
// top: '50px',
// right: '10px',
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// // magicType: { show: true, type: ['line', 'bar'] },
// // restore: { show: true },
// saveAsImage: { show: true },
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '4%',
containLabel: true
},
legend: {
type: 'plain',
orient: 'horizontal',
left: '20px',
top: '0px',
data: ['已随访', '未随访', '超期随访'],
textStyle: {
color: '#a1a1a1',
fontSize: fontSizeRem(14)
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: {
interval: 0,
padding: [0, 10, 0, 0],
fontSize: fontSizeRem(14)
},
offset: 15,
axisTick: {
show: false
},
axisLine: {
symbol: ['none', 'none'],
show: false,
onZero: true
}
},
yAxis: {
type: 'value',
splitLine: { show: false },
axisLabel: {
margin: 20,
fontSize: fontSizeRem(14)
}
},
series: [
{
name: '已随访',
// type: "bar",
animation: false,
areaStyle: {
color: {
global: false,
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(40, 158, 143, 0.50)'
},
{
offset: 1,
color: 'rgba(40, 158, 143, 0.00)'
}
]
}
},
itemStyle: {
// 设置线条上点的颜色(和图例的颜色)
color: '#289e8f'
},
emphasis: {
focus: 'series',
itemStyle: {
color: '#289e8f', // 颜色
borderColor: '#289e8f', // 图形的描边颜色
borderWidth: 1 // 描边的线宽
}
},
// label: {
// show: true,
// position: 'top'
// },
type: 'line',
// stack: 'Total',
symbolSize: 10,
symbol: 'circle',
lineStyle: {
color: '#289e8f'
},
smooth: true,
data: []
},
{
name: '未随访',
animation: false,
lineStyle: {
color: '#FC7338'
},
itemStyle: {
// 设置线条上点的颜色(和图例的颜色)
color: '#FC7338'
},
emphasis: {
focus: 'series',
itemStyle: {
color: '#FC7338', // 颜色
borderColor: '#FC7338', // 图形的描边颜色
borderWidth: 1 // 描边的线宽
}
},
areaStyle: {
color: {
global: false,
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(252, 115, 56, 0.50)'
},
{
offset: 1,
color: 'rgba(252, 115, 56, 0.00)'
}
]
}
},
// label: {
// show: true,
// position: 'top'
// },
type: 'line',
// stack: 'Total',
smooth: true,
symbolSize: 10,
symbol: 'circle',
data: []
},
{
name: '超期随访',
// type: "bar",
animation: false,
lineStyle: {
color: '#1771F5'
},
itemStyle: {
// 设置线条上点的颜色(和图例的颜色)
color: '#1771F5'
},
emphasis: {
focus: 'series',
itemStyle: {
color: '#1771F5', // 颜色
borderColor: '#1771F5', // 图形的描边颜色
borderWidth: 1 // 描边的线宽
}
},
areaStyle: {
color: {
global: false,
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(23, 113, 245, 0.50)'
},
{
offset: 1,
color: 'rgba(23, 113, 245, 0.00)'
}
]
}
},
// label: {
// show: true,
// position: 'top'
// },
type: 'line',
// stack: 'Total',
smooth: true,
symbolSize: 10,
symbol: 'circle',
data: []
}
]
};