雷达图
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]
}
]
};
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]
}
]
};