echart实现地图定时切换、分散和多图级联联动 详解

1.摘要

最近，该项目遇到了一个与统计相关的需求。一个页面大概有四个以上的图形统计，比如百度地图、饼图、直方图、折线图。百度地图显示了全国各地所有店面的大致位置。目前暂定每个省一个店面，地图上显示分散的景点。如默认显示郑州散点闪烁，其他图形显示郑州相关数据；5秒后切换到下一个区域点，其他图表数据也会相应变化。先上图，需要的话再往下。

2.介绍电子艺术和地图相关的json

Escharts3不再被迫使用AMD按需引入，AMD加载器也不再内置于代码中。所以介绍的方法就简单多了，只需要像普通的JavaScript库一样用脚本标签来介绍即可。

！DOCTYPE html html head meta charset=' utf-8 '！-导入ECharts文件-script src=' http : echart/jquery-1 . 11 . 2 . min . js '/script script src=' http 3360 echart/echart . min . js '/script script src=' http : echart/China . js '/。

一页上多个图表的布局有几种形式。

第一种：用定位的方式创建多个div和多个画布。这个方法声明了多个echarts对象，不会过多介绍，除了特殊的个性需求，不推荐。

第二种：一个div，一个画布，一个选项，多个系列，调整图形的x/y来定位图形在界面上显示的位置。本文使用这种方法。

第三种类型：与第二种类型基本相同，最大的区别是每个图标可以有一个标题和多个optioins；也有多个画布，但这是推荐的。网站参考：http://gallery.echartsjs.com/editor.html?

Options=[//第一个图形{backgroundcolor :' # ffffff '，title : { text : ' can-lax 2016-2017年的销售收入'，textstyle : { font size :14 } }，tooltip : {//提示框组件trigger:' axis '，轴指针： {//坐标轴指示器，坐标轴//触发的有效类型： ' shadow默认为直线Bottom3360' 3% '，containlabel: true，show : false//是否显示网格边框，顶部和右侧边框}，工具箱： { feature : { dataview 3360 { show : false，ReadOnly: false}，//数据是否试图在控件中显示//magictype3360 {show3360 true，type: ['stack '，' tiled']}，//restore 3333330 数据：[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月'，' 8月'，' 12月'] }，yAxis: [//双y轴{ name : ' income(10k)'，type:' value '，splitline : {//是否显示： false对应网格线的y轴}显示，轴标签: { formatter 3360