echarts的学习 - 爱码网

博客1.：https://zrysmt.github.io/

博客2:http://blog.csdn.net/future_todo/article/details/60956942

工作中一个需求echarts2升级到echarts3

1.https://www.zhihu.com/question/41001947

echart3还有有点不兼容2的地方，不太多。改进不说了，2.x代码不能用的地方，我碰到有这几个：拖动重算没有了，geo标签定位修正没有了，百度地图的调用方法彻底换了。
还有几个想不起来的，应该都是小问题，以后想到再来补充。

2.http://superzdev.com/2016/01/26/echarts-please-readme/

3. echarts2中如果echarts-all.js 这个如果引入的话，不不需要通过网络去请求其他的包了

<!-- ECharts单文件引入 -->
 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

4.零点echarts的代码保留

var data = [
     {name: \'安徽\', value: [20100,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'北京\', value: [20200,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'重庆\', value: [20300,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'福建\', value: [20400,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'甘肃\', value: [20500,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'广东\', value: [20600,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'广西\', value: [20700,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'贵州\', value: [20800,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'海南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'河北\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'河南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'黑龙江\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'湖北\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'湖南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'吉林\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'江苏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'江西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'辽宁\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'内蒙古\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'宁夏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'青海\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'山东\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'山西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'陕西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'上海\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'四川\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'天津\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'西藏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'新疆\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'云南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'浙江\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'香港\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'澳门\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'台湾\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']}
];


var geoCoordMap = {
    \'安徽\':[117.17,31.52],
    \'北京\':[116.24,39.55],
    \'重庆\':[106.54,29.59],
    \'福建\':[119.30,26.08],
    \'甘肃\':[103.51,36.04],
    \'广东\':[113.14,23.08],
    \'广西\':[108.19,22.48],
    \'贵州\':[106.42,26.35],
    \'海南\':[110.20,20.02],
    \'河北\':[114.30,38.02],
    \'河南\':[113.40,34.46],
    \'黑龙江\':[126.36,45.44],
    \'湖北\':[114.17,30.35],
    \'湖南\':[112.59,28.12],
    \'吉林\':[125.19,43.54],
    \'江苏\':[118.46,32.03],
    \'江西\':[115.55,28.40],
    \'辽宁\':[123.25,41.48],
    \'内蒙古\':[111.41,40.48],
    \'宁夏\':[106.16,38.27],
    \'青海\':[101.483,6.38],
    \'山东\':[117.00,36.40],
    \'山西\':[112.33,37.54],
    \'陕西\':[108.57,34.17],
    \'上海\':[121.29,31.14],
    \'四川\':[104.04,30.40],
    \'天津\':[117.12,39.02],
    \'西藏\':[91.08,29.39],
    \'新疆\':[87.36,43.45],
    \'云南\':[102.42,25.04],
    \'浙江\':[120.103,0.16],
    \'香港\':[115.12,21.23],
    \'澳门\':[115.07,21.33],
    \'台湾\':[121.30,25.03]
}

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;
};

option = {
    backgroundColor: \'#404a59\',
    title: {
        text: \'全国主要城市空气质量\',
        subtext: \'data from PM25.in\',
        sublink: \'http://www.pm25.in\',
        left: \'center\',
        textStyle: {
            color: \'#fff\'
        }
    },
    tooltip : {
        trigger: \'item\',
        formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+\'<br/>当月<br/>销量：\'+params.data.value[2]+\'<br/>同比：\'+params.data.value[3]+\'<br/>市场份额：\'+params.data.value[4]+\'<br/><br/>累计<br/>\'+\'销量：\'+params.data.value[5]+\'<br/>同比：\'+params.data.value[6]+\'<br/>市场份额：\'+params.data.value[7]
        }
    },
    legend: {
        orient: \'vertical\',
        y: \'bottom\',
        x:\'right\',
        data:[\'pm2.5\'],
        textStyle: {
            color: \'#fff\'
        }
    },
    geo: {
        map: \'china\',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: \'#323c48\',
                borderColor: \'#111\'
            },
            emphasis: {
                areaColor: \'#2a333d\'
            }
        }
    },
    series : [
        {
            name: \'pm2.5\',
            type: \'scatter\',
            coordinateSystem: \'geo\',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            label: {
                normal: {
                    formatter: \'{b}\',
                    position: \'right\',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: \'#ddb926\'
                }
            }
        },
        {
            name: \'Top 5\',
            type: \'effectScatter\',
            coordinateSystem: \'geo\',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            showEffectOn: \'render\',
            rippleEffect: {
                brushType: \'stroke\'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: \'{b}\',
                    position: \'right\',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: \'#f4e925\',
                    shadowBlur: 10,
                    shadowColor: \'#333\'
                }
            },
            zlevel: 1
        }
    ]
};

5.怎么设置label 的显示内容。　　

formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+\'<br/>当月<br/>销量：\'+params.data.value[2]+\'<br/>同比：\'+params.data.value[3]+\'<br/>市场份额：\'+params.data.value[4]+\'<br/><br/>累计<br/>\'+\'销量：\'+params.data.value[5]+\'<br/>同比：\'+params.data.value[6]+\'<br/>市场份额：\'+params.data.value[7]
        }

6. http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl

var data = [
     {name: \'太原市\', value: [20100,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'大同市\', value: [20200,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'阳泉市\', value: [20300,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'长治市\', value: [20400,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'晋城市\', value: [20500,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'晋中市\', value: [20600,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'运城市\', value: [20700,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'忻州市\', value: [20800,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'临汾市\', value: [20900,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'吕梁市\', value: [21000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']}
]
var geoCoordMap = {
    \'太原市\':[112.55,37.87],
    \'大同市\':[113.30,40.08],
    \'阳泉市\':[113.57,37.85],
    \'长治市\':[113.12,36.20],
    \'晋城市\':[112.83,35.50],
    \'晋中市\':[112.75,37.68],
    \'运城市\':[110.98,35.02],
    \'忻州市\':[112.73,38.42],
    \'临汾市\':[111.52,36.08],
    \'吕梁市\':[111.13,37.52]
}

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;
};

app.title = \'34 省切换查看\';

var provinces = [\'shanghai\', \'hebei\',\'shanxi\',\'neimenggu\',\'liaoning\',\'jilin\',\'heilongjiang\',\'jiangsu\',\'zhejiang\',\'anhui\',\'fujian\',\'jiangxi\',\'shandong\',\'henan\',\'hubei\',\'hunan\',\'guangdong\',\'guangxi\',\'hainan\',\'sichuan\',\'guizhou\',\'yunnan\',\'xizang\',\'shanxi1\',\'gansu\',\'qinghai\',\'ningxia\',\'xinjiang\', \'beijing\', \'tianjin\', \'chongqing\', \'xianggang\', \'aomen\'];
var provincesText = [\'上海\', \'河北\', \'山西\', \'内蒙古\', \'辽宁\', \'吉林\',\'黑龙江\',  \'江苏\', \'浙江\', \'安徽\', \'福建\', \'江西\', \'山东\',\'河南\', \'湖北\', \'湖南\', \'广东\', \'广西\', \'海南\', \'四川\', \'贵州\', \'云南\', \'西藏\', \'陕西\', \'甘肃\', \'青海\', \'宁夏\', \'新疆\', \'北京\', \'天津\', \'重庆\', \'香港\', \'澳门\'];

function showProvince() {
    var name = provinces[currentIdx];

    // myChart.showLoading();

    $.get(\'vendors/echarts/map/json/province/\' + name + \'.json\', function (geoJson) {

        // myChart.hideLoading();

        echarts.registerMap(name, geoJson);

        myChart.setOption(option = {
            backgroundColor: \'#404a59\',
            title: {
                text: provincesText[currentIdx],
                left: \'center\',
                textStyle: {
                    color: \'#fff\'
                }
            },
            series: [
                {
                    type: \'map\',
                    mapType: name,
                    label: {
                        emphasis: {
                            textStyle: {
                                color: \'#fff\'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: \'#389BB7\',
                            areaColor: \'#fff\',
                        },
                        emphasis: {
                            areaColor: \'#389BB7\',
                            borderWidth: 0
                        }
                    },
                    animation: false
                    // animationDurationUpdate: 1000,
                    // animationEasingUpdate: \'quinticInOut\'
                }
            ]
        });
    });
}
var currentIdx = 0;
option = {
    backgroundColor: \'#404a59\',
    title: {
        text: \'全国主要城市空气质量\',
        subtext: \'data from PM25.in\',
        sublink: \'http://www.pm25.in\',
        left: \'center\',
        textStyle: {
            color: \'#fff\'
        }
    },
    tooltip : {
        trigger: \'item\',
        formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+\'<br/>当月<br/>销量：\'+params.data.value[2]+\'<br/>同比：\'+params.data.value[3]+\'<br/>市场份额：\'+params.data.value[4]+\'<br/><br/>累计<br/>\'+\'销量：\'+params.data.value[5]+\'<br/>同比：\'+params.data.value[6]+\'<br/>市场份额：\'+params.data.value[7]
        }
    },
    legend: {
        orient: \'vertical\',
        y: \'bottom\',
        x:\'right\',
        data:[\'pm2.5\'],
        textStyle: {
            color: \'#fff\'
        }
    },
    geo: {
        map: \'china\',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: \'#323c48\',
                borderColor: \'#111\'
            },
            emphasis: {
                areaColor: \'#2a333d\'
            }
        }
    },
    graphic: [{
        id: \'left-btn\',
        left: 10,
        top: \'middle\',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: \'#323c48\',
                borderColor: \'#111\'
            },
            emphasis: {
                areaColor: \'#2a333d\'
            }
        }
    }, {
        id: \'right-btn\',
        type: \'circle\',
        shape: { r: 20 },
        style: {
            text: \'>\',
            fill: \'#eee\'
        },
        top: \'middle\',
        right: 10,
        onclick: function () {
            currentIdx = (currentIdx + 1) % provinces.length;
            showProvince();
        }
    }],
    series : [
        {
            name: \'pm2.5\',
            type: \'scatter\',
            coordinateSystem: \'geo\',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            label: {
                normal: {
                    formatter: \'{b}\',
                    position: \'right\',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: \'#ddb926\'
                }
            }
        },
        {
            name: \'Top 5\',
            type: \'effectScatter\',
            coordinateSystem: \'geo\',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            showEffectOn: \'render\',
            rippleEffect: {
                brushType: \'stroke\'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: \'{b}\',
                    position: \'right\',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: \'#f4e925\',
                    shadowBlur: 10,
                    shadowColor: \'#333\'
                }
            },
            zlevel: 1
        }
    ]
};
showProvince();

9.http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl

var provinces = {
    \'上海\': \'/asset/get/s/data-1482909900836-H1BC_1WHg.json\',
    \'河北\': \'/asset/get/s/data-1482909799572-Hkgu_yWSg.json\',
    \'山西\': \'/asset/get/s/data-1482909909703-SyCA_JbSg.json\',
    \'内蒙古\': \'/asset/get/s/data-1482909841923-rkqqdyZSe.json\',
    \'辽宁\': \'/asset/get/s/data-1482909836074-rJV9O1-Hg.json\',
    \'吉林\': \'/asset/get/s/data-1482909832739-rJ-cdy-Hx.json\',
    \'黑龙江\': \'/asset/get/s/data-1482909803892-Hy4__J-Sx.json\',
    \'江苏\': \'/asset/get/s/data-1482909823260-HkDtOJZBx.json\',
    \'浙江\': \'/asset/get/s/data-1482909960637-rkZMYkZBx.json\',
    \'安徽\': \'/asset/get/s/data-1482909768458-HJlU_yWBe.json\',
    \'福建\': \'/asset/get/s/data-1478782908884-B1H6yezWe.json\',
    \'江西\': \'/asset/get/s/data-1482909827542-r12YOJWHe.json\',
    \'山东\': \'/asset/get/s/data-1482909892121-BJ3auk-Se.json\',
    \'河南\': \'/asset/get/s/data-1482909807135-SJPudkWre.json\',
    \'湖北\': \'/asset/get/s/data-1482909813213-Hy6u_kbrl.json\',
    \'湖南\': \'/asset/get/s/data-1482909818685-H17FOkZSl.json\',
    \'广东\': \'/asset/get/s/data-1482909784051-BJgwuy-Sl.json\',
    \'广西\': \'/asset/get/s/data-1482909787648-SyEPuJbSg.json\',
    \'海南\': \'/asset/get/s/data-1482909796480-H12P_J-Bg.json\',
    \'四川\': \'/asset/get/s/data-1482909931094-H17eKk-rg.json\',
    \'贵州\': \'/asset/get/s/data-1482909791334-Bkwvd1bBe.json\',
    \'云南\': \'/asset/get/s/data-1482909957601-HkA-FyWSx.json\',
    \'西藏\': \'/asset/get/s/data-1482927407942-SkOV6Qbrl.json\',
    \'陕西\': \'/asset/get/s/data-1482909909703-SyCA_JbSg.json\',
    \'甘肃\': \'/asset/get/s/data-1482909780863-r1aIdyWHl.json\',
    \'青海\': \'/asset/get/s/data-1482909853618-B1IiOyZSl.json\',
    \'宁夏\': \'/asset/get/s/data-1482909848690-HJWiuy-Bg.json\',
    \'新疆\': \'/asset/get/s/data-1482909952731-B1YZKkbBx.json\',
    \'北京\': \'/asset/get/s/data-1482818963027-Hko9SKJrg.json\',
    \'天津\': \'/asset/get/s/data-1482909944620-r1-WKyWHg.json\',
    \'重庆\': \'/asset/get/s/data-1482909775470-HJDIdk-Se.json\',
    \'香港\': \'/asset/get/s/data-1461584707906-r1hSmtsx.json\',
    \'澳门\': \'/asset/get/s/data-1482909771696-ByVIdJWBx.json\'
};

var data1 = [
     {name: \'安徽\', value: [20100,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'北京\', value: [20200,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'重庆\', value: [20300,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'福建\', value: [20400,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'甘肃\', value: [20500,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'广东\', value: [20600,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'广西\', value: [20700,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'贵州\', value: [20800,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'海南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'河北\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'河南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'黑龙江\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'湖北\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'湖南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'吉林\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'江苏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'江西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'辽宁\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'内蒙古\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'宁夏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'青海\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'山东\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'山西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'陕西\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'上海\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'四川\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'天津\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'西藏\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'新疆\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'云南\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'浙江\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'香港\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'澳门\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'台湾\', value: [20000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']}
];
option = {
    tooltip: {
        //trigger: \'item\'
        trigger: \'item\',
        formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+\'<br/>当月<br/>销量：\'+params.data.value[2]+\'<br/>同比：\'+params.data.value[3]+\'<br/>市场份额：\'+params.data.value[4]+\'<br/><br/>累计<br/>\'+\'销量：\'+params.data.value[5]+\'<br/>同比：\'+params.data.value[6]+\'<br/>市场份额：\'+params.data.value[7]
        }
    },
    toolbox: {
        show: true,
        orient: \'vertical\',
        x: \'right\',
        y: \'center\',
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            }
        }
    },
    series: [{
        name: \'选择器\',
        type: \'map\',
        mapType: \'china\',
        left: \'left\',
        top: \'25%\',
        width: \'50%\',
        height:\'50%\',
        roam: true,
        selectedMode: \'single\',
        showLegendSymbol:false,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: data1
    }],
    animation: false
};

myChart.setOption(option, true);

var data2 = [
     {name: \'太原市\', value: [20100,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'大同市\', value: [20200,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'阳泉市\', value: [20300,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'长治市\', value: [20400,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'晋城市\', value: [20500,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'晋中市\', value: [20600,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'运城市\', value: [20700,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'忻州市\', value: [20800,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'临汾市\', value: [20900,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']},
     {name: \'吕梁市\', value: [21000,\'+13%\',\'21%\',20000,\'+13%\',\'21%\']}
]
/*var geoCoordMap = {
    \'太原市\':[112.55,37.87],
    \'大同市\':[113.30,40.08],
    \'阳泉市\':[113.57,37.85],
    \'长治市\':[113.12,36.20],
    \'晋城市\':[112.83,35.50],
    \'晋中市\':[112.75,37.68],
    \'运城市\':[110.98,35.02],
    \'忻州市\':[112.73,38.42],
    \'临汾市\':[111.52,36.08],
    \'吕梁市\':[111.13,37.52]
}*/
var data3 = [{
    name: \'重庆市\'
}, {
    name: \'北京市\'
}, {
    name: \'天津市\'
}, {
    name: \'上海市\'
}, {
    name: \'香港\'
}, {
    name: \'澳门\'
}, {
    name: \'巴音郭楞蒙古自治州\'
}, {
    name: \'和田地区\'
}, {
    name: \'哈密地区\'
}, {
    name: \'阿克苏地区\'
}, {
    name: \'阿勒泰地区\'
}, {
    name: \'喀什地区\'
}, {
    name: \'塔城地区\'
}, {
    name: \'昌吉回族自治州\'
}, {
    name: \'克孜勒苏柯尔克孜自治州\'
}, {
    name: \'吐鲁番地区\'
}, {
    name: \'伊犁哈萨克自治州\'
}, {
    name: \'博尔塔拉蒙古自治州\'
}, {
    name: \'乌鲁木齐市\'
}, {
    name: \'克拉玛依市\'
}, {
    name: \'阿拉尔市\'
}, {
    name: \'图木舒克市\'
}, {
    name: \'五家渠市\'
}, {
    name: \'石河子市\'
}, {
    name: \'那曲地区\'
}, {
    name: \'阿里地区\'
}, {
    name: \'日喀则地区\'
}, {
    name: \'林芝地区\'
}, {
    name: \'昌都地区\'
}, {
    name: \'山南地区\'
}, {
    name: \'拉萨市\'
}, {
    name: \'呼伦贝尔市\'
}, {
    name: \'阿拉善盟\'
}, {
    name: \'锡林郭勒盟\'
}, {
    name: \'鄂尔多斯市\'
}, {
    name: \'赤峰市\'
}, {
    name: \'巴彦淖尔市\'
}, {
    name: \'通辽市\'
}, {
    name: \'乌兰察布市\'
}, {
    name: \'兴安盟\'
}, {
    name: \'包头市\'
}, {
    name: \'呼和浩特市\'
}, {
    name: \'乌海市\'
}, {
    name: \'海西蒙古族藏族自治州\'
}, {
    name: \'玉树藏族自治州\'
}, {
    name: \'果洛藏族自治州\'
}, {
    name: \'海南藏族自治州\'
}, {
    name: \'海北藏族自治州\'
}, {
    name: \'黄南藏族自治州\'
}, {
    name: \'海东地区\'
}, {
    name: \'西宁市\'
}, {
    name: \'甘孜藏族自治州\'
}, {
    name: \'阿坝藏族羌族自治州\'
}, {
    name: \'凉山彝族自治州\'
}, {
    name: \'绵阳市\'
}, {
    name: \'达州市\'
}, {
    name: \'广元市\'
}, {
    name: \'雅安市\'
}, {
    name: \'宜宾市\'
}, {
    name: \'乐山市\'
}, {
    name: \'南充市\'
}, {
    name: \'巴中市\'
}, {
    name: \'泸州市\'
}, {
    name: \'成都市\'
}, {
    name: \'资阳市\'
}, {
    name: \'攀枝花市\'
}, {
    name: \'眉山市\'
}, {
    name: \'广安市\'
}, {
    name: \'德阳市\'
}, {
    name: \'内江市\'
}, {
    name: \'遂宁市\'
}, {
    name: \'自贡市\'
}, {
    name: \'黑河市\'
}, {
    name: \'大兴安岭地区\'
}, {
    name: \'哈尔滨市\'
}, {
    name: \'齐齐哈尔市\'
}, {
    name: \'牡丹江市\'
}, {
    name: \'绥化市\'
}, {
    name: \'伊春市\'
}, {
    name: \'佳木斯市\'
}, {
    name: \'鸡西市\'
}, {
    name: \'双鸭山市\'
}, {
    name: \'大庆市\'
}, {
    name: \'鹤岗市\'
}, {
    name: \'七台河市\'
}, {
    name: \'酒泉市\'
}, {
    name: \'张掖市\'
}, {
    name: \'甘南藏族自治州\'
}, {
    name: \'武威市\'
}, {
    name: \'陇南市\'
}, {
    name: \'庆阳市\'
}, {
    name: \'白银市\'
}, {
    name: \'定西市\'
}, {
    name: \'天水市\'
}, {
    name: \'兰州市\'
}, {
    name: \'平凉市\'
}, {
    name: \'临夏回族自治州\'
}, {
    name: \'金昌市\'
}, {
    name: \'嘉峪关市\'
}, {
    name: \'普洱市\'
}, {
    name: \'红河哈尼族彝族自治州\'
}, {
    name: \'文山壮族苗族自治州\'
}, {
    name: \'曲靖市\'
}, {
    name: \'楚雄彝族自治州\'
}, {
    name: \'大理白族自治州\'
}, {
    name: \'临沧市\'
}, {
    name: \'迪庆藏族自治州\'
}, {
    name: \'昭通市\'
}, {
    name: \'昆明市\'
}, {
    name: \'丽江市\'
}, {
    name: \'西双版纳傣族自治州\'
}, {
    name: \'保山市\'
}, {
    name: \'玉溪市\'
}, {
    name: \'怒江傈僳族自治州\'
}, {
    name: \'德宏傣族景颇族自治州\'
}, {
    name: \'百色市\'
}, {
    name: \'河池市\'
}, {
    name: \'桂林市\'
}, {
    name: \'南宁市\'
}, {
    name: \'柳州市\'
}, {
    name: \'崇左市\'
}, {
    name: \'来宾市\'
}, {
    name: \'玉林市\'
}, {
    name: \'梧州市\'
}, {
    name: \'贺州市\'
}, {
    name: \'钦州市\'
}, {
    name: \'贵港市\'
}, {
    name: \'防城港市\'
}, {
    name: \'北海市\'
}, {
    name: \'怀化市\'
}, {
    name: \'永州市\'
}, {
    name: \'邵阳市\'
}, {
    name: \'郴州市\'
}, {
    name: \'常德市\'
}, {
    name: \'湘西土家族苗族自治州\'
}, {
    name: \'衡阳市\'
}, {
    name: \'岳阳市\'
}, {
    name: \'益阳市\'
}, {
    name: \'长沙市\'
}, {
    name: \'株洲市\'
}, {
    name: \'张家界市\'
}, {
    name: \'娄底市\'
}, {
    name: \'湘潭市\'
}, {
    name: \'榆林市\'
}, {
    name: \'延安市\'
}, {
    name: \'汉中市\'
}, {
    name: \'安康市\'
}, {
    name: \'商洛市\'
}, {
    name: \'宝鸡市\'
}, {
    name: \'渭南市\'
}, {
    name: \'咸阳市\'
}, {
    name: \'西安市\'
}, {
    name: \'铜川市\'
}, {
    name: \'清远市\'
}, {
    name: \'韶关市\'
}, {
    name: \'湛江市\'
}, {
    name: \'梅州市\'
}, {
    name: \'河源市\'
}, {
    name: \'肇庆市\'
}, {
    name: \'惠州市\'
}, {
    name: \'茂名市\'
}, {
    name: \'江门市\'
}, {
    name: \'阳江市\'
}, {
    name: \'云浮市\'
}, {
    name: \'广州市\'
}, {
    name: \'汕尾市\'
}, {
    name: \'揭阳市\'
}, {
    name: \'珠海市\'
}, {
    name: \'佛山市\'
}, {
    name: \'潮州市\'
}, {
    name: \'汕头市\'
}, {
    name: \'深圳市\'
}, {
    name: \'东莞市\'
}, {
    name: \'中山市\'
}, {
    name: \'延边朝鲜族自治州\'
}, {
    name: \'吉林市\'
}, {
    name: \'白城市\'
}, {
    name: \'松原市\'
}, {
    name: \'长春市\'
}, {
    name: \'白山市\'
}, {
    name: \'通化市\'
}, {
    name: \'四平市\'
}, {
    name: \'辽源市\'
}, {
    name: \'承德市\'
}, {
    name: \'张家口市\'
}, {
    name: \'保定市\'
}, {
    name: \'唐山市\'
}, {
    name: \'沧州市\'
}, {
    name: \'石家庄市\'
}, {
    name: \'邢台市\'
}, {
    name: \'邯郸市\'
}, {
    name: \'秦皇岛市\'
}, {
    name: \'衡水市\'
}, {
    name: \'廊坊市\'
}, {
    name: \'恩施土家族苗族自治州\'
}, {
    name: \'十堰市\'
}, {
    name: \'宜昌市\'
}, {
    name: \'襄樊市\'
}, {
    name: \'黄冈市\'
}, {
    name: \'荆州市\'
}, {
    name: \'荆门市\'
}, {
    name: \'咸宁市\'
}, {
    name: \'随州市\'
}, {
    name: \'孝感市\'
}, {
    name: \'武汉市\'
}, {
    name: \'黄石市\'
}, {
    name: \'神农架林区\'
}, {
    name: \'天门市\'
}, {
    name: \'仙桃市\'
}, {
    name: \'潜江市\'
}, {
    name: \'鄂州市\'
}, {
    name: \'遵义市\'
}, {
    name: \'黔东南苗族侗族自治州\'
}, {
    name: \'毕节地区\'
}, {
    name: \'黔南布依族苗族自治州\'
}, {
    name: \'铜仁地区\'
}, {
    name: \'黔西南布依族苗族自治州\'
}, {
    name: \'六盘水市\'
}, {
    name: \'安顺市\'
}, {
    name: \'贵阳市\'
}, {
    name: \'烟台市\'
}, {
    name: \'临沂市\'
}, {
    name: \'潍坊市\'
}, {
    name: \'青岛市\'
}, {
    name: \'菏泽市\'
}, {
    name: \'济宁市\'
}, {
    name: \'德州市\'
}, {
    name: \'滨州市\'
}, {
    name: \'聊城市\'
}, {
    name: \'东营市\'
}, {
    name: \'济南市\'
}, {
    name: \'泰安市\'
}, {
    name: \'威海市\'
}, {
    name: \'日照市\'
}, {
    name: \'淄博市\'
}, {
    name: \'枣庄市\'
}, {
    name: \'莱芜市\'
}, {
    name: \'赣州市\'
}, {
    name: \'吉安市\'
}, {
    name: \'上饶市\'
}, {
    name: \'九江市\'
}, {
    name: \'抚州市\'
}, {
    name: \'宜春市\'
}, {
    name: \'南昌市\'
}, {
    name: \'景德镇市\'
}, {
    name: \'萍乡市\'
}, {
    name: \'鹰潭市\'
}, {
    name: \'新余市\'
}, {
    name: \'南阳市\'
}, {
    name: \'信阳市\'
}, {
    name: \'洛阳市\'
}, {
    name: \'驻马店市\'
}, {
    name: \'周口市\'
}, {
    name: \'商丘市\'
}, {
    name: \'三门峡市\'
}, {
    name: \'新乡市\'
}, {
    name: \'平顶山市\'
}, {
    name: \'郑州市\'
}, {
    name: \'安阳市\'
}, {
    name: \'开封市\'
}, {
    name: \'焦作市\'
}, {
    name: \'许昌市\'
}, {
    name: \'濮阳市\'
}, {
    name: \'漯河市\'
}, {
    name: \'鹤壁市\'
}, {
    name: \'大连市\'
}, {
    name: \'朝阳市\'
}, {
    name: \'丹东市\'
}, {
    name: \'铁岭市\'
}, {
    name: \'沈阳市\'
}, {
    name: \'抚顺市\'
}, {
    name: \'葫芦岛市\'
}, {
    name: \'阜新市\'
}, {
    name: \'锦州市\'
}, {
    name: \'鞍山市\'
}, {
    name: \'本溪市\'
}, {
    name: \'营口市\'
}, {
    name: \'辽阳市\'
}, {
    name: \'盘锦市\'
}, {
    name: \'忻州市\'
}, {
    name: \'吕梁市\'
}, {
    name: \'临汾市\'
}, {
    name: \'晋中市\'
}, {
    name: \'运城市\'
}, {
    name: \'大同市\'
}, {
    name: \'长治市\'
}, {
    name: \'朔州市\'
}, {
    name: \'晋城市\'
}, {
    name: \'太原市\'
}, {
    name: \'阳泉市\'
}, {
    name: \'六安市\'
}, {
    name: \'安庆市\'
}, {
    name: \'滁州市\'
}, {
    name: \'宣城市\'
}, {
    name: \'阜阳市\'
}, {
    name: \'宿州市\'
}, {
    name: \'黄山市\'
}, {
    name: \'巢湖市\'
}, {
    name: \'亳州市\'
}, {
    name: \'池州市\'
}, {
    name: \'合肥市\'
}, {
    name: \'蚌埠市\'
}, {
    name: \'芜湖市\'
}, {
    name: \'淮北市\'
}, {
    name: \'淮南市\'
}, {
    name: \'马鞍山市\'
}, {
    name: \'铜陵市\'
}, {
    name: \'南平市\'
}, {
    name: \'三明市\'
}, {
    name: \'龙岩市\'
}, {
    name: \'宁德市\'
}, {
    name: \'福州市\'
}, {
    name: \'漳州市\'
}, {
    name: \'泉州市\'
}, {
    name: \'莆田市\'
}, {
    name: \'厦门市\'
}, {
    name: \'丽水市\'
}, {
    name: \'杭州市\'
}, {
    name: \'温州市\'
}, {
    name: \'宁波市\'
}, {
    name: \'舟山市\'
}, {
    name: \'台州市\'
}, {
    name: \'金华市\'
}, {
    name: \'衢州市\'
}, {
    name: \'绍兴市\'
}, {
    name: \'嘉兴市\'
}, {
    name: \'湖州市\'
}, {
    name: \'盐城市\'
}, {
    name: \'徐州市\'
}, {
    name: \'南通市\'
}, {
    name: \'淮安市\'
}, {
    name: \'苏州市\'
}, {
    name: \'宿迁市\'
}, {
    name: \'连云港市\'
}, {
    name: \'扬州市\'
}, {
    name: \'南京市\'
}, {
    name: \'泰州市\'
}, {
    name: \'无锡市\'
}, {
    name: \'常州市\'
}, {
    name: \'镇江市\'
}, {
    name: \'吴忠市\'
}, {
    name: \'中卫市\'
}, {
    name: \'固原市\'
}, {
    name: \'银川市\'
}, {
    name: \'石嘴山市\'
}, {
    name: \'儋州市\'
}, {
    name: \'文昌市\'
}, {
    name: \'乐东黎族自治县\'
}, {
    name: \'三亚市\'
}, {
    name: \'琼中黎族苗族自治县\'
}, {
    name: \'东方市\'
}, {
    name: \'海口市\'
}, {
    name: \'万宁市\'
}, {
    name: \'澄迈县\'
}, {
    name: \'白沙黎族自治县\'
}, {
    name: \'琼海市\'
}, {
    name: \'昌江黎族自治县\'
}, {
    name: \'临高县\'
}, {
    name: \'陵水黎族自治县\'
}, {
    name: \'屯昌县\'
}, {
    name: \'定安县\'
}, {
    name: \'保亭黎族苗族自治县\'
}, {
    name: \'五指山市\'
}];

/*for (var i = 0; i < data2.length; i++) {
    data2[i].value = Math.round(Math.random() * 1000);
}*/
setTimeout(delay, 1000);

function delay() {
    //myChart.on("mapselectchanged", function (param)
    myChart.on("click", function(param) {
        var selectedProvince = param.name;

        if (!provinces[selectedProvince]) {
            option.series.splice(1);
            option.legend = null;
            option.visualMap = null;
            myChart.setOption(option, true);
            return;
        }
        //$.get(\'http://echarts.baidu.com/gallery/vendors/echarts/map/json/province/\' + provinces[selectedProvince] + \'.json\', function (geoJson) {
        $.get(provinces[selectedProvince], function(geoJson) {
            echarts.registerMap(selectedProvince, geoJson);
            option.series[1] = {
                name: \'选择器\',
                type: \'map\',
                mapType: selectedProvince,
                left: \'50%\',
                top: \'25%\',
                width: \'50%\',
                height:\'50%\',
                roam: true,
                selectedMode: \'single\',
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data: data2
            };
            option.legend = {
                left: \'right\',
                data: [\'随机数据\']
            };
            option.visualMap = {
                seriesIndex: 1,
                orient: \'horizontal\',
                left: \'right\',
                min: 0,
                max: 1000,
                color: [\'orange\', \'yellow\'],
                text: [\'高\', \'低\'], // 文本，默认为数值文本
                splitNumber: 0
            };
            myChart.setOption(option, true);
        });
    });
}

10.

11.显示平均线。

12.饼图有时间必须设置一个width，要不显示不出来。

13. http://blog.csdn.net/she_lover/article/details/51448967

14. http://echarts.baidu.com/demo.html#lines-airline

同一个起点和终点划出不同的线。

app.title = \'65k+ 飞机航线\';

myChart.showLoading();

$.get(\'data/asset/data/flights.json\', function(data) {
    myChart.hideLoading();

    var data = [
        {
            start:[145.3918814,-6.081689],//起点经纬度
            end:[14.1372224,57.292222],//终点经纬度
            num:50//活跃次数
        },
        {
            start:[145.3918814,-6.081689],//起点经纬度
            end:[14.1372224,57.292222],//终点经纬度
            num:50//活跃次数
        },
        {
            start:[145.3918814,-6.081689],//起点经纬度
            end:[14.1372224,57.292222],//终点经纬度
            num:50//活跃次数
        }
       
    ]

    var routes = [
        {
            type: \'lines\',
            coordinateSystem: \'geo\',
            data: [[
                [145.3918814,-60.081689],
                [14.1372224,57.292222]]
            ],
            large: true,
            largeThreshold: 100,
            lineStyle: {
                normal: {
                    opacity: 0.5,
                    width: 3.5,
                    curveness: 0.3
                }
            },
            // 设置混合模式为叠加
            blendMode: \'lighter\'
        }
        ,
        {
            type: \'lines\',
            coordinateSystem: \'geo\',
            data: [[
                [145.3918814,-60.081689],
                [14.1372224,57.292222]]
            ],
            large: true,
            largeThreshold: 100,
            lineStyle: {
                normal: {
                    opacity: 0.5,
                    width: 3.5,
                    curveness: -0.3
                }
            },
            // 设置混合模式为叠加
            blendMode: \'lighter\'
        }

    ]
    

    myChart.setOption(option = {
        title: {
            text: \'World Flights\',
            left: \'center\',
            textStyle: {
                color: \'#eee\'
            }
        },
        backgroundColor: \'#003\',
        tooltip: {
            formatter: function (param) {
              
                return ""
            }
        },
        geo: {
            map: \'world\',
            left: 0,
            right: 0,
            silent: true,
            itemStyle: {
                normal: {
                    borderColor: \'#003\',
                    color: \'#005\'
                }
            }
        },
        series: routes
    });
});

15.http://echarts.baidu.com/demo.html#graph

改变线条的粗细。

原来设置统一的线条粗线，现在每一条线都设置不同的粗线。

graph.links = graph.links.map(function(item){

item.lineStyle= {

normal: {

color: \'source\',

curveness: 0.3,

width:item.weight

}

return item;

})