echarts 常用API action 之 dispatchAction

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 ( "div" ))         $ . 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常用图表 雷达图

往期文章:


黑马前端专栏干货多多,关注再学,好方便~

2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~

以上是关于echarts 常用API action 之 dispatchAction的主要内容,如果未能解决你的问题,请参考以下文章

spring in action学习笔记一:DI(Dependency Injection)依赖注入之CI(Constructor Injection)构造器注入

37-Vue之ECharts高级-交互API

37-Vue之ECharts高级-交互API

常用元素操作api之常见鼠标操作

常用元素操作api之键盘标操作

ECharts常用图表 地图