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

完整代码





你可能感兴趣的:(vue3+echarts 多点发射)