1. 安装
首先第一步使用 autofit.js 插件;这个插件使用之后,页面会根据浏览器的缩放自适应的改变宽高
npm install autofit.js
2. 使用
如果要在整个项目做自适应,将配置配到App.vue,如果只要单个页面自适应,只需要配置当前页面即可
App.vue配置如下(单个页面自适应也是如此配置)
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: "#main",
resize: true
})
* - el:渲染的dom,默认是 "#app",必须使用id选择器
* - dw:设计稿的宽度,默认是 1920
* - dh:设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080
* - resize:是否监听resize事件,默认是 true
* - ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md
* - transition:过渡时间,默认是 0
* - delay:默认是 0
autofit.init({
ignore: [
{
el: ".gaodeMap",
},
]
})
传入 ignore 以使元素不被缩放
但是针对一些 echarts 图表相关的,antufit.js 也并不能完全 OK,所以要搭配这 echarts 提供的 resize 事件,在页面尺寸发生变化时触发
getData() {
supplierUseNFCAPI().then(res => {
if (res.code === 200) {
const lists = res.data;
this.echartXData2 = [
{
type: "category",
boundaryGap: false,
axisLabel: {
color: '#ffffff',
fontSize: 15,
interval: 0, // 设置 X 轴文字全部显示
},
data: lists.date,
},
];
this.echartYData2Series = lists.list;
this.echartYData2Series.map((item) => {
item.type = "line";
item["stack"] = "Total";
item["areaStyle"] = {};
item["emphasis"] = { focus: "series" };
});
this.init()
window.addEventListener('resize', this.handleResize)
}
})
},
handleResize() {
let chartDom = document.getElementById('echarts6_A');
let myChart = echarts.init(chartDom);
myChart.resize()
},
3.补充-大屏中使用中国地图或某个城市地图
- echarts 的版本要在 4 版本
- 推荐阿里提供的 DataV.GeoAtlas DataV.GeoAtlas地理小工具系列
- 虽然这个工具提供了线上 API,在本地测试没有问题,但是部署到服务器上后就拒绝访问了,所以还是老老实实打开 JSONAPI,复制到本地运行吧
这里就截个图,代码太多
// 引入城市JSON文件
import mapData from "@/api/map"
详细代码
async init() {
const myChart = echarts.init(this.$refs.chartsDOM);
// 添加阴影
for (let index = 0; index < 20; index++) {
this.geoList.push({
map: "LF",
region: "LF",
zoom: 1.2,
// zLevel: 0,
silent: true,
label: {
show: false,
},
// offset: [30,40],
transform: 'scaleX(-60deg)',// 使用 transform 属性来实现地图的左右倾斜效果
roam: false,
itemStyle: {
areaColor: "#07183F",
shadowColor: "#052EC0",
shadowOffsetY: index * 1.5,
shadowOffsetX: 0,
},
});
}
myChart.showLoading()
console.log(mapData);
echarts.registerMap("LF", JSON.stringify(mapData[0]))
const option = {
geo: [...this.geoList],
tooltip: {
trigger: 'item',
formatter: '{b}<br />企业注册数量:{c}',
},// 配置提示框
series: [
{
name: 'LF',
type: 'map',
map: 'LF',
layoutCenter: ["10%", "60%"],
label: {
show: true,
normal: {
show: true, //显示省份标签
textStyle: {
color: "#fff",
fontWeight: 'bold',
fontSize: 16
}, //省份标签字体颜色
},
},
emphasis: {
label: {
color: "#fff",
},
itemStyle: {
borderWidth: 0,
shadowColor: "rgba(22, 87, 200, 0.5)",
shadowBlur: 5,
shadowOffsetY: 5,
// borderColor: "rgba(255,255,255,1)",
areaColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#04C2BD", // 0% 处的颜色
},
{
offset: 1,
color: "#04C2BD", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
select: {
label: {
color: "#fff",
},
itemStyle: {
borderWidth: 0,
shadowColor: "rgba(22, 87, 200, 0.5)",
shadowBlur: 20,
shadowOffsetY: 20,
borderColor: "rgba(255,255,255,1)",
areaColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#779ddf", // 0% 处的颜色
},
{
offset: 1,
color: "#1657C8", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
areaColor: '#07195E',
borderWidth: 1, //区域边框宽度
borderColor: "#009fe8", //区域边框颜色
},
},
data: this.barData
}
]
}
myChart.hideLoading()
myChart.setOption(option);
}