echarts基本图例

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基本图例相关推荐

html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
ECharts绘制图例动态变化的柱状图
ECharts绘制图例动态变化的柱状图或许想要柱状图实现下面这样的效果?
自定义Echarts图表图例的图片
从Echarts官网上我们可以知道图例默认的图片样式有以下几种,分别是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arr ...
echarts 控制图例显示隐藏以及自适应的方法
当屏幕大小发生变化,echarts没有进行自适应,我们可以使用它的resize()方法去解决. 当echarts的组件放在el-tabs里面的el-tab-pane切换时,echarts的自适应会跟不 ...
echarts legend 图例与文字对齐问题
今天使用echarts时发现官网示例图例部分并没有进行对齐,一上一下逼死强迫症,经过对文档的查询,发现可以通过对textStyle-height以及rich的设置调整对齐方式第一种方式 textSt ...
echarts改变图例颜色形状icon的用法，和svg图片信息的了解
前端问题记录大家好,我是你们的好朋友程序猿:铭文一.echarts图例的相关问题. 大家好,我是你们的好朋友程序猿:铭文先简单的说下:最近换了一个新的工作目前工作:做前端哈哈,但是后端还得搞写一 ...
echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
echarts改变图例位置
只需要legend属性中修改如下几个示数即可: legend:{orient:"horizontal",x:'right',y:' center',width:'100',padd ...
echarts柱状图图例不显示的问题
这里写代码片要达到的效果如图: 废话不多说,直接上代码: 如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的如果你热爱 ...
echarts饼图图例总结
icon:图例形状,类型包括 circle,rect, line,roundRect,triangle,diamond,pin,arrow,none legend: {orient: "ve ...

echarts基本图例

echarts基本图例相关推荐

最新文章

热门文章