Echarts的一些零碎操作知识

1,关于地图的大小控制:

首先需要知道一点Echarts的图表(地图)一般都是根据一个div进行初始化,而这个div的大小基本上就是图表的大小,如果图表有些默认设置小于div的大小则会变成默认设置的大小,而此时如果要控制生成的图表的大小以及图表所在位置(用于构造图表的div中的位置)就需要依赖一个属性:mapLocation这个属性属于series,是一个子属性,其中包括位置以及大小的设置。例如:

 mapLocation:{
              x:'10',
               y:'10',
               width:'80%',
               height:'80%'
             }

上面的操作即可实现将地图显示在要初始化echarts的div的左上角距离上和左个10px的位置而地图大小则为div大小的80%


2,关于折线图或者柱状图等有座标系的图表的大小控制:

还是这个老问题用于初始化图表的div的大小并不一定恰好适合默认设置的图表大小所以我们也需要手动的进行大小位置的调整,关于有座标系的设置比较简单是Option下面的一个属性:grid,grid的子属性有很多关于显示位置(以左上角为基准:x和y,x2和y2为右下角座标),图表的大小(width,height)


3,关于Echart的地图的鼠标滚轮缩放功能:

这个功能还是比较简单的,由于本文的目的就是要做一些记录性的整理,很简单的一个设置:

option下series下的roam他的默认值是false即没有缩放功能,改为true即可


4,关于Echart的动态数据显示的注意事项

这个其实也还是比较简单的,Echart的大部分属性(应该是所有吧)都是可以接受变量值的,所以动态显示数据的操作基本上就是,在构造图表所需要的option的时候对于数据部分的赋值操作让他等于一个变量,而每次动态跟换数据的时候只需要改变变量的值然后将option重新设置即可。

5,动态画点,画线

这里所说的画点画线主要是指在地图上的操作,首先需要说明这些操作基本上都是需要依赖这几个属性:画点就是series下的MarkPoint,画线就是MarkLine,需要注意的就是这些所谓的点和线之所以能够在地图上面显示主要还是需要地图上对应的要进行换点和画线的位置区域有座标,这是最关键的,比如说你把中国地图导入了,在画点的时候用markPoint操作,里面一些关于点的样式设置自己看去,重点是data部分在里面放上name和value(name为区域名称value为点在tooltip中显示的值)如果要显示这个name的区域座标必须已经在Echart所初始化的地图中可以找到了。所以会导致你话北京的点能画上但是画你家县城的点就不一定能画上了,所以对于这个问题的解决才是这部分问题的关键所在,首先需要先说明一点:在地图的json或js文件中很可能已经有一些区域的座标信息,但是这个不是绝对的(打开json或js就可以看到)在了解这个之后就需要说一下这个属性:series下的geoCoord,这个属性在Echarts3.0中好像没有找到,但是在2版本中是有明确定义的而且在三中也有只是没有显示的写出了,而这个geoCoord其实就是一个地图上区域的经纬度的一个数据集合,所以,我们也可以将我们获取到的区域座标赋值给他,就可以解决画出json中没有座标的点的要求,还有一个办法也是解决这个问题的,如果你提前知道你所要画点的经纬度则可执行这样的操作,在画点的时候markPoint的data中,不仅仅传递name,valu的值还要加上一个属性就是geoCoord对应的跟的值就是座标值。下面举例:

data:[{name:'北京',value:'20',geoCoord:[北京的经纬度]}]


6,图表的自定义显示操作(按照自己的需求去显示数据)

这个呢也比较简单,总之就是一句话,查文档然后利用对应所要设置的组件的回调函数formatter进行设置,很简单

7,关于Echart的一些事件以及动作

还是查看文档,文档能够解决你百分之90的问题,其次要说的一点就是,var  mychar = Echarts.init(document.getElementById('对应dom节点id'));  进行Echarts的初始化这个操作其实就是把mychar变成一个具备Echarts各种属性操作的一个对象了,所以对于事件和动作基本上就是对他的操作:

mychar.on('事件类型',function(){}); 这里的事件类型有点击和双击很多的还是看官网,对应位置在文档里的API的event

而动作什么的就是对应的action,添加方法类似:

mychar.dispatchAction({

type:'' //这里的type设置对应动作的类型即可

//下面在进行相关动作属性的设置,不同的动作属性不同按照需求查文档

});

这样这个Echart就会拥有对应的动作

8,多个Echarts图表的联动

// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);




总之:还是一句话,多看官网上的文档配置项手册,但是,切记注意Echart的版本问题,今天博主就遇到一个坑,拿着Echart3.0的文档调2.2.7的图,结果当然是一整天无功而返,最后才顿悟(在调试的时候千万不要被自己的浏览器缓存给坑了)

发布了36 篇原创文章 · 获赞 13 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章