echarts移动端字体模糊解决方法
echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下:
获取字体大小,实测在主流手机上效果尚可:
function fGetChartFontSize(){
const dpr = window.devicePixelRatio;
let fontSize = 14;
if(dpr == 2){
fontSize = 19;
}
else if(dpr == 3){
fontSize = 30;
}
else if(dpr > 3){
fontSize = 30;
}
return fontSize;
}
设置echarts的字体大小
const size = fGetChartFontSize();
const option = {
tooltip: {
show: true,
trigger: 'axis',
formatter: "{c}%",
backgroundColor: '#f46200',
axisPointer: {
lineStyle: {
show: true,
color: '#f46200',
width: 1,
}
},
textStyle:{
fontSize:size //此处设置提示文字大小
},
padding:[5,10]
},
grid: {
top: '10%',
left: '0%',
right: '5%',
bottom: '0%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.dateList,
axisLabel: {
show: true,
textStyle: {
color: '#d2d2d2',
fontSize: size //此处设置X轴文字大小
}
},
axisLine: {
lineStyle: {
color: '#e5e5e5',
width: 1,
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e5e5e5'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#d2d2d2',
fontSize: size, //此处设置Y轴文字大小
baseline:'bottom'
}
},
max: 4.9,
min: 3.7,
interval: 0.2,
axisLine: {
lineStyle: {
color: '#e5e5e5',
width: 1,
}
},
splitLine: {
lineStyle: {
color: '#e5e5e5'
}
}
}],
series: [{
name: '',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: this.rateList,
itemStyle: {
normal: {
borderColor: '#f46200',
}
},
areaStyle: {
normal: {
color: '#ffe1c2',
}
},
lineStyle: {
normal: {
color: '#ff8200',
width:4
}
},
symbolSize:12
}, ]
}; this.myChart.setOption(option, true);
echarts移动端字体模糊解决方法的更多相关文章
- Android Studio代码字体模糊解决方法
问题描述: 我的电脑分辨率是(1920*1080),然而安装了Android Studio后代码的一些部分区域出现模糊的现象,应该是软件默认设置与高分屏有冲突. 如下图所示. 解决方法: 打开设置对话 ...
- Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法
Linux(Manjaro) - IntelliJ IDEA 字体模糊解决方法 解决方法非常简单, 只要安装 JetBrains 提供的 jre 即可 使用 Octopi 或者 pacman 安装名为 ...
- Mac 外接 Dell 4K 显示器字体模糊解决办法
Mac 外接 Dell 4K 显示器字体模糊解决办法 mac mini mbp 2020 refs https://zhuanlan.zhihu.com/p/52100804 xgqfrms 2012 ...
- canvas 1px 出现模糊解决方法及原理
关于canvas绘制1像素出现模糊的原因及解决方法 canvas是html5中非常强大的功能,但是在绘制的时候如果出现1像素,例如画一条1像素的线可能出现模糊情况. 一.解决方法 网上比较常见的解决方 ...
- Win10 字体模糊解决(DPI缩放禁用),设置默认输入法英文
电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...
- 初次体验百度eCharts遇到的问题和解决方法
前言 上周在厌烦Highchart下,体验了下百度的eCharts,支持IE6.7.8+外,对数据在线编辑还有工具栏支持,体验时遇到了几个小问题,最近两天在尝试得到了一个解决方法. Tooltip时单 ...
- Sass、Less编译器koala及koala不支持中文字体的解决方法
一款很好用的Sass编译器,还可以编译Less.coffeescript等 去官网下载适合自己电脑的版本 http://koala-app.com/index-zh.html 打开后拖动或者打开项目目 ...
- poi导出excel出现本工作薄不能再使用其他新字体的解决方法
最近使用POI处理EXCEL,当处理的单元格太多时,就会出现,本工作薄使用字体过多,不能再使用其他新的字体的是提示. 网上很多方法告诉我,要怎么修改excel文件,但是这个解决不了问题啊,难道让客户去 ...
- zabbix4.2升级后中文字体乱码解决方法.
字体文件目录: zabbix 4.2 /usr/share/zabbix/assets/fonts/ 4.0 /usr/share/zabbix/fonts/ php 脚本文件位置: /usr/sha ...
随机推荐
- mybatis两级缓存原理剖析
https://blog.csdn.net/zhurhyme/article/details/81064108 对于mybatis的缓存认识一直有一个误区,所以今天写一篇文章帮自己订正一下.mybat ...
- zeppelin ERROR总结
ERROR [2017-03-23 20:01:50,799] ({qtp331657670-221} NotebookServer.java[onMessage]:221) - Can't hand ...
- C指针——简单总结
简介: 指针变量在使用前,必须指向具体的有效的内存单元 指针变量在使用前不但要定义还要初始化 四个方面:指针的类型,指针指向的类型,指针的值或者指针所指向的内存区,指针本身所占的内存区 int *pt ...
- 722. Remove Comments
class Solution { public: vector<string> removeComments(vector<string>& source) { vec ...
- POJ:2385-Apple Catching(dp经典题)
Apple Catching Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14311 Accepted: 7000 Descr ...
- 一些 Markdown 语法
参考于: https://www.jianshu.com/p/b03a8d7b1719 [先挖个坑,来日再填]
- cf978E Bus Video System
The busses in Berland are equipped with a video surveillance system. The system records information ...
- Atlantis HDU - 1542
Problem Description There are several ancient Greek texts that contain descriptions of the fabled is ...
- 14、函数之匿名函数(lambda)
关键字lambda可以创建匿名函数,语法是:lambda 参数s :表达式.匿名函数与普通函数只有以下几点不同:①没有函数名:②只能有一个表达式:③一定会有返回值,返回值就是该表达式的结果. 另外,匿 ...
- c语言printf()输出格式大全(转载)
1.转换说明符 %a(%A) 浮点数.十六进制数字和p-(P-)记数法(C99) %c 字符 %d 有符号十进制整 ...