vue3+echarts地图实现一对多线

实现图例

在这里插入图片描述

首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本

npm install echarts --save 或者
cnpm install echarts --save

现在echarts不给提供地图了，所以需要我们自己去寻找地图json。穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。（但是如果你想去掉南海诸岛，还需要在代码中加入）
穿梭车

regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],

当然如果你不需要去掉可以直接往下看
main.js

import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts

页面显示完整代码