Vue3+TS+ElementUI搭建管理系统之Echarts实现Map

Vue项目px转rem

// 安装postcss-pxtorem
npm install postcss-pxtorem -D
注：版本必须是5.1.1，不然报错msg:PostCSS plugin postcss-pxtorem requires PostCSS 8

// utils/rem.ts文件
const baseSize: number = 20
function setRem() {
    const scale: number = document.documentElement.clientWidth / 1920;
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
}
// 初始化
setRem()
window.onresize = function () {
    setRem()
}

// main.js
import './utils/rem'

// vue项目根目录创建postcss.config.js
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 16,
            "propList": ["*"]
        }
    }
}

地图数据

// json数据放到mock/json文件夹中，index.js中设定接口
Mock.mock('/map/getMap', 'get', require('./json/china.json'))
Mock.mock('/map/getColorMap', 'get', require('./json/colorData.json'))
Mock.mock('/map/getSpotMap', 'get', require('./json/spotData.json'))

使用本地json数据创建地图

// template
<el-tab-pane label="色温图">
  <div class="colorMap" ref="colorMap"></div>
</el-tab-pane>
<el-tab-pane label="标记地图">
  <div class="pointMap" ref="pointMap"></div>
</el-tab-pane>
​
// script
echarts.registerMap("china", mapJson); // 创建地图
const colorMap = ref<HTMLElement>(); // 获取dom元素
const colorMaps = ref<any>();
// echarts初始化，必须在dom元素构建完成才能跳用init方法，故在nextTick中使用
colorMaps.value = echarts.init(colorMap.value!);
​
// css 必须优先设置好canvas容器大小
.colorMap{
  width: 1260px;
  height: 630px;
}

效果图

项目地址：github.com/bo2bo/vue3-…