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: '投后管理'}]}] };

?

總結

以上是生活随笔為你收集整理的echarts基本图例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。