coordinate-geo.js文件为地理坐标系的配置参数
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 39 geo=[{ 40 show:true, //是否显示 41 map:"china", //地图类型。world世界地图，china中国地图 42 roam:false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 43 center:[115.97, 29.71], //当前视角的中心点，用经纬度表示 44 aspectScale:0.75, //这个参数用于 scale 地图的长宽比。 45 boundingCoords: [[-180, 90], [180, -90]], //二维数组，定义定位的左上角以及右下角分别所对应的经纬度 46 zoom:1, //当前视角的缩放比例 47 scaleLimit:{ //所属组件的z分层，z值小的图形会被z值大的图形覆盖 48 min:1, //最小的缩放值 49 max:1, //最大的缩放值 50 }, 51 nameMap:{ //自定义地区的名称映射 52 'China' : '中国' 53 }, 54 selectedMode: false , //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。 55 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等 56 normal:{ 57 show:false, //是否在普通状态下显示标签。 58 textStyle:mytextStyle, //普通状态下的标签文本样式。 59 }, 60 emphasis:{ 61 show:false, //是否在高亮状态下显示标签。 62 textStyle:mytextStyle //高亮状态下的标签文本样式。 63 } 64 }, 65 itemStyle:{ //地图区域的多边形 图形样式 66 normal:myitemStyle, 67 emphasis:myitemStyle 68 }, 69 zlevel:0, //所属图形的 zlevel 值。 70 z:2, //所属图形的 z 值。 71 left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字 72 top:60, //组件离容器上侧的距离，百分比字符串或整型数字 73 right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字 74 bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字 75 layoutCenter:['30%', '30%'], //地图中心在屏幕中的位置 76 layoutSize:100, //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。 77 regions:[{ //在地图中对特定的区域配置样式。 78 name: '广东', 79 itemStyle: { 80 normal: { 81 areaColor: 'red', 82 color: 'red' 83 } 84 } 85 }], 86 silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 87 88 }];
coordinate-grid.js文件为直角坐标系的配置参数
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 27 grid=[{ 28 show:true, //是否显示 29 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 30 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 31 left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字 32 top:60, //组件离容器上侧的距离，百分比字符串或整型数字 33 right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字 34 bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字 35 "auto", //图例宽度 36 height:"auto", //图例高度 37 containLabel: true, //grid 区域是否包含坐标轴的刻度标签， 38 backgroundColor:"transparent", //标题背景色 39 borderColor:"#ccc", //边框颜色 40 borderWidth:0, //边框线宽 41 shadowColor:"red", //阴影颜色 42 shadowOffsetX:0, //阴影水平方向上的偏移距离 43 shadowOffsetY:0, //阴影垂直方向上的偏移距离 44 shadowBlur:10, //阴影的模糊大小 45 tooltip:{ //坐标系特定的 tooltip 设定 46 show:true, //是否显示提示框组件，包括提示框浮层和 axisPointer 47 trigger:"axis", //触发类型 none不触发 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 48 position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧， 49 formatter:"{b0}: {c0} 50 {b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 51 backgroundColor:"transparent", //标题背景色 52 borderColor:"#ccc", //边框颜色 53 borderWidth:0, //边框线宽 54 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 55 textStyle:mytextStyle, //文本样式 56 }, 57 }]; 58 xAxis=[ 59 { 60 show:true, //是否显示 x 轴 61 gridIndex:0, //x 轴所在的 grid 的索引，默认位于第一个 grid 62 position:"bottom",//x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧 63 offset:0,//X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用 64 type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 65 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据 66 name:'时间', //坐标轴名称 67 nameLocation:"end", //坐标轴名称显示位置。可选：'start','middle','end' 68 nameTextStyle:mytextStyle, //坐标轴名称的文字样式 69 nameGap:15, //坐标轴名称与轴线之间的距离 70 nameRotate:0,//坐标轴名字旋转，角度值 71 inverse:false, //是否是反向坐标轴 72 boundaryGap:true,//类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%'] 73 min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 74 max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 75 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 76 splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整 77 minInterval:0,//自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。 78 logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效 79 silent:false,//坐标轴是否是静态无法交互 80 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 81 axisLine:{ //坐标 轴线 82 show:true, //是否显示坐标轴轴线 83 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 84 lineStyle:mylineStyle 85 }, 86 axisTick :{ //坐标轴刻度相关设置 87 show:true,//是否显示坐标轴刻度。 88 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 89 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 90 inside:false,//坐标轴刻度是否朝内，默认朝外。 91 length:5, //坐标轴刻度的长度。 92 lineStyle:mylineStyle // 93 }, 94 axisLabel:{ //坐标轴刻度标签的相关设置 95 show:true,//是否显示 96 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 97 inside:false,//刻度标签是否朝内，默认朝外 98 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 99 margin:8,//刻度标签与轴线之间的距离 100 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 101 return value+"kg"; 102 }, 103 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 104 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 105 textStyle:mytextStyle 106 }, 107 splitLine:{ //坐标轴在 grid 区域中的分隔线。 108 show:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。 109 interval:"auto",//坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下： 110 lineStyle:mylineStyle 111 }, 112 splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。 113 interval:"auto", 114 show:false,//是否显示分隔区域 115 areaStyle:myareaStyle 116 }, 117 data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。 118 zlevel:0,//X 轴所有图形的 zlevel 值。 119 z:0,//X 轴组件的所有图形的z值 120 } 121 ]; 122 yAxis=xAxes; //y轴配置内容同x轴
coordinate-parallel.js文件为平行坐标系的配置参数
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 27 parallel=[{ 28 show:true, //是否显示 29 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 30 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 31 left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字 32 top:60, //组件离容器上侧的距离，百分比字符串或整型数字 33 right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字 34 bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字 35 "auto", //图例宽度 36 height:"auto", //图例高度 37 layout: "horizontal", //布局方式，可选值为：'horizontal'：水平排布各个坐标轴。'vertical'：竖直排布各个坐标轴。 38 axisExpandable:false, //是否允许点击展开折叠 axis。 39 axisExpandCenter:null, //初始时，以哪个轴为中心展开，这里给出轴的 index。没有默认值，需要手动指定。 40 axisExpandCount:0, //初始时，有多少个轴会处于展开状态。建议根据你的维度个数而手动指定。 41 axisExpandWidth:50, //在展开状态，轴的间距是多少，单位为像素。 42 axisExpandTriggerOn:"click", //'click'：鼠标点击的时候 expand。'mousemove'：鼠标悬浮的时候 expand。 43 parallelAxisDefault:{ //配置多个 parallelAxis 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 parallel.parallelAxisDefault 里 44 type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 45 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据 46 name:'时间', //坐标轴名称 47 nameLocation:"end", //坐标轴名称显示位置。可选：'start','middle','end' 48 nameTextStyle:mytextStyle, //坐标轴名称的文字样式 49 nameGap:15, //坐标轴名称与轴线之间的距离 50 nameRotate:0,//坐标轴名字旋转，角度值 51 inverse:false, //是否是反向坐标轴 52 boundaryGap:true,//类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%'] 53 min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 54 max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 55 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 56 splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整 57 minInterval:0,//自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。 58 logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效 59 silent:false,//坐标轴是否是静态无法交互 60 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 61 axisLine:{ //坐标 轴线 62 show:true, //是否显示坐标轴轴线 63 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 64 lineStyle:mylineStyle 65 }, 66 axisTick :{ //坐标轴刻度相关设置 67 show:true,//是否显示坐标轴刻度。 68 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 69 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 70 inside:false,//坐标轴刻度是否朝内，默认朝外。 71 length:5, //坐标轴刻度的长度。 72 lineStyle:mylineStyle // 73 }, 74 axisLabel:{ //坐标轴刻度标签的相关设置 75 show:true,//是否显示 76 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 77 inside:false,//刻度标签是否朝内，默认朝外 78 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 79 margin:8,//刻度标签与轴线之间的距离 80 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 81 return value+"kg"; 82 }, 83 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 84 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 85 textStyle:mytextStyle 86 }, 87 data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。 88 }, 89 90 }]; 91 92 parallelAxis=[ 93 { 94 dim:0, //坐标轴的维度序号。 95 parallelIndex:0, //用于定义『坐标轴』对应到哪个『坐标系』中。 96 realtime:true,//是否坐标轴刷选的时候，实时刷新视图。如果设为 false，则在刷选动作结束时候，才刷新视图。大数据量时，建议设置成 false，从而避免卡顿。 97 areaSelectStyle:{ //在坐标轴上可以进行框选，这里是一些框选的设置。 98 20,//框选范围的宽度。 99 borderWidth:1,//选框的边框宽度。 100 borderColor:'rgba(160,197,232)',//选框的边框颜色。 101 color: 'rgba(160,197,232)',//选框的填充色。 102 opacity:0.3,//选框的透明度。 103 }, 104 type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 105 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据 106 name:'时间', //坐标轴名称 107 nameLocation:"end", //坐标轴名称显示位置。可选：'start','middle','end' 108 nameTextStyle:mytextStyle, //坐标轴名称的文字样式 109 nameGap:15, //坐标轴名称与轴线之间的距离 110 nameRotate:0,//坐标轴名字旋转，角度值 111 inverse:false, //是否是反向坐标轴 112 boundaryGap:true,//类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%'] 113 min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 114 max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 115 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 116 splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整 117 minInterval:0,//自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。 118 logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效 119 silent:false,//坐标轴是否是静态无法交互 120 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 121 axisLine:{ //坐标 轴线 122 show:true, //是否显示坐标轴轴线 123 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 124 lineStyle:mylineStyle 125 }, 126 axisTick :{ //坐标轴刻度相关设置 127 show:true,//是否显示坐标轴刻度。 128 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 129 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 130 inside:false,//坐标轴刻度是否朝内，默认朝外。 131 length:5, //坐标轴刻度的长度。 132 lineStyle:mylineStyle // 133 }, 134 axisLabel:{ //坐标轴刻度标签的相关设置 135 show:true,//是否显示 136 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 137 inside:false,//刻度标签是否朝内，默认朝外 138 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 139 margin:8,//刻度标签与轴线之间的距离 140 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 141 return value+"kg"; 142 }, 143 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 144 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 145 textStyle:mytextStyle 146 }, 147 data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。 148 } 149 ];
coordinate-polar.js文件为极坐标系的配置参数
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 27 polar=[{ 28 show:true, //是否显示 29 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 30 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 31 center:['50%', '50%'], //极坐标系的中心（圆心）坐标，像素值或百分比均可。设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度 32 radius:['20%', '70%'], //数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。 33 tooltip:{ //坐标系特定的 tooltip 设定 34 show:true, //是否显示提示框组件，包括提示框浮层和 axisPointer 35 trigger:"axis", //触发类型 none不触发 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 36 position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧， 37 formatter:"{b0}: {c0} 38 {b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 39 backgroundColor:"transparent", //标题背景色 40 borderColor:"#ccc", //边框颜色 41 borderWidth:0, //边框线宽 42 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 43 textStyle:mytextStyle, //文本样式 44 }, 45 }]; 46 radiusAxis=[ 47 { 48 show:true, //是否显示 x 轴 49 polarIndex :0, //x 轴所在的 grid 的索引，默认位于第一个 grid 50 type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 51 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据 52 name:'时间', //坐标轴名称 53 nameLocation:"end", //坐标轴名称显示位置。可选：'start','middle','end' 54 nameTextStyle:mytextStyle, //坐标轴名称的文字样式 55 nameGap:15, //坐标轴名称与轴线之间的距离 56 nameRotate:0,//坐标轴名字旋转，角度值 57 inverse:false, //是否是反向坐标轴 58 boundaryGap:true,//类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%'] 59 min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 60 max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 61 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 62 splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整 63 minInterval:0,//自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。 64 logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效 65 silent:false,//坐标轴是否是静态无法交互 66 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 67 axisLine:{ //坐标 轴线 68 show:true, //是否显示坐标轴轴线 69 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 70 lineStyle:mylineStyle 71 }, 72 axisTick :{ //坐标轴刻度相关设置 73 show:true,//是否显示坐标轴刻度。 74 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 75 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 76 inside:false,//坐标轴刻度是否朝内，默认朝外。 77 length:5, //坐标轴刻度的长度。 78 lineStyle:mylineStyle // 79 }, 80 axisLabel:{ //坐标轴刻度标签的相关设置 81 show:true,//是否显示 82 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 83 inside:false,//刻度标签是否朝内，默认朝外 84 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 85 margin:8,//刻度标签与轴线之间的距离 86 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 87 return value+"kg"; 88 }, 89 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 90 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 91 textStyle:mytextStyle 92 }, 93 splitLine:{ //坐标轴在 grid 区域中的分隔线。 94 show:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。 95 interval:"auto",//坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下： 96 lineStyle:mylineStyle 97 }, 98 splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。 99 interval:"auto", 100 show:false,//是否显示分隔区域 101 areaStyle:myareaStyle 102 }, 103 data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。 104 zlevel:0,//X 轴所有图形的 zlevel 值。 105 z:0,//X 轴组件的所有图形的z值 106 } 107 ]; 108 angleAxis=[{ //y轴配置内容同x轴 109 polarIndex:0,//角度轴所在的极坐标系的索引，默认使用第一个极坐标系 110 startAngle:90,//起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 111 clockwise:true,//刻度增长是否按顺时针，默认顺时针。 112 type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 113 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据 114 inverse:false, //是否是反向坐标轴 115 boundaryGap:true,//类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%'] 116 min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 117 max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数 118 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 119 splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整 120 minInterval:0,//自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。 121 logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效 122 silent:false,//坐标轴是否是静态无法交互 123 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 124 axisLine:{ //坐标 轴线 125 show:true, //是否显示坐标轴轴线 126 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 127 lineStyle:mylineStyle 128 }, 129 axisTick :{ //坐标轴刻度相关设置 130 show:true,//是否显示坐标轴刻度。 131 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 132 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 133 inside:false,//坐标轴刻度是否朝内，默认朝外。 134 length:5, //坐标轴刻度的长度。 135 lineStyle:mylineStyle // 136 }, 137 axisLabel:{ //坐标轴刻度标签的相关设置 138 show:true,//是否显示 139 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 140 inside:false,//刻度标签是否朝内，默认朝外 141 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 142 margin:8,//刻度标签与轴线之间的距离 143 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 144 return value+"kg"; 145 }, 146 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 147 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 148 textStyle:mytextStyle 149 }, 150 splitLine:{ //坐标轴在 grid 区域中的分隔线。 151 show:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。 152 interval:"auto",//坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下： 153 lineStyle:mylineStyle 154 }, 155 splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。 156 interval:"auto", 157 show:false,//是否显示分隔区域 158 areaStyle:myareaStyle 159 }, 160 data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。 161 zlevel:0,//所属图形的 zlevel 值。 162 z:0,//组件的所属图形的z值 163 }];
coordinate-radar.js文件为雷达坐标系的配置参数
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 27 28 radar=[{ 29 center:['50%', '50%'],//中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。 30 radius:"75%",//数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。 31 startAngle:90,//起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 32 name:{ //雷达图每个指示器名称的配置项。 33 show:true, //是否显示指示器名称。 34 formatter:function (value, indicator) { //用回调函数，第一个参数是指示器名称，第二个参数是指示器配置项 35 return '【' + value + '】'; 36 }, 37 textStyle:mytextStyle 38 }, 39 nameGap:15,//指示器名称和指示器轴的距离 40 splitNumber:5,//指示器轴的分割段数 41 scale:false,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。 42 shape:"polygon",//雷达图绘制类型，支持 'polygon' 和 'circle'。 43 silent:false,//坐标轴是否是静态无法交互 44 triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件 45 axisLine:{ //坐标 轴线 46 show:true, //是否显示坐标轴轴线 47 onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 48 lineStyle:mylineStyle 49 }, 50 axisTick :{ //坐标轴刻度相关设置 51 show:true,//是否显示坐标轴刻度。 52 alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 53 interval:auto,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 54 inside:false,//坐标轴刻度是否朝内，默认朝外。 55 length:5, //坐标轴刻度的长度。 56 lineStyle:mylineStyle // 57 }, 58 axisLabel:{ //坐标轴刻度标签的相关设置 59 show:true,//是否显示 60 interval:"auto",//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推 61 inside:false,//刻度标签是否朝内，默认朝外 62 rotate:0,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度 63 margin:8,//刻度标签与轴线之间的距离 64 formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 65 return value+"kg"; 66 }, 67 showMinLabel:null,//是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label） 68 showMaxLabel:null,//是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label） 69 textStyle:mytextStyle 70 }, 71 splitLine:{ //坐标轴在 grid 区域中的分隔线。 72 show:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。 73 interval:"auto",//坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下： 74 lineStyle:mylineStyle 75 }, 76 splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。 77 interval:"auto", 78 show:false,//是否显示分隔区域 79 areaStyle:myareaStyle 80 }, 81 indicator: [ //雷达图的指示器，用来指定雷达图中的多个变量（维度） 82 { name: '销售（sales）', max: 6500}, 83 { name: '管理（Administration）', max: 16000}, 84 { name: '信息技术（Information Techology）', max: 30000}, 85 { name: '客服（Customer Support）', max: 38000}, 86 { name: '研发（Development）', max: 52000}, 87 { name: '市场（Marketing）', max: 25000} 88 ], 89 zlevel:0,//所属图形的 zlevel 值。 90 z:0,//组件的所属图形的z值 91 }];
index.js文件为图表颜色、背景、标题、提示框、工具框、图例、缩放设置、视觉映射等内容
1 /*chart 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 2 axis 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 3 xAxis 直角坐标系中的横轴，通常并默认为类目轴 4 yAxis 直角坐标系中的纵轴，通常并默认为数值轴 5 grid 直角坐标系中除坐标轴外的绘图网格 6 legend 图例，表述数据和图形的关联 7 dataRange 值域选择，常用于展现地域数据时选择值域范围 8 dataZoom 数据区域缩放，常用于展现大数据时选择可视范围 9 toolbox 辅助工具箱，辅助功能，如添加标线，框选缩放等 10 tooltip 气泡提示框，常用于展现更详细的数据 11 timeline 时间轴，常用于展现同一组数据在时间维度上的多份数据 12 series 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 13 14 15 line 折线图，堆积折线图，区域图，堆积区域图。 16 bar 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 17 scatter 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 18 k K线图，蜡烛图。常用于展现股票交易数据。 19 pie 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 20 radar 雷达图，填充雷达图。高维度数据展现的常用图表。 21 chord 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 22 force 力导布局图。常用于展现复杂关系网络聚类布局。 23 map 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。*/ 24 color=['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];//调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色 25 backgroundColor="#000000"; //背景色，默认无背景。 'rgb(128, 128, 128)'， 'rgba(128, 128, 128, 0.5)'，除了纯色之外颜色也支持渐变色和纹理填充 26 mytextStyle={ 27 color:"#333",//文字颜色 28 fontStyle:"normal",//italic斜体 oblique倾斜 29 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 30 fontFamily:"sans-serif", //字体系列 31 fontSize:18, //字体大小 32 }; 33 34 title={ 35 show:true, //是否显示 36 text:"大标题", //大标题 37 subtext:"小标题", //小标题 38 sublink:"https://www.baidu.com", //小标题链接 39 target:"blank", //'self' 当前窗口打开，'blank' 新窗口打开 40 subtarget:"blank", //小标题打开链接的窗口 41 textAlign:"center", //文本水平对齐 42 textBaseline:"top", //文本垂直对齐 43 textStyle:mytextStyle, //标题样式 44 subtextStyle:mytextStyle, //小标题样式 45 padding:5, //标题内边距 5 [5, 10] [5,10,5,10] 46 itemGap:10, //大小标题间距 47 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 48 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 49 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 50 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 51 right:"auto", //组件离容器右侧的距离,'20%' 52 bottom:"auto", //组件离容器下侧的距离,'20%' 53 backgroundColor:"transparent", //标题背景色 54 borderColor:"#ccc", //边框颜色 55 borderWidth:0, //边框线宽 56 shadowColor:"red", //阴影颜色 57 shadowOffsetX:0, //阴影水平方向上的偏移距离 58 shadowOffsetY:0, //阴影垂直方向上的偏移距离 59 shadowBlur:10, //阴影的模糊大小 60 }; 61 62 tooltip ={ //提示框组件 63 trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 64 triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发 65 showContent:true, //是否显示提示框浮层 66 alwaysShowContent:true, //是否永远显示提示框内容 67 showDelay:0,//浮层显示的延迟，单位为 ms 68 hideDelay:100,//浮层隐藏的延迟，单位为 ms 69 enterable:false,//鼠标是否可进入提示框浮层中 70 confine:false, //是否将 tooltip 框限制在图表的区域内 71 transitionDuration:0.4,//提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动 72 position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧， 73 formatter:"{b0}: {c0} 74 {b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 75 backgroundColor:"transparent", //标题背景色 76 borderColor:"#ccc", //边框颜色 77 borderWidth:0, //边框线宽 78 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 79 textStyle:mytextStyle, //文本样式 80 }; 81 82 toolbox={ 83 show : true,//是否显示工具栏组件 84 orient:"horizontal",//工具栏 icon 的布局朝向'horizontal' 'vertical' 85 itemSize:15,//工具栏 icon 的大小 86 itemGap:10,//工具栏 icon 每项之间的间隔 87 showTitle:true,//是否在鼠标 hover 的时候显示每个工具 icon 的标题 88 feature : { 89 mark : { // '辅助线开关' 90 show: true 91 }, 92 dataView : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新 93 show: true, //是否显示该工具。 94 title:"数据视图", // 95 readOnly: false,//是否不可编辑（只读） 96 lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新'] 97 backgroundColor:"#fff", //数据视图浮层背景色。 98 textareaColor:"#fff", //数据视图浮层文本输入区背景色 99 textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色 100 textColor:"#000",//文本颜色。 101 buttonColor:"#c23531",//按钮颜色。 102 buttonTextColor:"#fff",//按钮文本颜色。 103 }, 104 magicType: { //动态类型切换 105 show: true, 106 title:"切换", //各个类型的标题文本，可以分别配置。 107 type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式） 108 }, 109 restore : { //配置项还原。 110 show: true, //是否显示该工具。 111 title:"还原", // 112 }, 113 saveAsImage : { //保存为图片。 114 show: true, //是否显示该工具。 115 type:"png", //保存的图片格式。支持 'png' 和 'jpeg'。 116 name:"pic1", //保存的文件名称，默认使用 title.text 作为名称 117 backgroundColor:"#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色 118 title:"保存为图片", 119 pixelRatio:1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2 120 }, 121 dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放 122 show: true, //是否显示该工具。 123 title:"缩放", //缩放和还原的标题文本 124 xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴 125 yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴 126 }, 127 }, 128 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 129 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 130 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 131 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 132 right:"auto", //组件离容器右侧的距离,'20%' 133 bottom:"auto", //组件离容器下侧的距离,'20%' 134 "auto", //图例宽度 135 height:"auto", //图例高度 136 }; 137 138 139 140 legend={ 141 show:true, //是否显示 142 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 143 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 144 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 145 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 146 right:"auto", //组件离容器右侧的距离,'20%' 147 bottom:"auto", //组件离容器下侧的距离,'20%' 148 "auto", //图例宽度 149 height:"auto", //图例高度 150 orient:"horizontal", //图例排列方向 151 align:"auto", //图例标记和文本的对齐,left,right 152 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 153 itemGap:10, //图例每项之间的间隔 154 itemWidth:25, //图例标记的图形宽度 155 itemHeight:14, //图例标记的图形高度 156 formatter:function (name) { //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name} 157 return 'Legend ' + name; 158 }, 159 selectedMode:"single", //图例选择的模式,true开启,false关闭,single单选,multiple多选 160 inactiveColor:"#ccc", //图例关闭时的颜色 161 textStyle:mytextStyle, //文本样式 162 data:['类别1', '类别2', '类别3'], //series中根据名称区分 163 backgroundColor:"transparent", //标题背景色 164 borderColor:"#ccc", //边框颜色 165 borderWidth:0, //边框线宽 166 shadowColor:"red", //阴影颜色 167 shadowOffsetX:0, //阴影水平方向上的偏移距离 168 shadowOffsetY:0, //阴影垂直方向上的偏移距离 169 shadowBlur:10, //阴影的模糊大小 170 }; 171 172 dataZoom=[ //区域缩放 173 { 174 id: 'dataZoomX', 175 show:true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。 176 backgroundColor:"rgba(47,69,84,0)",//组件的背景颜色 177 type: 'slider', //slider表示有滑动块的，inside表示内置的 178 dataBackground:{ //数据阴影的样式。 179 lineStyle:mylineStyle, //阴影的线条样式 180 areaStyle:myareaStyle, //阴影的填充样式 181 }, 182 fillerColor:"rgba(167,183,204,0.4)",//选中范围的填充颜色。 183 borderColor:"#ddd",//边框颜色。 184 filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。 185 //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。 186 //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。 187 //'none': 不过滤数据，只改变数轴范围。 188 xAxisIndex:0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 189 yAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 190 radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 191 angleAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 192 start: 30, //数据窗口范围的起始百分比,表示30% 193 end: 70, //数据窗口范围的结束百分比,表示70% 194 startValue:10,//数据窗口范围的起始数值 195 endValue:100,//数据窗口范围的结束数值。 196 orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。 197 zoomLock:false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。 198 throttle:100,//设置触发视图刷新的频率。单位为毫秒（ms）。 199 zoomOnMouseWheel:true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。 200 moveOnMouseMove:true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。 201 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 202 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 203 right:"auto", //组件离容器右侧的距离,'20%' 204 bottom:"auto", //组件离容器下侧的距离,'20%' 205 206 }, 207 { 208 id: 'dataZoomY', 209 type: 'inside', 210 filterMode: 'empty', 211 disabled:false,//是否停止组件的功能。 212 xAxisIndex:0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 213 yAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 214 radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 215 angleAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 216 start: 30, //数据窗口范围的起始百分比,表示30% 217 end: 70, //数据窗口范围的结束百分比,表示70% 218 startValue:10,//数据窗口范围的起始数值 219 endValue:100,//数据窗口范围的结束数值。 220 orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。 221 zoomLock:false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。 222 throttle:100,//设置触发视图刷新的频率。单位为毫秒（ms）。 223 zoomOnMouseWheel:true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。 224 moveOnMouseMove:true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。 225 } 226 ]; 227 228 visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 229 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。 230 { 231 show:true,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在 232 type: 'continuous', // 定义为连续型 viusalMap 233 min:10,//指定 visualMapContinuous 组件的允许的最小值 234 max:100,//指定 visualMapContinuous 组件的允许的最大值 235 range:[15, 40],//指定手柄对应数值的位置。range 应在 min max 范围内 236 calculable:true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 237 realtime:true,//拖拽时，是否实时更新 238 inverse:false,//是否反转 visualMap 组件 239 precision:0,//数据展示的小数精度，默认为0，无小数点 240 itemWidth:20,//图形的宽度，即长条的宽度。 241 itemHeight:140,//图形的高度，即长条的高度。 242 align:"auto",//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 243 text:['High', 'Low'],//两端的文本 244 textGap:10,//两端文字主体之间的距离，单位为px 245 dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 246 seriesIndex:1,//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列 247 hoverLink:true,//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮 248 inRange:{ //定义 在选中范围中 的视觉元素 249 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], 250 symbolSize: [30, 100] 251 }, 252 outOfRange:{ //定义 在选中范围外 的视觉元素。 253 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], 254 symbolSize: [30, 100] 255 }, 256 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 257 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 258 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 259 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 260 right:"auto", //组件离容器右侧的距离,'20%' 261 bottom:"auto", //组件离容器下侧的距离,'20%' 262 orient:"vertical", //图例排列方向 263 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 264 backgroundColor:"transparent", //标题背景色 265 borderColor:"#ccc", //边框颜色 266 borderWidth:0, //边框线宽 267 textStyle:mytextStyle, //文本样式 268 formatter: function (value) { //标签的格式化工具。 269 return 'aaaa' + value; // 范围标签显示内容。 270 } 271 }, 272 { 273 show:true,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在 274 type: 'piecewise', // 定义为分段型 visualMap 275 splitNumber:5,//对于连续型数据，自动平均切分成几段。默认为5段 276 pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式 277 {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。 278 {min: 900, max: 1500}, 279 {min: 310, max: 1000}, 280 {min: 200, max: 300}, 281 {min: 10, max: 200, label: '10 到 200（自定义label）'}, 282 {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。 283 {max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。 284 ], 285 categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集 286 min:10,//指定 visualMapContinuous 组件的允许的最小值 287 max:100,//指定 visualMapContinuous 组件的允许的最大值 288 minOpen:true,//界面上会额外多出一个『< min』的选块 289 maxOpen:true, //界面上会额外多出一个『> max』的选块。 290 selectedMode:"multiple", //选择模式，可以是：'multiple'（多选）。'single'（单选）。 291 inverse:false,//是否反转 visualMap 组件 292 precision:0,//数据展示的小数精度，默认为0，无小数点 293 itemWidth:20,//图形的宽度，即长条的宽度。 294 itemHeight:140,//图形的高度，即长条的高度。 295 align:"auto",//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 296 text:['High', 'Low'],//两端的文本 297 textGap:10,//两端文字主体之间的距离，单位为px 298 showLabel:true,//是否显示每项的文本标签 299 itemGap:10,//每两个图元之间的间隔距离，单位为px 300 itemSymbol:"roundRect",//默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 301 dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 302 seriesIndex:1,//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列 303 hoverLink:true,//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮 304 inRange:{ //定义 在选中范围中 的视觉元素 305 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], 306 symbolSize: [30, 100] 307 }, 308 outOfRange:{ //定义 在选中范围外 的视觉元素。 309 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], 310 symbolSize: [30, 100] 311 }, 312 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 313 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 314 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 315 top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 316 right:"auto", //组件离容器右侧的距离,'20%' 317 bottom:"auto", //组件离容器下侧的距离,'20%' 318 orient:"vertical", //图例排列方向 319 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] 320 backgroundColor:"transparent", //标题背景色 321 borderColor:"#ccc", //边框颜色 322 borderWidth:0, //边框线宽 323 textStyle:mytextStyle, //文本样式 324 formatter: function (value) { //标签的格式化工具。 325 return 'aaaa' + value; // 范围标签显示内容。 326 } 327 } 328 ]; 329
series-bar.js文件为柱形图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 //===================================================bar=================================================== 87 { 88 type:"bar", // 89 zlevel:0,//柱状图所有图形的 zlevel 值。 90 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 91 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 92 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 93 legendHoverLink:true,//是否启用图例 hover 时的联动高亮。 94 coordinateSystem:"cartesian2d",////'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系 95 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 96 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 97 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 98 normal:mylabel, 99 emphasis:mylabel 100 }, 101 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 102 normal:myitemStyle, 103 emphasis:myitemStyle, 104 }, 105 stack:null,//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。 106 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 107 barGap:"30%",//柱间距离，可设固定值（如 20）或者百分比（如 '30%'，表示柱子宽度的 30%）。 108 barCategoryGap:"20%",//类目间柱形距离，默认为类目间距的20%，可设固定值 109 encode: { //可以定义 data 的哪个维度被编码成什么 110 x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。 111 y: 2, // 表示维度 2 映射到 y 轴。 112 tooltip: [3, 2, 4], // 表示维度 3、2、4 会在 tooltip 中显示。 113 label: 3 // 表示 label 使用维度 3。 114 }, 115 data: [ //每一列称为一个『维度』。维度下标从0开始 116 [12, 44, 55, 66, 2], 117 [23, 6, 16, 23, 1], 118 [12, 44, 55, 66, 2], 119 [23, 6, 16, 23, 1], 120 [12, 44, 55, 66, 2], 121 [23, 6, 16, 23, 1], 122 ], 123 markPoint:mypoint.data=[ 124 {name: '最大值', type: 'max'}, 125 {name: '某个坐标', coord: [10, 20]}, 126 {name: '固定 x 像素位置', yAxis: 10, x: '90%'}, 127 {name: '某个屏幕坐标', x: 100, y: 100}], 128 markLine:myline.data=[ 129 {name: '平均线',type: 'average'}, // 支持 'average', 'min', 'max' 130 {name: 'Y 轴值为 100 的水平线',yAxis: 100}, 131 [ 132 {name: '最小值到最大值', type: 'min'}, // 起点和终点的项会共用一个 name 133 {type: 'max'} 134 ], 135 [ 136 {name: '两个坐标之间的标线',coord: [10, 20]}, 137 {coord: [20, 30]} 138 ], 139 [ 140 {yAxis: 'max',x: '90%'},// 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线 141 {type: 'max'} 142 ], 143 [ 144 { name: '两个屏幕坐标之间的标线',x: 100,y: 100}, 145 {x: 500,y: 200} 146 ] 147 ], 148 markArea:myarea.data=[ 149 [ 150 {name: '平均值到最大值',type: 'average'}, 151 {type: 'max'} 152 ], 153 154 [ 155 {name: '两个坐标之间的标域',coord: [10, 20]}, 156 {coord: [20, 30]} 157 ], 158 [ 159 {name: '60分到80分',yAxis: 60}, 160 {yAxis: 80} 161 ], 162 [ 163 {name: '所有数据范围区间',coord: ['min', 'min']}, 164 {coord: ['max', 'max']} 165 ], 166 [ 167 {name: '两个屏幕坐标之间的标域',x: 100,y: 100}, 168 {x: '90%',y: '10%'} 169 ] 170 ], 171 tooltip:tooltip, //index.js中定义的 172 }, 173 174 ];
series-effectscatter.js文件为特效散点图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================effectScatter ================================================== 88 { 89 type:"effectScatter", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 93 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 94 legendHoverLink:true,//是否启用图例 hover 时的联动高亮。 95 hoverAnimation:true,//是否开启鼠标 hover 的提示动画效果。 96 effectType:"ripple",//特效类型，目前只支持涟漪特效'ripple'。 97 showEffectOn:"render",//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。 98 rippleEffect:{ //涟漪特效相关配置。 99 period:4,//动画的时间。 100 scale:2.5,//动画中波纹的最大缩放比例。 101 brushType:'fill',//波纹的绘制方式，可选 'stroke' 和 'fill'。 102 }, 103 coordinateSystem:"geo",//'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系 104 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 105 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 106 polarIndex:0,//使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。 107 geoIndex:0,//使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。 108 calendarIndex:0,//使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。 109 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 110 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 111 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 112 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 113 large:false,//是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。 114 largeThreshold:2000,//开启绘制优化的阈值。 115 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 116 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 117 normal:mylabel, 118 emphasis:mylabel 119 }, 120 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 121 normal:myitemStyle, 122 emphasis:myitemStyle, 123 }, 124 encode: { //可以定义 data 的哪个维度被编码成什么 125 x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。 126 y: 2, // 表示维度 2 映射到 y 轴。 127 tooltip: [3, 2, 4], // 表示维度 3、2、4 会在 tooltip 中显示。 128 label: 3 // 表示 label 使用维度 3。 129 }, 130 data: [ //每一列称为一个『维度』。维度下标从0开始 131 [12, 44, 55, 66, 2], 132 [23, 6, 16, 23, 1], 133 [12, 44, 55, 66, 2], 134 [23, 6, 16, 23, 1], 135 [12, 44, 55, 66, 2], 136 [23, 6, 16, 23, 1], 137 ], 138 //markPoint:同bar 139 //markLine:同bar 140 //markArea:同bar 141 tooltip:tooltip //index,js 142 }, 143 144 ];
series-graph.js文件为关系图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================graph ================================================== 88 { 89 type:"graph", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字 93 top:60, //组件离容器上侧的距离，百分比字符串或整型数字 94 right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字 95 bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字 96 "auto", //图例宽度 97 height:"auto", //图例高度 98 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 99 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 100 legendHoverLink:true,//是否启用图例 hover 时的联动高亮。 101 hoverAnimation:true,//是否开启鼠标 hover 节点的提示动画效果。 102 coordinateSystem:null,//null无坐标系，'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系，'polar'使用极坐标系 103 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 104 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 105 polarIndex:0,//使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。 106 geoIndex:0,//使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。 107 calendarIndex:0,//使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。 108 layout:'none',//'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置.'circular' 采用环形布局，'force' 采用力引导布局。 109 //circular:{}, //环形布局相关配置 110 //force:{},//力引导布局相关的配置项 111 roam:false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 112 nodeScaleRatio:0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放 113 draggable:false,//节点是否可拖拽，只在使用力引导布局的时候有用。 114 focusNodeAdjacency:true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 115 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 116 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 117 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 118 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 119 edgeSymbol:['circle', 'arrow'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头 120 edgeSymbolSize:[5,2],//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 121 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 122 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 123 normal:mylabel, 124 emphasis:mylabel 125 }, 126 edgeLabel:{ 127 normal:mylabel, 128 emphasis:mylabel 129 }, 130 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 131 normal:myitemStyle, 132 emphasis:myitemStyle, 133 }, 134 lineStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 135 normal:mylineStyle, 136 emphasis:mylineStyle, 137 }, 138 categories:[ //节点分类的类目，可选。 139 { 140 name:"类目名称",//类目名称 141 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 142 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 143 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 144 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 145 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 146 normal:mylabel, 147 emphasis:mylabel 148 }, 149 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 150 normal:myitemStyle, 151 emphasis:myitemStyle, 152 }, 153 } 154 ], 155 data: [ //data就是node 156 { 157 name: '1', 158 x: 10, 159 y: 10, 160 value: 10 161 }, { 162 name: '2', 163 x: 100, 164 y: 100, 165 value: 20, 166 symbolSize: 20, 167 itemStyle: { 168 normal: { 169 color: 'red' 170 } 171 } 172 } 173 ], 174 links:[ //links就是edges 175 { 176 source: 'n1', 177 target: 'n2' 178 }, { 179 source: 'n2', 180 target: 'n3' 181 } 182 ], 183 //markPoint:同bar 184 //markLine:同bar 185 //markArea:同bar 186 tooltip:tooltip //index,js 187 }, 188 189 ];
series-heatmap.js文件为热力图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================heatmap ================================================== 88 { 89 type:"heatmap", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 93 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 94 coordinateSystem:"geo",//'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系 95 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 96 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 97 polarIndex:0,//使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。 98 geoIndex:0,//使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。 99 calendarIndex:0,//使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。 100 blurSize:20,//每个点模糊的大小，在地理坐标系(coordinateSystem: 'geo')上有效。 101 minOpacity:0,//最小的透明度，在地理坐标系(coordinateSystem: 'geo')上有效。 102 maxOpacity:1,//最大的透明度，在地理坐标系(coordinateSystem: 'geo')上有效。 103 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 104 data: [ //每一列称为一个『维度』。维度下标从0开始 105 [12, 44, 55, 66, 2], 106 [23, 6, 16, 23, 1], 107 [12, 44, 55, 66, 2], 108 [23, 6, 16, 23, 1], 109 [12, 44, 55, 66, 2], 110 [23, 6, 16, 23, 1], 111 ], 112 //markPoint:同bar 113 //markLine:同bar 114 //markArea:同bar 115 tooltip:tooltip //index,js 116 }, 117 118 119 ];
series-lines.js文件为线图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================lines ================================================== 88 { 89 type:"lines", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 93 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 94 coordinateSystem:"geo",////'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系 95 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 96 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 97 geoIndex:0,//使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。 98 polyline:false,//是否是多段线。默认为 false，只能用于绘制只有两个端点的线段，线段可以通过 lineStyle.normal.curveness 配置为曲线。 99 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 100 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 101 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 102 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 103 large:false,//是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。 104 largeThreshold:2000,//开启绘制优化的阈值。 105 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 106 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 107 normal:mylabel, 108 emphasis:mylabel 109 }, 110 lineStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 111 normal:mylineStyle, 112 emphasis:mylineStyle, 113 }, 114 data: [ 115 { 116 coords: [[120, 66], [122, 67]], 117 lineStyle: {normal: {}} 118 } 119 ], 120 //markPoint:同bar 121 //markLine:同bar 122 //markArea:同bar 123 tooltip:tooltip //index,js 124 }, 125 126 127 ];
series-map.js文件为地图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================map ================================================== 88 { 89 type:"map", // 90 map:"china", //地图类型。world世界地图，china中国地图 91 roam:false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 92 center:[115.97, 29.71], //当前视角的中心点，用经纬度表示 93 aspectScale:0.75, //这个参数用于 scale 地图的长宽比。 94 boundingCoords: [[-180, 90], [180, -90]], //二维数组，定义定位的左上角以及右下角分别所对应的经纬度 95 zoom:1, //当前视角的缩放比例 96 scaleLimit:{ //所属组件的z分层，z值小的图形会被z值大的图形覆盖 97 min:1, //最小的缩放值 98 max:1, //最大的缩放值 99 }, 100 nameMap:{ //自定义地区的名称映射 101 'China' : '中国' 102 }, 103 selectedMode: false , //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。 104 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等 105 normal:{ 106 show:false, //是否在普通状态下显示标签。 107 textStyle:mytextStyle, //普通状态下的标签文本样式。 108 }, 109 emphasis:{ 110 show:false, //是否在高亮状态下显示标签。 111 textStyle:mytextStyle //高亮状态下的标签文本样式。 112 } 113 }, 114 itemStyle:{ //地图区域的多边形 图形样式 115 normal:myitemStyle, 116 emphasis:myitemStyle 117 }, 118 zlevel:0, //所属图形的 zlevel 值。 119 z:2, //所属图形的 z 值。 120 left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字 121 top:60, //组件离容器上侧的距离，百分比字符串或整型数字 122 right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字 123 bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字 124 layoutCenter:['30%', '30%'], //地图中心在屏幕中的位置 125 layoutSize:100, //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。 126 mapValueCalculation:"sum",//多个拥有相同地图类型的系列会使用同一个地图展现，如果多个系列都在同一个区域有值，目前有：'sum' 取和。'average' 取平均值。'max' 取最大值。'min' 取最小值。 127 showLegendSymbol:true,//在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。 128 silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 129 data: [ 130 {name: '数据1',value: 10}, 131 {name: '数据2',value: 20} 132 ], 133 //markPoint:同bar 134 //markLine:同bar 135 //markArea:同bar 136 tooltip:tooltip //index,js 137 }, 138 ];
series-pie.js文件为饼图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 88 //===================================================pie=================================================== 89 { 90 type:"pie", // 91 zlevel:0,//柱状图所有图形的 zlevel 值。 92 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 93 center:['50%', '50%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。 94 radius:[0, '75%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。可以将内半径设大显示成圆环图（Donut chart）。 95 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 96 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 97 legendHoverLink:true,//是否启用图例 hover 时的联动高亮。 98 hoverAnimation:true,//是否开启 hover 在扇区上的放大动画效果。 99 selectedMode:false,//选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。 100 selectedOffset:10,//选中扇区的偏移距离。 101 clockwise:true,//饼图的扇区是否是顺时针排布。 102 startAngle:90,//起始角度，支持范围[0, 360]。 103 minAngle:0,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。 104 roseType:false,//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。'area' 所有扇区圆心角相同，仅通过半径展现数据大小。 105 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 106 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 107 normal:mylabel, 108 emphasis:mylabel 109 }, 110 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 111 normal:myitemStyle, 112 emphasis:myitemStyle, 113 }, 114 data:[ 115 {name: '数据1', value: 10}, 116 {name: '数据2', value: 20} 117 ], 118 //markPoint:同bar 119 //markLine:同bar 120 //markArea:同bar 121 tooltip:tooltip //index,js 122 }, 123 124 ];
series-radar.js文件为雷达图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================radar ================================================== 88 { 89 type:"radar", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 93 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 94 radarIndex:0,//雷达图所使用的 radar 组件的 index。 95 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 96 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 97 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 98 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 99 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 100 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 101 normal:mylabel, 102 emphasis:mylabel 103 }, 104 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 105 normal:myitemStyle, 106 emphasis:myitemStyle, 107 }, 108 lineStyle:{ 109 normal:mylineStyle, 110 emphasis:mylineStyle, 111 }, 112 areaStyle:{ 113 normal:myareaStyle, 114 emphasis:myareaStyle, 115 }, 116 data: [ //每一列称为一个『维度』。维度下标从0开始 117 { 118 value : [4300, 10000, 28000, 35000, 50000, 19000], 119 name : '预算分配（Allocated Budget）' 120 }, 121 { 122 value : [5000, 14000, 28000, 31000, 42000, 21000], 123 name : '实际开销（Actual Spending）' 124 } 125 ], 126 tooltip:tooltip //index,js 127 }, 128 129 ];
series-scatter.js文件为散点图的参数配置
1 mytextStyle={ 2 color:"#333",//文字颜色 3 fontStyle:"normal",//italic斜体 oblique倾斜 4 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... 5 fontFamily:"sans-serif", //字体系列 6 fontSize:18, //字体大小 7 }; 8 mylineStyle={ 9 color:"#333",//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充 10 shadowColor:"red",//阴影颜色 11 shadowOffsetX:0,//阴影水平方向上的偏移距离。 12 shadowOffsetY:0,//阴影垂直方向上的偏移距离 13 shadowBlur:10, //图形阴影的模糊大小。 14 type:"solid", //坐标轴线线的类型，solid，dashed，dotted 15 1, //坐标轴线线宽 16 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 17 }; 18 myareaStyle={ 19 color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 20 shadowColor:"red",//阴影颜色 21 shadowOffsetX:0,//阴影水平方向上的偏移距离。 22 shadowOffsetY:0,//阴影垂直方向上的偏移距离 23 shadowBlur:10, //图形阴影的模糊大小。 24 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 25 }; 26 myitemStyle={ 27 color:"red", //颜色 28 borderColor:"#000", //边框颜色 29 borderWidth:0, //柱条的描边宽度，默认不描边。 30 borderType:"solid",//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。 31 barBorderRadius:0,//柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。 32 shadowBlur:10,//图形阴影的模糊大小。 33 shadowColor:"#000",//阴影颜色 34 shadowOffsetX:0,//阴影水平方向上的偏移距离。 35 shadowOffsetY:0,//阴影垂直方向上的偏移距离。 36 opacity:1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 37 }; 38 mylabel={ 39 show:false,//是否显示标签。 40 position:"inside",//标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 41 offset:[30, 40],//是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 42 formatter:'{b}: {c}',//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 43 textStyle:mytextStyle 44 }; 45 mypoint={ 46 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 47 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 48 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 49 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 50 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 51 label:{ 52 normal:mylabel, 53 emphasis:mylabel 54 }, 55 itemStyle:{ 56 normal:myitemStyle, 57 emphasis:myitemStyle 58 } 59 }; 60 myline={ 61 symbol:["pin","circle"],//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 62 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 63 precision:2,//标线数值的精度，在显示平均值线的时候有用。 64 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 65 label:{ 66 normal:mylabel, 67 emphasis:mylabel 68 }, 69 lineStyle:{ 70 normal:mylineStyle, 71 emphasis:mylineStyle 72 } 73 }; 74 myarea={ 75 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 76 label:{ 77 normal:mylabel, 78 emphasis:mylabel 79 }, 80 itemStyle:{ 81 normal:myitemStyle, 82 emphasis:myitemStyle 83 } 84 }; 85 series=[ 86 87 //==================================================scatter ================================================== 88 { 89 type:"scatter", // 90 zlevel:0,//柱状图所有图形的 zlevel 值。 91 z:2,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 92 silent:false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 93 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 94 legendHoverLink:true,//是否启用图例 hover 时的联动高亮。 95 hoverAnimation:true,//是否开启鼠标 hover 的提示动画效果。 96 coordinateSystem:"geo",////'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系 97 xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 98 yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 99 polarIndex:0,//使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。 100 geoIndex:0,//使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。 101 calendarIndex:0,//使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。 102 symbol:"pin",//图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 103 symbolSize:50,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 104 symbolRotate:0,//标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。 105 symbolOffset:[0,0],//标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置 106 large:false,//是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。 107 largeThreshold:2000,//开启绘制优化的阈值。 108 cursor:"pointer",//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。 109 label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等， 110 normal:mylabel, 111 emphasis:mylabel 112 }, 113 itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 114 normal:myitemStyle, 115 emphasis:myitemStyle, 116 }, 117 encode: { //可以定义 data 的哪个维度被编码成什么 118 x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。 119 y: 2, // 表示维度 2 映射到 y 轴。 120 tooltip: [3, 2, 4], // 表示维度 3、2、4 会在 tooltip 中显示。 121 label: 3 // 表示 label 使用维度 3。 122 }, 123 data: [ //每一列称为一个『维度』。维度下标从0开始 124 [12, 44, 55, 66, 2], 125 [23, 6, 16, 23, 1], 126 [12, 44, 55, 66, 2], 127 [23, 6, 16, 23, 1], 128 [12, 44, 55, 66, 2], 129 [23, 6, 16, 23, 1], 130 ], 131 //markPoint:同bar 132 //markLine:同bar 133 //markArea:同bar 134 tooltip:tooltip //index,js 135 }, 136 137 ];