1.仪表盘
option = { tooltip : { formatter: "{a} <br/>{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, "<string>)": 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} <br/>{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: '投后管理'} ] } ] };
