echarts基本图例
1.仪表盘
option = {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
legend: {
left: 'center',
selectedMode: false,
y: 'bottom',
data: ['业务指标'],
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 112, name: '完成率'},],//设置指针值
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [[0.2, '#018580'], [0.4, '#96D059'], [0.6, '#01BBB8'],
[0.8, '#FF5252'],[1, '#FFA41F']]
}
},
},
]2.气泡图
var data0 = [
[28604, 77, 17096869, 'Australia', 1990],
[31163, 77.4, 27662440, 'Canada', 1990],
[1516, 68, 1154605773, 'China', 1990],
[13670, 74.7, 10582082, 'Cuba', 1990],
[28599, 75, 4986705, 'Finland', 1990],
[29476, 77.1, 56943299, 'France', 1990],
[31476, 75.4, 78958237, 'Germany', 1990],
[28666, 78.1, 254830, 'Iceland', 1990],
[1777, 57.7, 870601776, 'India', 1990],
[29550, 79.1, 122249285, 'Japan', 1990],
[2076, 67.9, 20194354, 'North Korea', 1990],
[12087, 72, 42972254, 'South Korea', 1990],
[24021, 75.4, 3397534, 'New Zealand', 1990],
[43296, 76.8, 4240375, 'Norway', 1990],
[10088, 70.8, 38195258, 'Poland', 1990],
[19349, 69.6, 147568552, 'Russia', 1990],
[10670, 67.3, 53994605, 'Turkey', 1990],
[26424, 75.7, 57110117, 'United Kingdom', 1990],
[37062, 75.4, 252847810, 'United States', 1990]
];
var data = [
[28604, 77],
[31163, 77.4],
[1516, 68],
[13670, 74.7],
[28599, 75],
[29476, 77.1],
[31476, 75.4],
[28666, 78.1],
[1777, 57.7],
[29550, 79.1],
[2076, 67.9],
[12087, 72],
[24021, 75.4],
[43296, 76.8],
[10088, 70.8],
[19349, 69.6],
[10670, 67.3],
[26424, 75.7],
[37062, 75.4],
[44056, 81.8],
[43294, 81.7],
[13334, 76.9],
[21291, 78.5],
[38923, 80.8],
[37599, 81.9],
[44053, 81.1],
[42182, 82.8],
[5903, 66.8],
[36162, 83.5],
[1390, 71.4],
[34644, 80.7],
[34186, 80.6],
[64304, 81.6],
[24787, 77.3],
[23038, 73.13],
[19360, 76.5],
[38225, 81.4],
[53354, 79.1]
];
// See https://github.com/ecomfe/echarts-stat
var myRegression = ecStat.regression('logarithmic', data);
myRegression.points.sort(function(a, b) {
return a[0] - b[0];
});
option = {
legend: {
data: ['1990', '2015'],
bottom: 20
},
title: {
text: '1990 and 2015 per capita life expectancy and GDP',
subtext: 'By ecStat.regression',
sublink: 'https://www.baidu.com',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
top: 80,
bottom: 90
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
},
series: [{
name: '1990',
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
label: { //标签属性
emphasis: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: { //图形属性
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
},
data: data0
}]
};3.桑基图
option = {
series: {
type: 'sankey',
layout:'none',
focusNodeAdjacency: 'allEdges',
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}],
itemStyle: {
normal: {
// （1） 直接写一个颜色，这样的结果是所有节点都是同一个颜色
// color: '#fff',
// （2） 像在全局定义中一样，使用数组声明多个颜色
// 但是这样的结果是所有颜色都变成黑色（大概是不允许这样用吧）
color: ['#bd407e','#28cad8','#fc853e','#e5a214'],
// （3） 类似柱状图定义多个颜色，利用函数返回不同的颜色值
// 结果同上，全变成黑色了
// color: function(params) {
// var colorList = ['#89aae6','#177cb0','#5a79ba','#98a6dd','#8b6eaf'];
// return colorList[params.dataIndex]
// }
}
}
}
};4.词云图
var keywords = {
"visualMap": 22199,
"continuous": 10288,
"contoller": 620,
"series": 274470,
"gauge": 12311,
"detail": 1206,
"piecewise": 4885,
"textStyle": 32294,
"markPoint": 18574,
"pie": 38929,
"roseType": 969,
"label": 37517,
"emphasis": 12053,
"yAxis": 57299,
"name": 15418,
"type": 22905,
"gridIndex": 5146,
"normal": 49487,
"itemStyle": 33837,
"min": 4500,
"silent": 5744,
"animation": 4840,
"offsetCenter": 232,
"inverse": 3706,
"borderColor": 4812,
"markLine": 16578,
"line": 76970,
"radiusAxis": 6704,
"radar": 15964,
"data": 60679,
"dataZoom": 24347,
"tooltip": 43420,
"toolbox": 25222,
"geo": 16904,
"parallelAxis": 4029,
"parallel": 5319,
"max": 3393,
"bar": 43066,
"heatmap": 3110,
"map": 20285,
"animationDuration": 3425,
"animationDelay": 2431,
"splitNumber": 5175,
"axisLine": 12738,
"lineStyle": 19601,
"splitLine": 7133,
"axisTick": 8831,
"axisLabel": 17516,
"pointer": 590,
"color": 23426,
"title": 38497,
"formatter": 15214,
"slider": 7236,
"legend": 66514,
"grid": 28516,
"smooth": 1295,
"smoothMonotone": 696,
"sampling": 757,
"feature": 12815,
"saveAsImage": 2616,
"polar": 6279,
"calculable": 879,
"backgroundColor": 9419,
"excludeComponents": 130,
"show": 20620,
"text": 2592,
"icon": 2782,
"dimension": 478,
"inRange": 1060,
"animationEasing": 2983,
"animationDurationUpdate": 2259,
"animationDelayUpdate": 2236,
"animationEasingUpdate": 2213,
"xAxis": 89459,
"angleAxis": 5469,
"showTitle": 484,
"dataView": 2754,
"restore": 932,
"timeline": 10104,
"range": 477,
"value": 5732,
"precision": 878,
"target": 1433,
"zlevel": 5361,
"symbol": 8718,
"interval": 7964,
"symbolSize": 5300,
"showSymbol": 1247,
"inside": 8913,
"xAxisIndex": 3843,
"orient": 4205,
"boundaryGap": 5073,
"nameGap": 4896,
"zoomLock": 571,
"hoverAnimation": 2307,
"legendHoverLink": 3553,
"stack": 2907,
"throttle": 466,
"connectNulls": 897,
"clipOverflow": 826,
"startValue": 551,
"minInterval": 3292,
"opacity": 3097,
"splitArea": 4775,
"filterMode": 635,
"end": 409,
"left": 6475,
"funnel": 2238,
"lines": 6403,
"baseline": 431,
"align": 2608,
"coord": 897,
"nameTextStyle": 7477,
"width": 4338,
"shadowBlur": 4493,
"effect": 929,
"period": 225,
"areaColor": 631,
"borderWidth": 3654,
"nameLocation": 4418,
"position": 11723,
"containLabel": 1701,
"scatter": 10718,
"areaStyle": 5310,
"scale": 3859,
"pieces": 414,
"categories": 1000,
"selectedMode": 3825,
"itemSymbol": 273,
"effectScatter": 7147,
"fontStyle": 3376,
"fontSize": 3386,
"margin": 1034,
"iconStyle": 2257,
"link": 1366,
"axisPointer": 5245,
"showDelay": 896,
"graph": 22194,
"subtext": 1442,
"selected": 2881,
"barCategoryGap": 827,
"barGap": 1094,
"barWidth": 1521,
"coordinateSystem": 3622,
"barBorderRadius": 284,
"z": 4014,
"polarIndex": 1456,
"shadowOffsetX": 3046,
"shadowColor": 3771,
"shadowOffsetY": 2475,
"height": 1988,
"barMinHeight": 575,
"lang": 131,
"symbolRotate": 2752,
"symbolOffset": 2549,
"showAllSymbol": 942,
"transitionDuration": 993,
"bottom": 3724,
"fillerColor": 229,
"nameMap": 1249,
"barMaxWidth": 747,
"radius": 2103,
"center": 2425,
"magicType": 3276,
"labelPrecision": 248,
"option": 654,
"seriesIndex": 935,
"controlPosition": 121,
"itemGap": 3188,
"padding": 3481,
"shadowStyle": 347,
"boxplot": 1394,
"labelFormatter": 264,
"realtime": 631,
"dataBackgroundColor": 239,
"showDetail": 247,
"showDataShadow": 217,
"x": 684,
"valueDim": 499,
"onZero": 931,
"right": 3255,
"clockwise": 1035,
"itemWidth": 1732,
"trigger": 3840,
"axis": 379,
"selectedOffset": 670,
"startAngle": 1293,
"minAngle": 590,
"top": 4637,
"avoidLabelOverlap": 870,
"labelLine": 3785,
"sankey": 2933,
"endAngle": 213,
"start": 779,
"roam": 1738,
"fontWeight": 2828,
"fontFamily": 2490,
"subtextStyle": 2066,
"indicator": 853,
"sublink": 708,
"zoom": 1038,
"subtarget": 659,
"length": 1060,
"itemSize": 505,
"controlStyle": 452,
"yAxisIndex": 2529,
"edgeLabel": 1188,
"radiusAxisIndex": 354,
"scaleLimit": 1313,
"geoIndex": 535,
"regions": 1892,
"itemHeight": 1290,
"nodes": 644,
"candlestick": 3166,
"crossStyle": 466,
"edges": 369,
"links": 3277,
"layout": 846,
"barBorderColor": 721,
"extraCssText": 901,
"effectType": 277,
"force": 1820,
"rippleEffect": 723,
"edgeSymbolSize": 329,
"showEffectOn": 271,
"gravity": 199,
"edgeLength": 193,
"layoutAnimation": 152,
"length2": 169,
"enterable": 957,
"dim": 83,
"readOnly": 143,
"levels": 444,
"textGap": 256,
"pixelRatio": 84,
"nodeScaleRatio": 232,
"draggable": 249,
"brushType": 158,
"radarIndex": 152,
"large": 182,
"edgeSymbol": 675,
"largeThreshold": 132,
"leafDepth": 73,
"childrenVisibleMin": 73,
"minSize": 35,
"maxSize": 35,
"sort": 90,
"funnelAlign": 61,
"source": 336,
"nodeClick": 200,
"curveness": 350,
"areaSelectStyle": 104,
"parallelIndex": 52,
"initLayout": 359,
"trailLength": 116,
"boxWidth": 20,
"back": 53,
"rewind": 110,
"zoomToNodeRatio": 80,
"squareRatio": 60,
"parallelAxisDefault": 358,
"checkpointStyle": 440,
"nodeWidth": 49,
"color0": 62,
"layoutIterations": 56,
"nodeGap": 54,
"color(Array": 76,
")": 76,
"repulsion": 276,
"tiled": 105,
"currentIndex": 145,
"axisType": 227,
"loop": 97,
"playInterval": 112,
"borderColor0": 23,
"gap": 43,
"blendMode": 1,
"dataBackground": 1,
"textAlign": 1,
"textBaseline": 1,
"brush": 3
};
var data = [];
for (var name in keywords) {
data.push({
name: name,
value: Math.sqrt(keywords[name])
})
}
var maskImage = new Image();
maskImage.src = '/asset/get/s/data-1565746651093-0eAx0lLR4.png';
var option = {
title: {
text: '搜索指数',
x: 'center',
textStyle: {
fontSize: 23
}
},
tooltip: {
show: true
},
backgroundColor: '#F7F7F7',
series: [{
name: '搜索指数',
type: 'wordCloud',
//size: ['9%', '99%'],
sizeRange: [12, 80],
//textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90],
//shape: 'circle',
maskImage: maskImage,
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: data
}]
};
maskImage.onload = function() {
myChart.setOption(option);
};
window.onresize = function() {
myChart.resize();
} 5.漏斗图
option = {
title: {
text: '投资项目漏斗图',
subtext: '基于2019年3月数据'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
calculable: true,
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 30,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
formatter: "{b} : {c}",
position: 'outside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data: [
{value: 20, name: '接触'},
{value: 12, name: '意向'},
{value: 3, name: '确认投资'},
{value: 7, name: '签署协议'},
{value: 1, name: '投后管理'}
]
}
]
};