Echarts构建厂图地图等类型

*最终实现的效果图：中间部分是最终实现的效果图

1. 第一步：跟UI沟通，请UI提供对应的SVG图并且切好对应的块，如（C01-C13的块），下面的图片是我这边引入厂图的SVG，一般情况下，UI提供的SVG是没有name值的，这就需要我们自己添加上去！！！（重点！重点！重点！必须要添加name值，不然Echarts没法识别对应的位置）

2.第二步：引入SVG到Echarts里，并对SVG进行数据联调，实现最终的效果

const myChart = echarts.init(document.getElementById('factoryDrawing'));
//data里存放C01-C13的数据，原本是有13组数据的，但是太多了，我就只放三个
const data = [ 

    {
        name: 'C01', // 和SVG的name对应
        title: 'C01库存信息',
        list: [
            {
                title: '库存预警值(吨)',
                label: 1000,
            }, {
                title: '实际库存(吨)',
                label: 850,
            }, {
                title: '其中原板(吨)',
                label: 300,
            }, {
                title: '在制品(吨)',
                label: 250,
            }, {
                title: '产成品(吨)',
                label: 300,
            },
        ]
    },
    {
        name: 'C02',
        title: 'C02库存信息',
        list: [
            {
                title: '库存预警值(吨)',
                label: 1000,
            }, {
                title: '实际库存(吨)',
                label: 850,
            }, {
                title: '其中原板(吨)',
                label: 300,
            }, {
                title: '在制品(吨)',
                label: 250,
            }, {
                title: '产成品(吨)',
                label: 300,
            },
        ]
    },
    {
        name: 'C03',
        title: 'C03库存信息',
        list: [
            {
                title: '库存预警值(吨)',
                label: 1000,
            }, {
                title: '实际库存(吨)',
                label: 850,
            }, {
                title: '其中原板(吨)',
                label: 300,
            }, {
                title: '在制品(吨)',
                label: 250,
            }, {
                title: '产成品(吨)',
                label: 300,
            },
        ]
    }
];

data.map(item => {
    Object.assign(item, {
        itemStyle: {
            color: 'transparent', // 引入SVG后，UI切好的块可能会显示黑色，这就需要我们手动改变黑色块的背景色
        },
        emphasis: {
            label: {
                show: false, //如果UI提供的SVG上有对应块的name值就隐藏，没有就可以不隐藏
            }
        },
        tooltip: { //这是鼠标悬浮在对应的块上显示对应的提示（效果图3红框）
            formatter(param) {
                return `<div class='factoryDrawingTooltip'>
                    <div class="factoryDrawingTooltipHead flex-align">
                        <img class="factoryDrawingTooltipImg" src="https://blog.csdn.net/weixin_38031256/article/common/image/factoryDrawingTooltipLocation.png" alt="">
                        ${param.name}库存信息
                    </div>
                    <div class="factoryDrawingTooltipList">
                        ${
                    item.list.map((listItem, listIndex) => `
                                <div class="factoryDrawingTooltipListItem flex">
                                    <div>${listItem.title}</div>
                                    <div class="factoryDrawingTooltipListItemLabel ${listIndex === 0 ? 'fontGlowOrange' : 'fontGlow'}">${listItem.label}</div>
                                </div>
                            `).join('')
                }
                    </div>
                </div>`
            }
        }
    })
})
$.get('../common/image/factoryDrawing.svg', function (svg) {
    echarts.registerMap('factoryDrawing', {svg: svg}); //这里的factoryDrawing必须要和geo里面的map值统一
    let option = {
        visualMap: { // 这块内容对最终效果图没啥作用，但是又必须要要写，不写就不显示，写了也不影响效果图
            left: 'center',
            bottom: '200%',
            min: 5,
            max: 100,
            orient: 'horizontal',
            text: ['', 'Price'],
            realtime: true,
            calculable: true,
            inRange: {
                color: ['#cf0000']
            }
        },
        tooltip: {
            className: 'factoryDrawing',
            triggerOn: 'mousemove' // 只做鼠标悬浮效果
        },
        emphasis: {
            itemStyle: {
                color: 'transparent',
                areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: "rgb(255,120,21,0.3)"},
                    {offset: 0.5, color: "rgba(255,120,21, 0.49)"},
                    {offset: 1, color: "rgba(255,120,21, 0.8)"},
                ]), // 鼠标悬浮对应的块显示橙色
                borderColor: 'rgba(236,106,0, 0.49)',
                borderWidth: 2,
            },
        },
        geo: {
            name: 'factoryDrawing',
            map: 'factoryDrawing',
            roam: false,
            zoom: 1.4, // 缩放
            selectedMode: false,
            regions: data
        }
    };
    myChart.setOption(option);
});

图3：

这篇好文章是转载于：学新通技术网