echarts 图表 地图实例

效果：

代码实现：

draw(data) {
        var option = {
            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: 'china',
                // roam: true, // 是否可以缩放、拖拽
                scaleLimit: {
                    min: 1,
                    max: 2,
                },
                zoom: 1.23,
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: '#fff',
                    },
                },
                itemStyle: {
                    normal: {
                        // areaColor: "red",
                        shadowColor: '#0d82dc',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10,
                        borderColor: 'transparent',
                        borderWidth: 1,
                    },
                    emphasis: {
                        areaColor: '#107889',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0,
                    },
                },
            },
            series: [
                {
                    name: '整机销售台数 (台)',
                    type: 'map',
                    geoIndex: 0,
                    data: data,
                },
            ],
        };
        window.addEventListener('resize', () => {
            this.myChart.resize();
        });
        this.myChart.setOption(option);
    }