Echarts百度实例

雷达图


option = {
    title : {
        text: '预算 vs 开销（Budget vs spending）',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'bottom',
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    polar : [
       {
           indicator : [
               { text: '销售（sales）', max: 6000},
               { text: '管理（Administration）', max: 16000},
               { text: '信息技术（Information Techology）', max: 30000},
               { text: '客服（Customer Support）', max: 38000},
               { text: '研发（Development）', max: 52000},
               { text: '市场（Marketing）', max: 25000}
            ]
        }
    ],
    calculable : true,
    series : [
        {
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '预算分配（Allocated Budget）'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        }
    ]
};
                    
和弦图
option = {
    title : {
        text: '测试数据',
        subtext: 'From d3.js',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: function (params) {
            if (params.indicator2) { // is edge
                return params.value.weight;
            } else {// is node
                return params.name
            }
        }
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {show: true, type: ['force', 'chord']},
            saveAsImage : {show: true}
        }
    },
    legend: {
        x: 'left',
        data:['group1','group2', 'group3', 'group4']
    },
    series : [
        {
            type:'chord',
            sort : 'ascending',
            sortSub : 'descending',
            showScale : true,
            showScaleText : true,
            data : [
                {name : 'group1'},
                {name : 'group2'},
                {name : 'group3'},
                {name : 'group4'}
            ],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    }
                }
            },
            matrix : [
                [11975,  5871, 8916, 2868],
                [ 1951, 10048, 2060, 6171],
                [ 8010, 16145, 8090, 8045],
                [ 1013,   990,  940, 6907]
            ]
        }
    ]
};
                    
力导向布局图
option = {
    title : {
        text: '人物关系：乔布斯',
        subtext: '数据来自人立方',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {show: true, type: ['force', 'chord']},
            saveAsImage : {show: true}
        }
    },
    legend: {
        x: 'left',
        data:['家人','朋友']
    },
    series : [
        {
            type:'force',
            name : "人物关系",
            ribbonType: false,
            categories : [
                {
                    name: '人物'
                },
                {
                    name: '家人'
                },
                {
                    name:'朋友'
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        borderColor : 'rgba(255,215,0,0.4)',
                        borderWidth : 1
                    },
                    linkStyle: {
                        type: 'curve'
                    }
                },
                emphasis: {
                    label: {
                        show: false
                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                    },
                    nodeStyle : {
                        //r: 30
                    },
                    linkStyle : {}
                }
            },
            useWorker: false,
            minRadius : 15,
            maxRadius : 25,
            gravity: 1.1,
            scaling: 1.1,
            roam: 'move',
            nodes:[
                {category:0, name: '乔布斯', value : 10, label: '乔布斯\n（主要）'},
                {category:1, name: '丽萨-乔布斯',value : 2},
                {category:1, name: '保罗-乔布斯',value : 3},
                {category:1, name: '克拉拉-乔布斯',value : 3},
                {category:1, name: '劳伦-鲍威尔',value : 7},
                {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
                {category:2, name: '奥巴马',value : 8},
                {category:2, name: '比尔-盖茨',value : 9},
                {category:2, name: '乔纳森-艾夫',value : 4},
                {category:2, name: '蒂姆-库克',value : 4},
                {category:2, name: '龙-韦恩',value : 1},
            ],
            links : [
                {source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
                {source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
                {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
                {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
                {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
                {source : '奥巴马', target : '乔布斯', weight : 1},
                {source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
                {source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
                {source : '蒂姆-库克', target : '乔布斯', weight : 1},
                {source : '龙-韦恩', target : '乔布斯', weight : 1},
                {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
                {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
                {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
                {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
                {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
                {source : '比尔-盖茨', target : '奥巴马', weight : 6},
                {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
                {source : '蒂姆-库克', target : '奥巴马', weight : 1}
            ]
        }
    ]
};
var ecConfig = require('echarts/config');
function focus(param) {
    var data = param.data;
    var links = option.series[0].links;
    var nodes = option.series[0].nodes;
    if (
        data.source !== undefined
        && data.target !== undefined
    ) { //点击的是边
        var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
        var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
        console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
    } else { // 点击的是点
        console.log("选中了" + data.name + '(' + data.value + ')');
    }
}
myChart.on(ecConfig.EVENT.CLICK, focus)


myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
    console.log(myChart.chart.force.getPosition());
});




                    
地图-中国
option = {
    title : {
        text: 'iphone销量',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['iphone3','iphone4','iphone5']
    },
    dataRange: {
        min: 0,
        max: 2500,
        x: 'left',
        y: 'bottom',
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true
    },
    toolbox: {
        show: true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series : [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: Math.round(Math.random()*1000)},
                {name: '河南',value: Math.round(Math.random()*1000)},
                {name: '云南',value: Math.round(Math.random()*1000)},
                {name: '辽宁',value: Math.round(Math.random()*1000)},
                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                {name: '湖南',value: Math.round(Math.random()*1000)},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '山东',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '江苏',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '湖北',value: Math.round(Math.random()*1000)},
                {name: '广西',value: Math.round(Math.random()*1000)},
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '陕西',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '贵州',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '青海',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '海南',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        },
        {
            name: 'iphone4',
            type: 'map',
            mapType: 'china',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: Math.round(Math.random()*1000)},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        },
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
};
       
地图-世界
option = {
    title : {
        text: 'World Population (2010)',
        subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
        sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
        x:'center',
        y:'top'
    },
    tooltip : {
        trigger: 'item',
        formatter : function (params) {
            var value = (params.value + '').split('.');
            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
                    + '.' + value[1];
            return params.seriesName + '<br/>' + params.name + ' : ' + value;
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 0,
        max: 1000000,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: 'World Population (2010)',
            type: 'map',
            mapType: 'world',
            roam: true,
            mapLocation: {
                y : 60
            },
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:[
                {name : 'Afghanistan', value : 28397.812},
                {name : 'Angola', value : 19549.124},
                {name : 'Albania', value : 3150.143},
                {name : 'United Arab Emirates', value : 8441.537},
                {name : 'Argentina', value : 40374.224},
                {name : 'Armenia', value : 2963.496},
                {name : 'French Southern and Antarctic Lands', value : 268.065},
                {name : 'Australia', value : 22404.488},
                {name : 'Austria', value : 8401.924},
                {name : 'Azerbaijan', value : 9094.718},
                {name : 'Burundi', value : 9232.753},
                {name : 'Belgium', value : 10941.288},
                {name : 'Benin', value : 9509.798},
                {name : 'Burkina Faso', value : 15540.284},
                {name : 'Bangladesh', value : 151125.475},
                {name : 'Bulgaria', value : 7389.175},
                {name : 'The Bahamas', value : 66402.316},
                {name : 'Bosnia and Herzegovina', value : 3845.929},
                {name : 'Belarus', value : 9491.07},
                {name : 'Belize', value : 308.595},
                {name : 'Bermuda', value : 64.951},
                {name : 'Bolivia', value : 716.939},
                {name : 'Brazil', value : 195210.154},
                {name : 'Brunei', value : 27.223},
                {name : 'Bhutan', value : 716.939},
                {name : 'Botswana', value : 1969.341},
                {name : 'Central African Republic', value : 4349.921},
                {name : 'Canada', value : 34126.24},
                {name : 'Switzerland', value : 7830.534},
                {name : 'Chile', value : 17150.76},
                {name : 'China', value : 1359821.465},
                {name : 'Ivory Coast', value : 60508.978},
                {name : 'Cameroon', value : 20624.343},
                {name : 'Democratic Republic of the Congo', value : 62191.161},
                {name : 'Republic of the Congo', value : 3573.024},
                {name : 'Colombia', value : 46444.798},
                {name : 'Costa Rica', value : 4669.685},
                {name : 'Cuba', value : 11281.768},
                {name : 'Northern Cyprus', value : 1.468},
                {name : 'Cyprus', value : 1103.685},
                {name : 'Czech Republic', value : 10553.701},
                {name : 'Germany', value : 83017.404},
                {name : 'Djibouti', value : 834.036},
                {name : 'Denmark', value : 5550.959},
                {name : 'Dominican Republic', value : 10016.797},
                {name : 'Algeria', value : 37062.82},
                {name : 'Ecuador', value : 15001.072},
                {name : 'Egypt', value : 78075.705},
                {name : 'Eritrea', value : 5741.159},
                {name : 'Spain', value : 46182.038},
                {name : 'Estonia', value : 1298.533},
                {name : 'Ethiopia', value : 87095.281},
                {name : 'Finland', value : 5367.693},
                {name : 'Fiji', value : 860.559},
                {name : 'Falkland Islands', value : 49.581},
                {name : 'France', value : 63230.866},
                {name : 'Gabon', value : 1556.222},
                {name : 'United Kingdom', value : 62066.35},
                {name : 'Georgia', value : 4388.674},
                {name : 'Ghana', value : 24262.901},
                {name : 'Guinea', value : 10876.033},
                {name : 'Gambia', value : 1680.64},
                {name : 'Guinea Bissau', value : 10876.033},
                {name : 'Equatorial Guinea', value : 696.167},
                {name : 'Greece', value : 11109.999},
                {name : 'Greenland', value : 56.546},
                {name : 'Guatemala', value : 14341.576},
                {name : 'French Guiana', value : 231.169},
                {name : 'Guyana', value : 786.126},
                {name : 'Honduras', value : 7621.204},
                {name : 'Croatia', value : 4338.027},
                {name : 'Haiti', value : 9896.4},
                {name : 'Hungary', value : 10014.633},
                {name : 'Indonesia', value : 240676.485},
                {name : 'India', value : 1205624.648},
                {name : 'Ireland', value : 4467.561},
                {name : 'Iran', value : 240676.485},
                {name : 'Iraq', value : 30962.38},
                {name : 'Iceland', value : 318.042},
                {name : 'Israel', value : 7420.368},
                {name : 'Italy', value : 60508.978},
                {name : 'Jamaica', value : 2741.485},
                {name : 'Jordan', value : 6454.554},
                {name : 'Japan', value : 127352.833},
                {name : 'Kazakhstan', value : 15921.127},
                {name : 'Kenya', value : 40909.194},
                {name : 'Kyrgyzstan', value : 5334.223},
                {name : 'Cambodia', value : 14364.931},
                {name : 'South Korea', value : 51452.352},
                {name : 'Kosovo', value : 97.743},
                {name : 'Kuwait', value : 2991.58},
                {name : 'Laos', value : 6395.713},
                {name : 'Lebanon', value : 4341.092},
                {name : 'Liberia', value : 3957.99},
                {name : 'Libya', value : 6040.612},
                {name : 'Sri Lanka', value : 20758.779},
                {name : 'Lesotho', value : 2008.921},
                {name : 'Lithuania', value : 3068.457},
                {name : 'Luxembourg', value : 507.885},
                {name : 'Latvia', value : 2090.519},
                {name : 'Morocco', value : 31642.36},
                {name : 'Moldova', value : 103.619},
                {name : 'Madagascar', value : 21079.532},
                {name : 'Mexico', value : 117886.404},
                {name : 'Macedonia', value : 507.885},
                {name : 'Mali', value : 13985.961},
                {name : 'Myanmar', value : 51931.231},
                {name : 'Montenegro', value : 620.078},
                {name : 'Mongolia', value : 2712.738},
                {name : 'Mozambique', value : 23967.265},
                {name : 'Mauritania', value : 3609.42},
                {name : 'Malawi', value : 15013.694},
                {name : 'Malaysia', value : 28275.835},
                {name : 'Namibia', value : 2178.967},
                {name : 'New Caledonia', value : 246.379},
                {name : 'Niger', value : 15893.746},
                {name : 'Nigeria', value : 159707.78},
                {name : 'Nicaragua', value : 5822.209},
                {name : 'Netherlands', value : 16615.243},
                {name : 'Norway', value : 4891.251},
                {name : 'Nepal', value : 26846.016},
                {name : 'New Zealand', value : 4368.136},
                {name : 'Oman', value : 2802.768},
                {name : 'Pakistan', value : 173149.306},
                {name : 'Panama', value : 3678.128},
                {name : 'Peru', value : 29262.83},
                {name : 'Philippines', value : 93444.322},
                {name : 'Papua New Guinea', value : 6858.945},
                {name : 'Poland', value : 38198.754},
                {name : 'Puerto Rico', value : 3709.671},
                {name : 'North Korea', value : 1.468},
                {name : 'Portugal', value : 10589.792},
                {name : 'Paraguay', value : 6459.721},
                {name : 'Qatar', value : 1749.713},
                {name : 'Romania', value : 21861.476},
                {name : 'Russia', value : 21861.476},
                {name : 'Rwanda', value : 10836.732},
                {name : 'Western Sahara', value : 514.648},
                {name : 'Saudi Arabia', value : 27258.387},
                {name : 'Sudan', value : 35652.002},
                {name : 'South Sudan', value : 9940.929},
                {name : 'Senegal', value : 12950.564},
                {name : 'Solomon Islands', value : 526.447},
                {name : 'Sierra Leone', value : 5751.976},
                {name : 'El Salvador', value : 6218.195},
                {name : 'Somaliland', value : 9636.173},
                {name : 'Somalia', value : 9636.173},
                {name : 'Republic of Serbia', value : 3573.024},
                {name : 'Suriname', value : 524.96},
                {name : 'Slovakia', value : 5433.437},
                {name : 'Slovenia', value : 2054.232},
                {name : 'Sweden', value : 9382.297},
                {name : 'Swaziland', value : 1193.148},
                {name : 'Syria', value : 7830.534},
                {name : 'Chad', value : 11720.781},
                {name : 'Togo', value : 6306.014},
                {name : 'Thailand', value : 66402.316},
                {name : 'Tajikistan', value : 7627.326},
                {name : 'Turkmenistan', value : 5041.995},
                {name : 'East Timor', value : 10016.797},
                {name : 'Trinidad and Tobago', value : 1328.095},
                {name : 'Tunisia', value : 10631.83},
                {name : 'Turkey', value : 72137.546},
                {name : 'United Republic of Tanzania', value : 44973.33},
                {name : 'Uganda', value : 33987.213},
                {name : 'Ukraine', value : 46050.22},
                {name : 'Uruguay', value : 3371.982},
                {name : 'United States of America', value : 312247.116},
                {name : 'Uzbekistan', value : 27769.27},
                {name : 'Venezuela', value : 236.299},
                {name : 'Vietnam', value : 89047.397},
                {name : 'Vanuatu', value : 236.299},
                {name : 'West Bank', value : 13.565},
                {name : 'Yemen', value : 22763.008},
                {name : 'South Africa', value : 51452.352},
                {name : 'Zambia', value : 13216.985},
                {name : 'Zimbabwe', value : 13076.978}
            ]
        }
    ]
};
                    
地图-县级
var cityMap = {
    "北京市": "110100",
    "天津市": "120100",
    "上海市": "310100",
    "重庆市": "500100",
    
    "崇明县": "310200",            // ??
    "湖北省直辖县市": "429000",       // ??
    "铜仁市": "522200",            // ??
    "毕节市": "522400",            // ??
    
    "石家庄市": "130100",
    "唐山市": "130200",
    "秦皇岛市": "130300",
    "邯郸市": "130400",
    "邢台市": "130500",
    "保定市": "130600",
    "张家口市": "130700",
    "承德市": "130800",
    "沧州市": "130900",
    "廊坊市": "131000",
    "衡水市": "131100",
    "太原市": "140100",
    "大同市": "140200",
    "阳泉市": "140300",
    "长治市": "140400",
    "晋城市": "140500",
    "朔州市": "140600",
    "晋中市": "140700",
    "运城市": "140800",
    "忻州市": "140900",
    "临汾市": "141000",
    "吕梁市": "141100",
    "呼和浩特市": "150100",
    "包头市": "150200",
    "乌海市": "150300",
    "赤峰市": "150400",
    "通辽市": "150500",
    "鄂尔多斯市": "150600",
    "呼伦贝尔市": "150700",
    "巴彦淖尔市": "150800",
    "乌兰察布市": "150900",
    "兴安盟": "152200",
    "锡林郭勒盟": "152500",
    "阿拉善盟": "152900",
    "沈阳市": "210100",
    "大连市": "210200",
    "鞍山市": "210300",
    "抚顺市": "210400",
    "本溪市": "210500",
    "丹东市": "210600",
    "锦州市": "210700",
    "营口市": "210800",
    "阜新市": "210900",
    "辽阳市": "211000",
    "盘锦市": "211100",
    "铁岭市": "211200",
    "朝阳市": "211300",
    "葫芦岛市": "211400",
    "长春市": "220100",
    "吉林市": "220200",
    "四平市": "220300",
    "辽源市": "220400",
    "通化市": "220500",
    "白山市": "220600",
    "松原市": "220700",
    "白城市": "220800",
    "延边朝鲜族自治州": "222400",
    "哈尔滨市": "230100",
    "齐齐哈尔市": "230200",
    "鸡西市": "230300",
    "鹤岗市": "230400",
    "双鸭山市": "230500",
    "大庆市": "230600",
    "伊春市": "230700",
    "佳木斯市": "230800",
    "七台河市": "230900",
    "牡丹江市": "231000",
    "黑河市": "231100",
    "绥化市": "231200",
    "大兴安岭地区": "232700",
    "南京市": "320100",
    "无锡市": "320200",
    "徐州市": "320300",
    "常州市": "320400",
    "苏州市": "320500",
    "南通市": "320600",
    "连云港市": "320700",
    "淮安市": "320800",
    "盐城市": "320900",
    "扬州市": "321000",
    "镇江市": "321100",
    "泰州市": "321200",
    "宿迁市": "321300",
    "杭州市": "330100",
    "宁波市": "330200",
    "温州市": "330300",
    "嘉兴市": "330400",
    "湖州市": "330500",
    "绍兴市": "330600",
    "金华市": "330700",
    "衢州市": "330800",
    "舟山市": "330900",
    "台州市": "331000",
    "丽水市": "331100",
    "合肥市": "340100",
    "芜湖市": "340200",
    "蚌埠市": "340300",
    "淮南市": "340400",
    "马鞍山市": "340500",
    "淮北市": "340600",
    "铜陵市": "340700",
    "安庆市": "340800",
    "黄山市": "341000",
    "滁州市": "341100",
    "阜阳市": "341200",
    "宿州市": "341300",
    "六安市": "341500",
    "亳州市": "341600",
    "池州市": "341700",
    "宣城市": "341800",
    "福州市": "350100",
    "厦门市": "350200",
    "莆田市": "350300",
    "三明市": "350400",
    "泉州市": "350500",
    "漳州市": "350600",
    "南平市": "350700",
    "龙岩市": "350800",
    "宁德市": "350900",
    "南昌市": "360100",
    "景德镇市": "360200",
    "萍乡市": "360300",
    "九江市": "360400",
    "新余市": "360500",
    "鹰潭市": "360600",
    "赣州市": "360700",
    "吉安市": "360800",
    "宜春市": "360900",
    "抚州市": "361000",
    "上饶市": "361100",
    "济南市": "370100",
    "青岛市": "370200",
    "淄博市": "370300",
    "枣庄市": "370400",
    "东营市": "370500",
    "烟台市": "370600",
    "潍坊市": "370700",
    "济宁市": "370800",
    "泰安市": "370900",
    "威海市": "371000",
    "日照市": "371100",
    "莱芜市": "371200",
    "临沂市": "371300",
    "德州市": "371400",
    "聊城市": "371500",
    "滨州市": "371600",
    "菏泽市": "371700",
    "郑州市": "410100",
    "开封市": "410200",
    "洛阳市": "410300",
    "平顶山市": "410400",
    "安阳市": "410500",
    "鹤壁市": "410600",
    "新乡市": "410700",
    "焦作市": "410800",
    "濮阳市": "410900",
    "许昌市": "411000",
    "漯河市": "411100",
    "三门峡市": "411200",
    "南阳市": "411300",
    "商丘市": "411400",
    "信阳市": "411500",
    "周口市": "411600",
    "驻马店市": "411700",
    "省直辖县级行政区划": "469000",
    "武汉市": "420100",
    "黄石市": "420200",
    "十堰市": "420300",
    "宜昌市": "420500",
    "襄阳市": "420600",
    "鄂州市": "420700",
    "荆门市": "420800",
    "孝感市": "420900",
    "荆州市": "421000",
    "黄冈市": "421100",
    "咸宁市": "421200",
    "随州市": "421300",
    "恩施土家族苗族自治州": "422800",
    "长沙市": "430100",
    "株洲市": "430200",
    "湘潭市": "430300",
    "衡阳市": "430400",
    "邵阳市": "430500",
    "岳阳市": "430600",
    "常德市": "430700",
    "张家界市": "430800",
    "益阳市": "430900",
    "郴州市": "431000",
    "永州市": "431100",
    "怀化市": "431200",
    "娄底市": "431300",
    "湘西土家族苗族自治州": "433100",
    "广州市": "440100",
    "韶关市": "440200",
    "深圳市": "440300",
    "珠海市": "440400",
    "汕头市": "440500",
    "佛山市": "440600",
    "江门市": "440700",
    "湛江市": "440800",
    "茂名市": "440900",
    "肇庆市": "441200",
    "惠州市": "441300",
    "梅州市": "441400",
    "汕尾市": "441500",
    "河源市": "441600",
    "阳江市": "441700",
    "清远市": "441800",
    "东莞市": "441900",
    "中山市": "442000",
    "潮州市": "445100",
    "揭阳市": "445200",
    "云浮市": "445300",
    "南宁市": "450100",
    "柳州市": "450200",
    "桂林市": "450300",
    "梧州市": "450400",
    "北海市": "450500",
    "防城港市": "450600",
    "钦州市": "450700",
    "贵港市": "450800",
    "玉林市": "450900",
    "百色市": "451000",
    "贺州市": "451100",
    "河池市": "451200",
    "来宾市": "451300",
    "崇左市": "451400",
    "海口市": "460100",
    "三亚市": "460200",
    "三沙市": "460300",
    "成都市": "510100",
    "自贡市": "510300",
    "攀枝花市": "510400",
    "泸州市": "510500",
    "德阳市": "510600",
    "绵阳市": "510700",
    "广元市": "510800",
    "遂宁市": "510900",
    "内江市": "511000",
    "乐山市": "511100",
    "南充市": "511300",
    "眉山市": "511400",
    "宜宾市": "511500",
    "广安市": "511600",
    "达州市": "511700",
    "雅安市": "511800",
    "巴中市": "511900",
    "资阳市": "512000",
    "阿坝藏族羌族自治州": "513200",
    "甘孜藏族自治州": "513300",
    "凉山彝族自治州": "513400",
    "贵阳市": "520100",
    "六盘水市": "520200",
    "遵义市": "520300",
    "安顺市": "520400",
    "黔西南布依族苗族自治州": "522300",
    "黔东南苗族侗族自治州": "522600",
    "黔南布依族苗族自治州": "522700",
    "昆明市": "530100",
    "曲靖市": "530300",
    "玉溪市": "530400",
    "保山市": "530500",
    "昭通市": "530600",
    "丽江市": "530700",
    "普洱市": "530800",
    "临沧市": "530900",
    "楚雄彝族自治州": "532300",
    "红河哈尼族彝族自治州": "532500",
    "文山壮族苗族自治州": "532600",
    "西双版纳傣族自治州": "532800",
    "大理白族自治州": "532900",
    "德宏傣族景颇族自治州": "533100",
    "怒江傈僳族自治州": "533300",
    "迪庆藏族自治州": "533400",
    "拉萨市": "540100",
    "昌都地区": "542100",
    "山南地区": "542200",
    "日喀则地区": "542300",
    "那曲地区": "542400",
    "阿里地区": "542500",
    "林芝地区": "542600",
    "西安市": "610100",
    "铜川市": "610200",
    "宝鸡市": "610300",
    "咸阳市": "610400",
    "渭南市": "610500",
    "延安市": "610600",
    "汉中市": "610700",
    "榆林市": "610800",
    "安康市": "610900",
    "商洛市": "611000",
    "兰州市": "620100",
    "嘉峪关市": "620200",
    "金昌市": "620300",
    "白银市": "620400",
    "天水市": "620500",
    "武威市": "620600",
    "张掖市": "620700",
    "平凉市": "620800",
    "酒泉市": "620900",
    "庆阳市": "621000",
    "定西市": "621100",
    "陇南市": "621200",
    "临夏回族自治州": "622900",
    "甘南藏族自治州": "623000",
    "西宁市": "630100",
    "海东地区": "632100",
    "海北藏族自治州": "632200",
    "黄南藏族自治州": "632300",
    "海南藏族自治州": "632500",
    "果洛藏族自治州": "632600",
    "玉树藏族自治州": "632700",
    "海西蒙古族藏族自治州": "632800",
    "银川市": "640100",
    "石嘴山市": "640200",
    "吴忠市": "640300",
    "固原市": "640400",
    "中卫市": "640500",
    "乌鲁木齐市": "650100",
    "克拉玛依市": "650200",
    "吐鲁番地区": "652100",
    "哈密地区": "652200",
    "昌吉回族自治州": "652300",
    "博尔塔拉蒙古自治州": "652700",
    "巴音郭楞蒙古自治州": "652800",
    "阿克苏地区": "652900",
    "克孜勒苏柯尔克孜自治州": "653000",
    "喀什地区": "653100",
    "和田地区": "653200",
    "伊犁哈萨克自治州": "654000",
    "塔城地区": "654200",
    "阿勒泰地区": "654300",
    "自治区直辖县级行政区划": "659000",
    "台湾省": "710000",
    "香港特别行政区": "810100",
    "澳门特别行政区": "820000"
};




var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
    mapType.push(city);
    // 自定义扩展图表类型
    mapGeoData.params[city] = {
        getGeoJson: (function (c) {
            var geoJsonName = cityMap[c];
            return function (callback) {
                $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
            }
        })(city)
    }
}


var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
    var event = e || window.event;
    curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
    if (curIndx < 0) {
        curIndx = mapType.length - 1;
    }
    var mt = mapType[curIndx % mapType.length];
    option.series[0].mapType = mt;
    option.title.subtext = mt + ' （滚轮或点击切换）';
    myChart.setOption(option, true);
    zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
    curIndx++;
    var mt = mapType[curIndx % mapType.length];
    option.series[0].mapType = mt;
    option.title.subtext = mt + ' （滚轮或点击切换）';
    myChart.setOption(option, true);
});
option = {
    title: {
        text : '全国344个主要城市（县）地图 by Pactera 陈然',
        link : 'http://www.pactera.com/',
        subtext : '北京市 （滚轮或点击切换）'
    },
    tooltip : {
        trigger: 'item',
        formatter: '滚轮或点击切换<br/>{b}'
    },
    series : [
        {
            name: '全国344个主要城市（县）地图',
            type: 'map',
            mapType: '北京市',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[]
        }
    ]
};
                                 
仪表图
option = {
    tooltip : {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'速度',
            type:'gauge',
            z: 3,
            min:0,
            max:220,
            splitNumber:11,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length :15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length :20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            title : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic'
                }
            },
            detail : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                }
            },
            data:[{value: 40, name: 'km/h'}]
        },
        {
            name:'转速',
            type:'gauge',
            center : ['25%', '55%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:7,
            endAngle:45,
            splitNumber:7,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length :20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer: {
                width:5
            },
            title : {
                offsetCenter: [0, '-30%'],       // x, y，单位px
            },
            detail : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                }
            },
            data:[{value: 1.5, name: 'x1000 r/min'}]
        },
        {
            name:'油表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:135,
            endAngle:45,
            splitNumber:2,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber:5,
                length :10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                    }
                }
            },
            splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer: {
                width:2
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        },
        {
            name:'水表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:315,
            endAngle:225,
            splitNumber:2,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                show: false
            },
            axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                    }
                }
            },
            splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer: {
                width:2
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        }
    ]
};


clearInterval(timeTicket);
timeTicket = setInterval(function (){
    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
    myChart.setOption(option,true);
},2000)
                    
漏斗图
option = {
    color : [
        'rgba(255, 69, 0, 0.5)',
        'rgba(255, 150, 0, 0.5)',
        'rgba(255, 200, 0, 0.5)',
        'rgba(155, 200, 50, 0.5)',
        'rgba(55, 200, 100, 0.5)'
    ],
    title : {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    legend: {
        data : ['展现','点击','访问','咨询','订单']
    },
    calculable : true,
    series : [
        {
            name:'预期',
            type:'funnel',
            x: '10%',
            width: '80%',
            itemStyle: {
                normal: {
                    label: {
                        formatter: '{b}预期'
                    },
                    labelLine: {
                        show : false
                    }
                },
                emphasis: {
                    label: {
                        position:'inside',
                        formatter: '{b}预期 : {c}%'
                    }
                }
            },
            data:[
                {value:60, name:'访问'},
                {value:40, name:'咨询'},
                {value:20, name:'订单'},
                {value:80, name:'点击'},
                {value:100, name:'展现'}
            ]
        },
        {
            name:'实际',
            type:'funnel',
            x: '10%',
            width: '80%',
            maxSize: '80%',
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 2,
                    label: {
                        position: 'inside',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                emphasis: {
                    label: {
                        position:'inside',
                        formatter: '{b}实际 : {c}%'
                    }
                }
            },
            data:[
                {value:30, name:'访问'},
                {value:10, name:'咨询'},
                {value:5, name:'订单'},
                {value:50, name:'点击'},
                {value:80, name:'展现'}
            ]
        }
    ]
};
                    
漏斗图1
option = {
    title : {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    legend: {
        data : ['展现','点击','访问','咨询','订单']
    },
    calculable : true,
    series : [
        {
            name:'漏斗图',
            type:'funnel',
            width: '40%',
            data:[
                {value:60, name:'访问'},
                {value:40, name:'咨询'},
                {value:20, name:'订单'},
                {value:80, name:'点击'},
                {value:100, name:'展现'}
            ]
        },
        {
            name:'金字塔',
            type:'funnel',
            x : '50%',
            sort : 'ascending',
            itemStyle: {
                normal: {
                    // color: 各异,
                    label: {
                        position: 'left'
                    }
                }
            },
            data:[
                {value:60, name:'访问'},
                {value:40, name:'咨询'},
                {value:20, name:'订单'},
                {value:80, name:'点击'},
                {value:100, name:'展现'}
            ]
        }
    ]
};
                    
热力图
var heatData = [];
for (var i = 0; i < 20; ++i) {
    heatData.push([
        400 + Math.random() * 300,
        5 + Math.random() * 10,
        Math.random()
    ]);
}
for (var i = 0; i < 100; ++i) {
    heatData.push([
        100 + Math.random() * 600,
        150 + Math.random() * 50,
        Math.random()
    ]);
}
for (var i = 0; i < 200; ++i) {
    heatData.push([
        Math.random() * 1000,
        Math.random() * 800,
        Math.random() * 0.5
    ]);
}
option = {
    title : {
        text: '热力图自定义样式'
    },
    series : [
        {
            type : 'heatmap',
            data : heatData,
            hoverable : false,
            gradientColors: [{
                offset: 0.4,
                color: 'green'
            }, {
                offset: 0.5,
                color: 'yellow'
            }, {
                offset: 0.8,
                color: 'orange'
            }, {
                offset: 1,
                color: 'red'
            }],
            minAlpha: 0.2,
            valueScale: 2,
            opacity: 0.6
        }
    ]
};
                    
河流事件图
option = {
    title : {
        text: 'Event River',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'item',
        enterable: true
    },
    legend: {
        data:['财经事件', '政治事件']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'time',
            boundaryGap: [0.05,0.1]
        }
    ],
    series : [
        {
            "name": "财经事件", 
            "type": "eventRiver", 
            "weight": 123, 
            "data": [
                {
                    "name": "阿里巴巴上市", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-01", 
                            "value": 14, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-02", 
                            "value": 34, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-03", 
                            "value": 60, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-04", 
                            "value": 40, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-05", 
                            "value": 10, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }, 
                {
                    "name": "阿里巴巴上市2", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-02", 
                            "value": 10, 
                            "detail": {
                                "link": "www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-03", 
                            "value": 34, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-04", 
                            "value": 40, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-05", 
                            "value": 10, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }, 
                {
                    "name": "三星业绩暴跌", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-03", 
                            "value": 24, 
                            "detail": {
                                "link": "www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-04", 
                            "value": 34, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-05", 
                            "value": 50, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-06", 
                            "value": 30, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-07", 
                            "value": 20, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }
            ]
        }, 
        {
            "name": "政治事件", 
            "type": "eventRiver", 
            "weight": 123, 
            "data": [
                {
                    "name": "Apec峰会", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-06", 
                            "value": 14, 
                            "detail": {
                                "link": "www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-07", 
                            "value": 34, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-08", 
                            "value": 60, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-09", 
                            "value": 40, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-10", 
                            "value": 20, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }, 
                {
                    "name": "运城官帮透视", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-08", 
                            "value": 4, 
                            "detail": {
                                "link": "www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-09", 
                            "value": 14, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-10", 
                            "value": 30, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-11", 
                            "value": 20, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-12", 
                            "value": 10, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }, 
                {
                    "name": "底层公务员收入超过副部长", 
                    "weight": 123, 
                    "evolution": [
                        {
                            "time": "2014-05-11", 
                            "value": 4, 
                            "detail": {
                                "link": "www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-12", 
                            "value": 24, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-13", 
                            "value": 40, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-14", 
                            "value": 20, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-15", 
                            "value": 15, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }, 
                        {
                            "time": "2014-05-16", 
                            "value": 10, 
                            "detail": {
                                "link": "http://www.baidu.com", 
                                "text": "百度指数", 
                                "img": '../asset/ico/favicon.png'
                            }
                        }
                    ]
                }
            ]
        }
    ]
};
                    
韦恩图
option = {
    title : {
        text: '访问 vs 咨询',
        subtext: '各个数据的集合'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    series : [
        {
            name:'韦恩图',
            type:'venn',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans-serif',
                            fontSize: 16,
                            fontStyle: 'italic',
                            fontWeight: 'bolder'
                        }
                    },
                    labelLine: {
                        show: false,
                        length: 10,
                        lineStyle: {
                            // color: 各异,
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                emphasis: {
                    color: '#cc99cc',
                    borderWidth: 3,
                    borderColor: '#996699'
                }
            },
            data:[
                {value:100, name:'访问'},
                {value:50, name:'咨询'},
                {value:20, name:'公共'}
            ]
        }
    ]
};
                    
树状图
option = {
    title : {
        text: '树图',
        subtext: '虚构数据'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,


    series : [
        {
            name:'树图',
            type:'tree',
            orient: 'vertical',  // vertical horizontal
            rootLocation: {x: 'center',y: 50}, // 根节点位置  {x: 100, y: 'center'}
            nodePadding: 1,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        formatter: "{b}"
                    },
                    lineStyle: {
                        color: '#48b',
                        shadowColor: '#000',
                        shadowBlur: 3,
                        shadowOffsetX: 3,
                        shadowOffsetY: 5,
                        type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'


                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            
            data: [
                {
                    name: '根节点',
                    value: 6,
                    children: [
                        {
                            name: '节点1',
                            value: 4,
                            children: [
                                {
                                    name: '叶子节点1',
                                    value: 4
                                },
                                {
                                    name: '叶子节点2',
                                    value: 4
                                },
                                {
                                    name: '叶子节点3',
                                    value: 2
                                },
                                 {
                                    name: '叶子节点4',
                                    value: 2
                                },
                                {
                                    name: '叶子节点5',
                                    value: 2
                                },
                                {
                                    name: '叶子节点6',
                                    value: 4
                                }
                            ]
                        },
                        {
                            name: '节点2',
                            value: 4,
                            children: [{
                                name: '叶子节点7',
                                value: 4
                            },
                            {
                                name: '叶子节点8',
                                value: 4
                            }]
                        },
                        {
                            name: '节点3',
                            value: 1,
                            children: [
                                {
                                    name: '叶子节点9',
                                    value: 4
                                },
                                {
                                    name: '叶子节点10',
                                    value: 4
                                },
                                {
                                    name: '叶子节点11',
                                    value: 2
                                },
                                 {
                                    name: '叶子节点12',
                                    value: 2
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
};
                    
字符云


function createRandomItemStyle() {
    return {
        normal: {
            color: 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
            ].join(',') + ')'
        }
    };
}


option = {
    title: {
        text: 'Google Trends',
        link: 'http://www.google.com/trends/hottrends'
    },
    tooltip: {
        show: true
    },
    series: [{
        name: 'Google Trends',
        type: 'wordCloud',
        size: ['80%', '80%'],
        textRotation : [0, 45, 90, -45],
        textPadding: 0,
        autoSize: {
            enable: true,
            minSize: 14
        },
        data: [
            {
                name: "Sam S Club",
                value: 10000,
                itemStyle: {
                    normal: {
                        color: 'black'
                    }
                }
            },
            {
                name: "Macys",
                value: 6181,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Amy Schumer",
                value: 4386,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Jurassic World",
                value: 4055,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Charter Communications",
                value: 2467,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Chick Fil A",
                value: 2244,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Planet Fitness",
                value: 1898,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Pitch Perfect",
                value: 1484,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Express",
                value: 1112,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Home",
                value: 965,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Johnny Depp",
                value: 847,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Lena Dunham",
                value: 582,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Lewis Hamilton",
                value: 555,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "KXAN",
                value: 550,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Mary Ellen Mark",
                value: 462,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Farrah Abraham",
                value: 366,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Rita Ora",
                value: 360,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Serena Williams",
                value: 282,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "NCAA baseball tournament",
                value: 273,
                itemStyle: createRandomItemStyle()
            },
            {
                name: "Point Break",
                value: 265,
                itemStyle: createRandomItemStyle()
            }
        ]
    }]
};
                    
混搭图-折柱混搭
option = {
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value',
            name : '水量',
            axisLabel : {
                formatter: '{value} ml'
            }
        },
        {
            type : 'value',
            name : '温度',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [


        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};
             
混搭图-折柱饼混搭
option = {
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        y: 'bottom',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
    },
    xAxis : [
        {
            type : 'category',
            splitLine : {show : false},
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            position: 'right'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            tooltip : {trigger: 'item'},
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            tooltip : {trigger: 'item'},
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            tooltip : {trigger: 'item'},
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'line',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570]
        },


        {
            name:'搜索引擎细分',
            type:'pie',
            tooltip : {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            center: [160,130],
            radius : [0, 50],
            itemStyle :　{
                normal : {
                    labelLine : {
                        length : 20
                    }
                }
            },
            data:[
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};
                    
组件
option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量','最低气温','最高气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'category',
            position: 'bottom',
            boundaryGap: true,
            axisLine : {    // 轴线
                show: true,
                lineStyle: {
                    color: 'green',
                    type: 'solid',
                    width: 2
                }
            },
            axisTick : {    // 轴标记
                show:true,
                length: 10,
                lineStyle: {
                    color: 'red',
                    type: 'solid',
                    width: 2
                }
            },
            axisLabel : {
                show:true,
                interval: 'auto',    // {number}
                rotate: 45,
                margin: 8,
                formatter: '{value}月',
                textStyle: {
                    color: 'blue',
                    fontFamily: 'sans-serif',
                    fontSize: 15,
                    fontStyle: 'italic',
                    fontWeight: 'bold'
                }
            },
            splitLine : {
                show:true,
                lineStyle: {
                    color: '#483d8b',
                    type: 'dashed',
                    width: 1
                }
            },
            splitArea : {
                show: true,
                areaStyle:{
                    color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
                }
            },
            data : [
                '1','2','3','4','5',
                {
                    value:'6',
                    textStyle: {
                        color: 'red',
                        fontSize: 30,
                        fontStyle: 'normal',
                        fontWeight: 'bold'
                    }
                },
                '7','8','9','10','11','12'
            ]
        },
        {
            type : 'category',
            data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        }
    ],
    yAxis : [
        {
            type : 'value',
            position: 'left',
            //min: 0,
            //max: 300,
            //splitNumber: 5,
            boundaryGap: [0,0.1],
            axisLine : {    // 轴线
                show: true,
                lineStyle: {
                    color: 'red',
                    type: 'dashed',
                    width: 2
                }
            },
            axisTick : {    // 轴标记
                show:true,
                length: 10,
                lineStyle: {
                    color: 'green',
                    type: 'solid',
                    width: 2
                }
            },
            axisLabel : {
                show:true,
                interval: 'auto',    // {number}
                rotate: -45,
                margin: 18,
                formatter: '{value} ml',    // Template formatter!
                textStyle: {
                    color: '#1e90ff',
                    fontFamily: 'verdana',
                    fontSize: 10,
                    fontStyle: 'normal',
                    fontWeight: 'bold'
                }
            },
            splitLine : {
                show:true,
                lineStyle: {
                    color: '#483d8b',
                    type: 'dotted',
                    width: 2
                }
            },
            splitArea : {
                show: true,
                areaStyle:{
                    color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
                }
            }
        },
        {
            type : 'value',
            splitNumber: 10,
            axisLabel : {
                formatter: function (value) {
                    // Function formatter
                    return value + ' °C'
                }
            },
            splitLine : {
                show: false
            }
        }
    ],
    series : [
        {
            name: '蒸发量',
            type: 'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'最低气温',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        },
        {
            name:'最高气温',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
        }
    ]
};