首页 前端知识 Echarts绘制geo地图属性设置大全(一)

Echarts绘制geo地图属性设置大全(一)

2024-04-09 23:04:02 前端知识 前端哥 610 852 我要收藏

1、Echarts版本

"echarts": "^5.3.3",

2、基础地图绘制(以中国地图为例)

绘制地图需要有用于绘制地理坐标系的数据,如示例使用的china.js

<template>
    <div ref="mapBar" class="map-class"></div>
</template>

<script>
import * as echarts from 'echarts';
import geoJson from './china.js';

export default {
    name: 'map-geo',
    data() {
        return {
            chartData:[
                {name: '北京', value: 8888},
                {name: '上海', value: 10000},
                {name: '天津', value: 7777},
                {name: '重庆', value: 10001},
                {name: '黑龙江', value: 8989},
                {name: '辽宁', value: 6666},
                {name: '吉林', value: 5555},
                {name: '河北', value: 4656},
                {name: '河南', value: 888},
                {name: '湖北', value: 9999},
                {name: '湖南', value: 9000},
                {name: '山东', value: 3500},
                {name: '山西', value: 1888},
                {name: '陕西', value: 1600},
                {name: '安徽', value: 9000},
                {name: '浙江', value: 3840},
                {name: '江苏', value: 7000},
                {name: '福建', value: 1000},
                {name: '广东', value: 2000},
                {name: '海南', value: 3000},
                {name: '四川', value: 1600},
                {name: '云南', value: 800},
                {name: '贵州', value: 400},
                {name: '青海', value: 6669},
                {name: '甘肃', value: 5555},
                {name: '江西', value: 666},
                {name: '台湾', value: 6666},
                {name: '内蒙古', value: 6000},
                {name: '宁夏', value: 4900},
                {name: '新疆', value: 500},
                {name: '西藏', value: 8600},
                {name: '广西', value: 5000},
                {name: '香港', value: 1000},
                {name: '澳门', value: 600},
            ],
            options: {
                tooltip: {
                    triggerOn: 'mousemove',
                    formatter: function (e) {
                        return e.name + ':' + e.value
                    }
                },

                // geo为地理坐标系组件,用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
                geo: {
                    map: 'china', // 使用 registerMap 注册的地图名称。
                },

                series: [
                    {
                        name: '随机数',
                        type: 'map',
                        geoIndex: 0,
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.chart = echarts.init(this.$refs.mapBar);
            // 使用数据 geoJson 注册名为 'china' 的地图
            echarts.registerMap('china', geoJson);
            // 要渲染的数据
            this.options.series[0].data = this.chartData;
            this.$nextTick(() => {
                this.chart.setOption(this.options);
            })
        },
    }
};
</script>

<style scoped>
.map-class{
    width: 65%;
    height: 80vh;
    border: 1px solid #ccc;
}
</style>

绘制效果:

3、地理坐标系geo组件设置

3.1 鼠标缩放和平移

roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale',开启平移'move'。设置成 true 为都开启
zoom: 1.23, // 当前视角的缩放比例
scaleLimit: { // 滚轮缩放的极限控制,默认的缩放为1
    min: 1,  // 最小的缩放值
    max: 10,  // 最大的缩放值
},

3.2 组件在容器中的位置

// 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。若值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。
top: 'middle',
// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// bottom: '20',
// 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。若值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
left: 'center',
// 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// right: '20',

3.3 图形上的文本标签

// 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
label: { 
    show: true, // 是否显示标签。
    fontSize: '11',
    color: 'rgba(0,0,0,0.7)',
},

3.4 地图区域的多边形 图形样式

// 地图区域的多边形 图形样式。
itemStyle: {
    borderColor: 'rgba(255, 0, 0, 0.2)', // 图形的描边颜色。
    borderWidth: 1, // 描边线宽。为 0 时无描边。
    borderType: 'solid', // 描边类型。
},

3.5 高亮状态下的多边形和标签样式

// 高亮状态下的多边形和标签样式。
emphasis: {
    focus: 'none', //在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。'none' 不淡出其它图形,默认使用该配置。'self' 聚焦当前高亮图形,淡出其它图形。
    // 高亮状态下文本标签
    label: { 
        color: '#ffffff',
    },
    // 高亮状态下图形样式
    itemStyle: {
        areaColor: '#409eff', // 高亮区域的颜色。
        color: '#67c23a', // 高亮区域的颜色。areaColor和color都设置,高亮区域渲染areaColor的值
        borderColor: 'rgba(0, 0, 0, 0.8)', // 图形的描边颜色。
        borderWidth: 3, // 描边线宽。为 0 时无描边。
        borderType: 'dotted', // 描边类型。
    },
},

3.6 选中状态下的多边形和标签样式

selectedMode: 'single', // 选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'表示单选,或者'multiple'表示多选。 
// 选中状态下的多边形和标签样式。
select: {
    disabled: false, // 是否可以被选中。在开启selectedMode的时候有效,可以用于关闭部分数据。
    // 选中区域文本标签
    label: { 
        color: '#ff00ff',
    },
    // 高亮状态下图形样式
    itemStyle: {
        areaColor: '#67c23a', // 高亮区域的颜色。
        borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
        borderWidth: 4, // 描边线宽。为 0 时无描边。
        borderType: 'dashed', // 描边类型。
    },
},

3.7 在地图中对特定的区域配置样式

// 在地图中对特定的区域配置样式
regions: [{
    name: '河南', // 地图区域的名称
    itemStyle: {
        borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
        borderWidth: 4, // 描边线宽。为 0 时无描边。
        borderType: 'dashed', // 描边类型。
    },
}],

3.8 更多配置可查看Echarts官网配置项geo

绘制效果:

4、视觉映射组件visualMap设置

4.1 连续型数据不分段

默认设置:

// 连续型数据不分段。
visualMap: {
    type: 'continuous', // 连续型
    min: 500, // 最小值
    max: 10000, // 最大值
},

绘制效果:

自定义设置:

// 连续型数据不分段。
visualMap: {
    type: 'continuous', // 连续型
    min: 500, // 最小值
    max: 10000, // 最大值
    range: [500, 10000], // 指定手柄对应数值的位置。range 应在 min max 范围内。
    calculable: true, // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。
    realtime: true, // 拖拽时,是否实时更新。如果为true则拖拽手柄过程中实时更新图表视图。如果为false则拖拽结束时,才更新视图。
    inverse: false, // 当inverse为false时,数据大小的位置规则,和直角坐标系相同,即:当 visualMap.orient 为'vertical'时,数据上大下小。当 visualMap.orient 为'horizontal'时,数据右大左小。当inverse为true时,相反。
    precision: 0, // 数据展示的小数精度,默认为0,无小数点。
    itemWidth: 20, // 长条的宽度
    itemHeight: 200, // 长条的高度。
    align: 'top', // 组件中手柄和文字摆放位置,可选值为:'auto'自动决定。orient 为 horizontal 时:'left' 手柄和label在右,'right' 手柄和label在左。orient 为 vertical 时:'top' 手柄和label在下,'bottom' 手柄和label在上。
    text: ['高', '低'], // 两端的文本
    textGap: 20, // 两端文字主体之间的距离,单位为px。
    show: true, // 是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在。
    // left、top、right、bottom 设置组件在容器中的位置
    left: 26,
    bottom: 10,
    orient: 'vertical', // 如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。
    padding: 5, // visualMap-piecewise内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
    backgroundColor: '#eee', // 背景色
    borderColor: '#999', // 边框颜色
    borderWidth: 1, // 边框线宽,单位px。
    // 文字样式设置
    textStyle: {
        color: '#11dd11',
        fontSize: 14
    },
    color: ['red', 'orangered', 'yellow', 'lightskyblue'], // 定义 在选中范围中 的视觉元素。顺序是由数值 大 到 小
},

绘制效果:

4.2 连续型数据自动平均分段

默认设置:

// 连续型数据自动平均分段
visualMap: {
    type: 'piecewise', // 分段型。
    min: 500, // 最小值。
    max: 10000, // 最大值。
},

绘制效果:重庆和贵州没有颜色是因为,重庆数值大于10000,贵州数值小于500

 自定义设置:

// 连续型数据自动平均分段。
visualMap: {
    type: 'piecewise', // 分段型。
    min: 500, // 最小值。
    max: 10000, // 最大值。
    splitNumber: 4, // 对于连续型数据,自动平均切分成几段。默认为5段。 连续数据的范围需要 max 和 min 来指定。如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories,则 splitNumber 无效。
    minOpen: true, // 当 type 为 piecewise 且使用 min/max/splitNumber 时,此参数有效。当值为 true 时,界面上会额外多出一个『< min』的选块。
    maxOpen: true, // 当 type 为 piecewise 且使用 min/max/splitNumber 时,此参数有效。当值为 true 时,界面上会额外多出一个『> max』的选块。


    // 连续型数据分段设置
    selectedMode: 'multiple', // 选择模式,可以是:'multiple'(多选)。'single'(单选)。true(单选)从5.3.3版本支持。false(禁止选择)从5.3.3版本支持。四种取值效果都不一样。
    inverse: false, // 是否反转。
    precision: 0, // 数据展示的小数精度。
    itemWidth: 30, // 图形的宽度,即每个小块的宽度。
    itemHeight: 30, // 图形的高度,即每个小块的高度。
    align: 'auto', // 指定组件中图形(比如小方块)和文字的摆放关系,可选值为:'auto' 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
    text: ['高', '低'], // 两端的文本
    textGap: 15, // 每项的色块与文本标签之间的距离,单位为px。
    showLabel: true, // 是否显示每项选块的文本标签。默认情况是,如果 visualMap-piecewise.text 被使用则不显示文本标签,否则显示。
    itemGap: 20, // 每两个图元选块之间的间隔距离,单位为px。
    itemSymbol: 'circle', // 默认的图形。可选值为:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
    show: true, // 是否显示 visualMap-piecewise 组件。如果设置为 false,不会显示,但是数据映射的功能还存在,即地图各块会渲染颜色。
    // left、top、right、bottom 设置组件在容器中的位置
    left: 26,
    bottom: 40,
    orient: 'vertical', // 如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。
    padding: 20, // visualMap-piecewise内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
    backgroundColor: '#eee', // 背景色
    borderColor: '#999', // 边框颜色
    borderWidth: 1, // 边框线宽,单位px。
    // 文字样式设置
    textStyle: {
        color: '#11dd11',
        fontSize: 14
    },
    color: ['red', 'orangered', 'yellow', 'lightskyblue'],
},

 绘制效果:

4.3 连续型数据自定义分段

默认设置:

// 连续型数据自定义分段。
visualMap: {
    type: 'piecewise', // 分段型
    // 连续型数据自定义分段
    // 可以使用 lt(小于,less than),gt(大于,greater than),lte(小于等于 less than or equals),gte(大于等于,greater than or equals)来表达边界
    pieces: [
        {
            gt: 10000,
            label: "> 10000",
            color: "red"
        },
        {
            gte: 5000,
            lte: 10000,
            label: "5001 - 10000",
            color: "orangered"
        },
        {
            gte: 500,
            lte: 5000,
            label: "501 - 5000",
            color: "yellow"
        },
        {
            gte: 0,
            lte: 500,
            label: "0 - 500",
            color: "lightskyblue"
        },
   ],
},

绘制效果:

自定义设置:

// 连续型数据自定义分段。
visualMap: {
    type: 'piecewise', // 分段型
    // 连续型数据自定义分段
    // 可以使用 lt(小于,less than),gt(大于,greater than),lte(小于等于 less than or equals),gte(大于等于,greater than or equals)来表达边界
    pieces: [
        {
            gt: 10000,
            label: "> 10000",
            color: "red"
        },
        {
            gte: 5000,
            lte: 10000,
            label: "5001 - 10000",
            color: "orangered"
        },
        {
            gte: 500,
            lte: 5000,
            label: "501 - 5000",
            color: "yellow"
        },
        {
            gte: 0,
            lte: 500,
            label: "0 - 500",
            color: "lightskyblue"
        },
    ],

    
    // 连续型数据分段设置
    // 以下部分自定义设置 与 连续型数据自动平均分段 一样
    selectedMode: 'multiple', // 选择模式,可以是:'multiple'(多选)。'single'(单选)。true(单选)从5.3.3版本支持。false(禁止选择)从5.3.3版本支持。四种取值效果都不一样。
    inverse: false, // 是否反转。
    precision: 0, // 数据展示的小数精度。
    itemWidth: 30, // 图形的宽度,即每个小块的宽度。
    itemHeight: 30, // 图形的高度,即每个小块的高度。
    align: 'auto', // 指定组件中图形(比如小方块)和文字的摆放关系,可选值为:'auto' 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
    text: ['高', '低'], // 两端的文本
    textGap: 15, // 每项的色块与文本标签之间的距离,单位为px。
    showLabel: true, // 是否显示每项选块的文本标签。默认情况是,如果 visualMap-piecewise.text 被使用则不显示文本标签,否则显示。
    itemGap: 20, // 每两个图元选块之间的间隔距离,单位为px。
    itemSymbol: 'circle', // 默认的图形。可选值为:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
    show: true, // 是否显示 visualMap-piecewise 组件。如果设置为 false,不会显示,但是数据映射的功能还存在,即地图各块会渲染颜色。
    // left、top、right、bottom 设置组件在容器中的位置
    left: 26,
    bottom: 40,
    orient: 'vertical', // 如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。
    padding: 20, // visualMap-piecewise内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
    backgroundColor: '#eee', // 背景色
    borderColor: '#999', // 边框颜色
    borderWidth: 1, // 边框线宽,单位px。
    // 文字样式设置
    textStyle: {
        color: '#11dd11',
        fontSize: 14
    },
},

绘制效果:

4.4 更多配置可查看Echarts官网配置visualMap

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4714.html
标签
here地图
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!