使用echarts绘制中国地图与航班线路图

本文介绍了如何在Vue项目中安装并使用ECharts库,包括引入地图数据、设置地图样式以及添加路线数据,以实现中国地图的动态展示和线路的可视化效果。

在vue项目中实现:

1.安装echarts

npm i echarts

 2.使用echarts,这里需要中国地图的json数据,可以自行查找(或者私我)。

// echarts5版本,引入echarts的方式发生了改变,要使用以下方式引入

import * as echart from "echarts"

import {ref,onMounted} from "vue"

// 引入中国地图的json数据

import CHINA from "./assets/china.json";

let container=ref()

onMounted(() => {

  let myChart = echarts.init(container.value);

   // 注册地图

  echarts.registerMap("china", CHINA as any);

  myChart.setOption({

    geo: [

      {

        show: true,

        map: "china",

        roam: true,

        label: {

          show:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值