VUE项目使用ECharts省份地图,直接在内部就能引用,简单粗暴

需求是要在页面中引用一个辽宁省的省份地图,但我翻了下ECharts官网发现并没有具体到中国某个省份的地图,猜测应该是被ECharts官方下架了,然后我就上网搜,发现好多人说node_modules里面下载ECharts的包的时候带了各个中国省份的地图js,翻了一下发现真的有

这样的话那我就直接引用就好啦

先在要用的组件里面引入js

import * as echarts from 'echarts'
import 'echarts/map/js/province/liaoning.js'

然后给DOM绑定一个ref用来渲染地图

 <div ref="chart" style="width: 100%; height: 100%"></div>

下面是用来渲染的js,我写到了一个函数里,在生命周期 mounted 的时候调用一下

// 地图
lnsdtFun () {
   // 初始化Echarts实例
   const chart = echarts.init(this.$refs.chart)

   // 绘制辽宁省地图
   chart.setOption({
     series: [
       {
         type: 'map',
         map: '辽宁', // 辽宁省地图的名称
         label: {
               show: false
             }
       }
     ]
   })
}

看下成果,红框框里的就是啦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九龙长廊_富贵呱呱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值