美文网首页
Vue3 & TypeScript ---- echart国家地

Vue3 & TypeScript ---- echart国家地

作者: 牛会骑自行车 | 来源:发表于2023-05-05 23:21 被阅读0次
  1. 一般制作图表,我的步骤是先找到echart官方示例 https://echarts.apache.org/examples/zh/index.html ,挑一个和自己项目需求相近的,先给它把图弄出来;
  2. 注意,示例中的数据都是死的,而我们在项目中一定是异步获取数据。所以第二步,先将数据和图表配合使页面图表正常展示;
  3. 添加另外的功能:比如这次的zoom和resize;
  4. 完善其它的细节,比如tooltip的样式什么的

请看一个极其朴素的国家地图👇哈哈今天重点是zoom和resize,其它的东西能删我都删掉了,这样子比较好看~

效果图

下载国家地图的GeoJson文件:挑自己合适的方式,可以将文件下载在本地,也可以选择人家的API获取。
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.50475906922609&lng=104.2822265625&zoom=4
与这俩相关的事情是,微信小程序,不能缩放!如果您能,记得告诉我怎么写哈哈哈哈哈

页面代码:
<script lang='ts' setup>
import ChinaMap from './ChinaMap.json'
import { init, registerMap } from 'echarts'
import {domResize} from '@/utils/utils'

// 容器DOM
const refMap = ref();
// chart实例
const chartInstance = ref();
// 数据
const data = ref();

const initWrap = () => {
    domResize(refMap.value, () => {
        chartInstance.value && chartInstance.value.resize()
    })
}

const initData = () => {
    data.value = [
        { name: '北京市', value: 20057.34 },
    ]
}

const initMap = () => {
    chartInstance.value = markRaw(init(refMap.value));
    registerMap('China', ChinaMap as any);

    chartInstance.value.setOption({
        series: [
            {
                type: 'map',
                map: 'China',
                label: {
                    show: true
                },
                data: data.value,
            }
        ],
        geo: {
            map: 'China',
            roam: true, //是否开启平游或缩放:'scale'为只开启缩放,'move'为拖拽
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 5,
            },
            // 这个geo好像是个图层的感觉。如果你好奇,可以将zoom的属性给大于1,就可以看到它了。而且缩放和拖拽其实都是在操作这个“蒙层”
            // 操作地图的层级
            zlevel: 1,
            label: {
              show: true,
            }
        }
    });
}

onMounted(() => {
    initData();
    initWrap();
    initMap();
})

</script>

<template>
    <div class="wrap-map borderT" ref="refMap"></div>
</template>

<style lang="scss" scoped>
.wrap-map {
    height: 100%;
}
</style>

tada~~~一个可以在PC端缩放和拖拽的地图就完成啦

相关文章

网友评论

      本文标题:Vue3 & TypeScript ---- echart国家地

      本文链接:https://www.haomeiwen.com/subject/uvhqsdtx.html