vue可视化大屏及城市地图渲染

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);
}