Echarts实现地图点击与折线图联动

　　显示效果：左边调用百度地图API，右边显示折线图。用户点击地图上的点，右边折线图响应点击事件展示不同的折线变化。具体展示效果如图所示：



　　第一步首先要进行界面初始化，引入Echarts的JS文件并初始化两个DOM

<div id="container" style="width:700px;height:600px;float:left"></div>
<div id="container2" style="width:850px;height: 600px;float:left"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
<script type="text/javascript" src="js/bmap.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var myChart2 = echarts.init(document.getElementById("container2"));

　　第二步是进行坐标点投影，可以参考Echarts在线模板：http://echarts.baidu.com/demo.html#effectScatter-bmap 核心代码为

var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};

　　第三步初始化右侧折线图，具体参数设置可以参考Echarts的API文档http://echarts.baidu.com/option.html#title（3.0版本）http://echarts.baidu.com/echarts2/doc/doc.html（2.0版本），讲道理2.0版本的文档看起来更舒服一些，通过在option里设置参数实现初始化，这里我实现的是一个含有markline（标注线）的折线图，其实可以更精简，核心代码如下

myChart2.setOption({
title: {
text: "水质监测指标变化图",
x: "center",
textStyle: {
fontSize: 18,
fontStyle: "normal",
fontWeight: "bold"
},
subtext: ""
},
grid:{
width:650
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"],
name: "年份（年）",
nameLocation: "end"
}
],
yAxis: [
{
type: "value",
name: "浓度比（mg/L）",
nameLocation: "end"
}
],
legend: {
data: ["溶解氧", "COD(Mn)", "BOD5", "氨氮"],
x: "center",
y: "bottom",
itemGap: 20,
itemWidth: 28,
itemHeight: 18,
textStyle: {
color: 'black',
fontsize:14
}
},
series: [
{
type: "line",
name: "溶解氧",
markLine: {
symbol:'circle',
label:{
normal:{
formatter:'{b}',
textStyle:{
fontFamily:'Verdana',
fontSize:12
}
}
},
itemStyle:{
normal:{
lineStyle:{
width:2
}
}
},
data: [
{
name:' 溶解氧 标准值>=5',
yAxis: 5
}
]
}
},
{
type: "line",
name: "COD(Mn)",
markLine: {
symbol:'circle',
label:{
normal:{
formatter:'{b}',
textStyle:{
fontFamily:'Verdana',
fontSize:12
}
}
},
itemStyle:{
normal:{
lineStyle:{
width:2
}
}
},
data: [
{
name:' COD(Mn) 标准值<=6',
yAxis: 6
}
]
}
},
{
type: "line",
name: "BOD5",
markLine: {
symbol:'circle',
label:{
normal:{
f
afb4
ormatter:'{b}',
textStyle:{
fontFamily:'Verdana',
fontSize:12
}
}
},
itemStyle:{
normal:{
lineStyle:{
width:2
}
}
},
data: [
{
name:' BOD5 标准值<=4',
yAxis: 4
}
]
}
},
{
type: "line",
name: "氨氮",
markLine: {
symbol:'circle',
label:{
normal:{
formatter:'{b}',
textStyle:{
fontFamily:'Verdana',
fontSize:12
}
}
},
itemStyle:{
normal:{
lineStyle:{
width:2
}
}
},
data: [
{
name:' 氨氮 标准值<=1',
yAxis: 1
}
]
}
}
]
});

　　第四步是最关键的一步，需要实现点击事件的响应，当myChart被点击时，myCharts进行setOption刷新图表，代码如下

myChart.on('click', function (params) {
if(params.data.name=='双河口'){
myChart2.setOption({
你的逻辑

});