顯示效果：左邊呼叫百度地圖API，右邊顯示折線圖。使用者點選地圖上的點，右邊折線圖響應點選事件展示不同的折線變化。具體展示效果如圖所示：

 <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"));

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({
        你的邏輯

});