echarts setOption 里面的参数及用法实例_鲨鱼辣椒请战_echarts setoption

irpas 02-07 4062

官网地址：echarts setOption官网跳转数据结构图：

用法： title //标题设置 legend //图例控制 grid //图例内网格控制 xAxis //X轴 yAxis //Y轴 polar //极坐标 radiusAxis //极坐标系径向轴 angleAxis //极坐标系的角度轴。 radar //雷达图坐标系组件 dataZoom //图表缩放控件 visualMap //视觉映射组件 tooltip //提示框控件 axisPointer //坐标轴指示器（axisPointer）的全局公用设置。 toolbox //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。 brush //区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。 geo //地理坐标系组件 parallel //平行坐标系（Parallel Coordinates）是一种常用的可视化高维数据的图表。 parallelAxis //这个组件是平行坐标系中的坐标轴。 singleAxis //单轴。可以被应用到散点图中展现一维数据 timeline //时间轴控件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。 graphic //原生图形元素组件。可以支持的图形元素包括： image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。 calendar //日历坐标系组件。 dataset //数据集，用于单独的数据集声明 aria //无障碍富互联网应用规范集 series //系列列表。每个系列通过 type 决定自己的图表类型、 color //调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 backgroundColor //背景色 textStyle //全局的字体样式。 animation //是否开启动画 animationThreshold //是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。 animationDuration //初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果： animationEasing //初始动画的缓动效果。 animationDelay //初始动画的延迟，支持回调函数， animationDurationUpdate //数据更新动画的时长，支持回调函数 animationEasingUpdate //数据更新动画的缓动效果。 animationDelayUpdate //数据更新动画的延迟，支持回调函数， blendMode //图形的混合模式 hoverLayerThreshold //图形数量阈值 useUTC //是否使用 UTC 时间。实例： let option_prem5 = { backgroundColor: '#304156', title: { text: '', subtext: '', top: 'bottom', left: 'right' }, // tooltip 提示框组件 tooltip: { background: '', trigger: 'item', // 触发类型， 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发 showContent: true, //是否显示提示框浮层 alwaysShowContent: false, //是否永远显示提示框内容 showDelay: 0, //浮层显示的延迟，单位为 ms hideDelay: 50, //浮层隐藏的延迟，单位为 ms enterable: false, //鼠标是否可进入提示框浮层中 confine: false, //是否将 tooltip 框限制在图表的区域内 transitionDuration: 0.1, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动 // position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧， backgroundColor: "transparent", //标题背景色 borderColor: "#FFFFFF", //边框颜色 borderWidth: 0, //边框线宽 padding: [5, 10], //图例内边距，单位px 5 [5, 10] [5,10,5,10] textStyle: 'mytextStyle', //文本样式 formatter: function (params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 console.log(params); return params.data['name'] } // formatter:"{b0}: {c0}{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 }, legend: { x: 'left', show: true, itemHeight: 22, // 设置图例图标的大小 textStyle: { // 设置图例字体的样式颜色大小 color: 'black', fontSize: 14 }, data: [ //{name: '其他'}, {name: '农银E家'}, {name: '内容管理平台（ECM）'}, {name: 'UM'}, {name: '规则管理平台'}, {name: 'CIF'}, {name: 'CIP'}, {name: '负载均衡'}, {name: '中介平台'}, {name: '移动展业平台'}, {name: '统一互联网服务平台'}, {name: '自动化测试平台'}, {name: '网段'}, {name: '数据交换平台'}, {name: '呼叫中心'} ] }, series: [ { type: 'graph', // 关系图 layout: 'force', // 图的布局，类型为力导图，'circular' 采用环形布局 name: "主机关系", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 force: { //力引导图基本配置 //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点 repulsion: 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 gravity: 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 edgeLength: 200,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 layoutAnimation: true //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。 }, roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 nodeScaleRatio: 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放 draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。 focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 //symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿 //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%'] edgeSymbol: ['none', 'none'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow'] edgeSymbolSize: 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 ribbonType: false, categories: [], //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效 itemStyle: { // 设置边框的颜色和宽度 // normal: { // label: { // show: true, // textStyle: { // color: '#000000', // } // }, // nodeStyle: { // brushType: 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线） // borderColor: 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4 // borderWidth: 2, //图形的描边线宽。为 0 时无描边。 // opacity: 1 // // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 // } // }, // emphasis: { //高亮状态 // // } }, lineStyle: { //==========关系边的公用线条样式。 normal: { color: '#FFFF33', width: '3', type: 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线） curveness: 0.3, //线条的曲线程度，从0到1 opacity: 0.5 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis: {//高亮状态 } }, label: { //=============图形上的文本标签 normal: { show: true,//是否显示标签。 position: 'bottom',//标签的位置。['50%', '50%'] [x,y] textStyle: { //标签的字体样式 color: '#000000', //字体颜色 fontStyle: 'italic',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400... fontFamily: 'sans-serif', //文字的字体系列 fontSize: 12, //字体大小 } }, emphasis: {//高亮状态 } }, edgeLabel: {//==============线条的边缘标签 normal: { show: false } }, //别名为nodes name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小 //label:标签样式。 symbolSize: 50, //preventOverlap: true, data: [], links: [] //edges是其别名代表节点间的关系数据。 } ] }; 这些参数会造成关系图节点消失（具体原因还没有研究）： center: ['50%', '50%'], gravity: 0, scaling: 2.5, linkSymbol: 'arrow', steps: 50, coolDown: 0.9, useWorker: true, large: true, top: '10%', left: '8%', bottom: '22%', right: '20%',