更新记录
1.2.2(2022-05-17) 下载此版本
优化处理事件
1.2.1(2022-05-17) 下载此版本
优化Canvas渲染
1.2.0(2022-05-17) 下载此版本
更新地图下窜功能
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.18 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | × | √ | √ | √ | √ | √ | √ | √ |
ShaohuaEchartMap 地图下钻,Echarts地图数据渲染,兼容全端
- 地图下钻
- 基于echart,如果包比较大,可去Echarts官网定制,或者使用分包。
- 重写canvas对象
- 渲染优化
- 全端兼容
组件名:shaohua-echartsmap 代码块:
<shaohua-echartsmap>
组件使用
<shaohua-echartsmap
rheight="400"
:datas="datas" // 配置
:mapName='typname' // 地图名称
:mapJson="typjson" // Geojson数据
ref="charts"
mapid="shaohuaEchartsmap" // 配置id
:loading="loading"
></shaohua-echartsmap>
数据更新
updataList(){
let hebei =[
{
name:'廊坊市',value:123
},
{
name:'邢台市',value:123
}
]
this.loading=true;
setTimeout(()=>{
// 模拟接口触发
this.datas=!this.showpopup?all:hebei;
this.loading=false;
// 触发更新
this.$refs.charts.inits()
},300)
}
npm安装
npm install shaohua-echartsmap