码迷，mamicode.com
首页 > 其他好文 > 详细

Echarts全解注释

时间：2019-02-24 01:12:41      阅读：192      评论：0      收藏：0      [点我收藏+]

标签：小数点   类别   cti   exp   TBase   还原   循环   额外   时序   

 

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     width: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     width: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     width:"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     width: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     width:"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             width: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     width: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     width: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     width:"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     width:"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     width: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     width: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     width: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     width:"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     width: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     width: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     width: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     width: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     width: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     width: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 ];

 

Echarts全解注释

标签：小数点   类别   cti   exp   TBase   还原   循环   额外   时序   

原文地址：https://www.cnblogs.com/zhenguo-chen/p/10424818.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！