echarts 常用API action 之 dispatchAction admin 2023-08-30 14:18:02 篇首语:本文由小编为大家整理,主要介绍了echarts 常用API action 之 dispatchAction相关的知识,希望对你有一定的参考价值。 参考技术A echarts中支持的图表行为,通过dispatchAction触发。 特定位置高亮或者显示提示框hideTip 隐藏提示框 dispatchAction( type:"hideTip" ) 更多功能 https://www.cnblogs.com/sminocence/p/11230730.html ECharts常用图表 地图1.图表5 地图 1.1.地图图表的使用方式 百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak 矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据 接下来的实现是通过矢量图的方式来实现的 1.2.矢量地图的实现步骤 步骤1 ECharts 最基本的代码结构 此时 option 是一个空空如也的对象 步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下 步骤3 使用 Ajax 获取 china.json $ . get ( "json/map/china.json" , f unction ( chinaJson ) ) 步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据 echarts.registerMap("chinaMap", chinaJson) $ . get ( "json/map/china.json" , function ( chinaJson ) echarts . registerMap ( "chinaMap" , chinaJson ) ) 步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption type : "map" map : "chinaMap" 注意 : 需要注意的是 , 由于在代码中使用了 Ajax , 所以 , 关于此文件的打开 , 不能以 file 的协议打开 , 应该将其置于 HTTP 的服务之下方可正常展示地图 1.3.地图的常见配置 缩放拖动: roam 名称显示: label 初始缩放比例: zoom 地图中心点: center 1.4.地图的常见效果 显示某个区域 准备安徽省的矢量地图数据 加载安徽省地图的矢量数据 $ . get ( "json/map/anhui.json" , function ( anhuiJson ) ) 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap("anhui", anhuiJson) 配置 geo 的 type:"map" , map:"anhui" 通过 zoom 调整缩放比例 通过 center 调整中心点 < script > var mCharts = echarts . init ( document . querySelector ( "p" )) $ . get ( "json/map/anhui.json" , function ( anhuiJson ) console . log ( anhuiJson ) echarts . registerMap ( "anhui" , anhuiJson ) var option = geo : type : "map" , map : "anhui" , label : show : true , zoom : 1.2 , center : [ 116.507676 , 31.752889 ] ; mCharts . setOption ( option ) ) < /script> 不同城市颜色不同 1.显示基本的中国地图 2.准备好城市空气质量的数据, 并且将数据设置给 series 3.将 series 下的数据和 geo 关联起来 geoIndex: 0 type: "map" 4.结合 visualMap 配合使用 visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过 dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中 var option = geo : type : "map" , map : "chinaMap" , roam : true , label : show : true , series : [ data : airData , geoIndex : 0 , type : "map" ], visualMap : min : 0 , // 最小值 max : 300 , // 最大值 inRange : color : [ "white" , "red" ] // 颜色的范围 , calculable : true // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围) 地图和散点图结合 1.给 series 这个数组下增加新的对象 2.准备好散点数据,设置给新对象的 data 3.配置新对象的 type type:effectScatter 让散点图使用地图坐标系统 coordinateSystem: "geo" 让涟漪的效果更加明显 rippleEffect: scale: 10 1.5.地图的特点 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异 下一篇:ECharts常用图表 雷达图 往期文章: 数据可视化你了解多少?ECharts的基本使用ECharts常用图表 折线图ECharts常用图表 散点图黑马前端专栏干货多多,关注再学,好方便~ 2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~ 以上是关于echarts 常用API action 之 dispatchAction的主要内容,如果未能解决你的问题,请参考以下文章 js怎样获取字符ASCII码? mysql中如何查看最大连接数max 您可能还会对下面的文章感兴趣: 相关文章 浏览器打不开网址提示“ERR_CONNECTION_TIMED_OUT”错误代码的解决方法 如何安装ocx控件 VMware的虚拟机为啥ip地址老是自动变化 vbyone和EDP区别 linux/debian到底怎么重启和关机 苹果平板键盘被弄到上方去了,如何调回正常? 机器学习常用距离度量 如何查看kindle型号