echarts绘制2D地图

news2024/11/16 18:10:47

简介

此案例需要用到世界地图json数据，我把json文件放到我的资源中，有需要的自行下载。

安装插件

// 安装echats 
npm install echarts --save

项目中引用

1，引入安装的echarts插件

import * as echarts from 'echarts';

2，引入世界地图json文件

import WorldJSON from './world.json'

3，echarts 注册世界地图

//注册世界地图
echarts.registerMap('world', WorldJSON);

绘制地图代码

function draw(data) {
    var myChart = echarts.init(document.getElementById('map'));
    var option = {
        backgroundColor: '#001213',
        tooltip: {
            trigger: 'item',
            icon: 'query',
            // triggerOn: 'click',
            formatter: function (e, t, n) {
                let string = '';
                string += `<div style="padding:10px"><span style="padding-right:10px">${e.name}</span><span>(${e.value ? e.value : ''
                    }  台)</span> </div>`;
                let childList = e.data ? e.data.childs : [];
                childList.forEach((item) => {
                    string += `<div style="padding:0 10px 5px 10px;display:flex;justify-content: space-between;"><div style="padding-right:20px">${item.arg1}</div><div>${item.val1}台</div></div>`;
                });
                return string;
            },
            fontSize: '12px',
            backgroundColor: 'rgba(7,16,47,.6)', //设置背景图片 rgba格式
            color: 'black',
            borderWidth: '0', //边框宽度设置1
            borderColor: 'rgba(9,229,237,.2)', //设置边框颜色
            textStyle: {
                color: '#fff', //设置文字颜色
            },
            extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // top:'10%',
            containLabel: true,
        },
        // visualMap: {
        //     min: 0,
        //     max: 1000,
        //     left: 0,
        //     bottom: 0,
        //     showLabel: !0,
        //     text: ['高', '低'],
        //     inRange: {
        //         color: ['#52f8fd', '#4bd3f9', '#62b7e7', '#7863fc']
        //     },
        //     pieces: [
        //         {
        //             gt: 4000,
        //             color: '#7863fc',
        //         },
        //         {
        //             gte: 3000,
        //             lte: 4000,
        //             color: '#6699f9',
        //         },
        //         {
        //             gte: 2000,
        //             lt: 3000,
        //             color: '#62b7e7',
        //         },
        //         {
        //             gt: 1000,
        //             lt: 2000,
        //             color: '#4bd3f9',
        //         },
        //         {
        //             gt: 0,
        //             lt: 1000,
        //             color: '#52f8fd',
        //         },
        //         {
        //             value: 0,
        //             color: '#52f8fd',
        //         },
        //     ],
        //     show: false,
        // },
        geo: {
            map: 'world',
            roam: true, // 是否可以缩放、拖拽
            scaleLimit: {
                min: 1,
                max: 2,
            },
            zoom: 1,
            label: {
                show: false,
                fontSize: '10',
                color: '#fff',
            },
            itemStyle: {
                // areaColor: "red",
                shadowColor: '#0d82dc',
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
                borderWidth: 2,
                areaColor: '#004444',
                borderColor: '#00cccc',
            },
            emphasis: {
                itemStyle:{
                    areaColor: '#00cccc',
                },
                
                // shadowOffsetX: 0,
                // shadowOffsetY: 0,
                // borderWidth: 0,
                label:{
                    show:true,
                    fontSize: '10',
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name: '整机销售台数 (台)',
                type: 'map',
                geoIndex: 0,
                data: [
                    { name: '广东', value: 100, selected: true }
                    // 其他数据...
                ]
            },
        ],
    };
    window.addEventListener('resize', () => {
        myChart.resize();
    });
    myChart.setOption(option);
}