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:{
                            formatter:'{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({
        你的逻辑

});