这次在做项目的时候，蓝湖是 1920 x 1080 的设计图。
写页面的时候用的1920 x 1080 的像素标准直接来写。echarts 里面的尺寸 只能 写 12 或 12%。有的如：fontSize 之类的 只有 12 。导致 写的时候是 1920，输出到 4k 屏幕上，label 标签 和 字就很很小
image.png
解决方案：
将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是19201080的，某个数值是fontSize:12，当前显示器是3840的大屏，那么你现在的字体大小应该是：12（3840/1920）= 24。
//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;
换算方法
function nowSize(val,initWidth=1920){
return val * (nowClientWidth/initWidth);
// 使用的时候 nowSize(13)就代表1920下是13px
fontSize: nowSize(13)
width: nowSize(13)
如果你的项目chart不多，你在组件里写换算方法也可以，但更推荐在项目的全部做个封装。
具体到项目里封装一下：
chart-resize.js
// import Vue from "vue";
//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;
// 换算方法
window.nowSize = function(val, initWidth = 1920) {
return val * (nowClientWidth / initWidth);
};
// Vue.prototype.$nowSize = nowSize
/*
*
一、使用：
第一种
// 例如字体在1920下为14px: const vm=this;
// 然后在options里字体的大小单位用 vm.$nowSize(14)
第二种：
例如chart里的某字体在1920下为14px, 在options里字体的大小单位用: nowSize(14)
**其他适配技巧**
1、图形的定位或位置偏移等用百分比设置
2、像lengend tooltip 等属性的formatter回调函数里，可以用直接用rem，
例如：
tooltip:{
formatter: function(params){
const tip=`<div style="font-size:1.5rem;">
${params.name}：<span style="font-size:1.6rem;">${params.value}</span> <br>
</div>`
return tip
}
},
*
*/
main.js:
import "./scripts/chart-resize";
注意事项
echarts很多属性有默认值，那么当你的项目有自适应大屏需求时，这些默认值都要用nowSize方法改写掉！
图形要做到自适应，以下属性需全部改写：
- x轴和y轴的轴线线条宽度
- x轴和y轴的坐标字体大小
- x轴和y轴的坐标字体大小
- lengend 字体大小
- tooltip字体大小
- 。。。。
使用：
chart.vue
写成 window.nowSize(14) 或者 nowSize(14)
如果项目安装了eslint,开启了undefined检查，就写window.nowSize(14)
let option = {
xAxis: [{
type: 'category',
data: ['一级', '二级', '三级', '四级'],
axisLabel: { // 坐标值
show: true,
color: "#eee",
// fontSize: 12,
fontSize: nowSize(14),
},
axisTick:{ // 刻度点
show: false,
},
axisPointer:{ // 鼠标划上提示线
// show: false,
type: 'shadow'
}
}],
yAxis: {
min:0, //取0为最小刻度
max: max2, //取100为最大刻度
minInterval:2, //分割刻度
type: 'value',
// show: false, // 隐藏y轴
axisTick:{ // 刻度点
show: false,
},
axisLabel: { // 坐标值
show: false,
},
axisPointer:{
show: false
},
splitLine:{ // y轴网格线
show: true,
lineStyle:{
type:'solid', // 设置背景为虚线
width: 0.3, // 网格线线宽
// color: '#eee',
color: [' #354ea0', '#354ea3'], // 使用深浅的间隔色
}
},
},
tooltip:{
backgroundColor: 'rgba(1, 1, 1, 0.9)',
borderColor: "rgba(0, 225, 255, 0.17)",
textStyle:{
color: 'rgba(255, 255, 255, 0.99)',
fontSize: nowSize(17),
},
formatter: function(params){
// ${params.marker}
const tip=`<div style="font-size:1.4rem;">
${params.name}：<span style="color:${params.color.colorStops[0].color};font-weight:800; ">${params.value}</span> <br>
</div>`
return tip
}
},
grid:{ // 设置图形位置 横纵轴偏移
left: '10%',
top: '17%',
height: '66%',
},
series: [{
data: chart_data,
type: 'bar',
barWidth: "38%",
label: { // 柱子上方展示数量
show: true, //开启显示
position: 'top', //在上方显示
color: '#47bdce',
// fontSize: 12,
fontSize: nowSize(14)
},
itemStyle: {
color: function (params) {
var colorList = [
['#fb6560', '#fb3e35'],
['#ff9717', '#f56812'],
['#fff766eb', '#EFE42A'],
['#61dbe8', '#4e9ff5'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
}
}]
};
