option = {
// 全图默认背景
backgroundColor: '#87cefa',
// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
// 图表标题
title: {
show:true, //显示策略，默认值true,可选：true(显示)，false(隐藏)
text:"dfg", //主标题
link:"", //主标题文本超链接地址。
target:"", //指定主标题打开超链接是否是新建窗口，可选self,blank
subtext:"副标题", //副标题
sublink:"", //副标题文本超链接地址。
subtarget:"", //指定副标题打开超链接是否是新建窗口，可选self,blank
x: 'center', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
y: '50px', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: '#ff7f50',
borderColor: '#da70d6', // 标题边框颜色
borderWidth: 5, // 标题边框线宽，单位px，默认为0（无边框）
padding: 20, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 50, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 55,
fontWeight: 'bolder',
color: '#6495ed' // 主标题文字颜色
},
subtextStyle: {
fontSize: 35,
fontWeight: 'bolder',
color: '#32cd32' // 副标题文字颜色
},
zlevel:0,
z:6
},
//图例
legend: {
show:false, //是否显示图例，默认是true
orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal'(水平) ¦ 'vertical'(垂直))
x: 'left', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#b8860b', // 图例边框颜色
borderWidth: 5, // 图例边框线宽，单位px，默认为0（无边框）
padding: 30, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 30, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 60, // 图例图形宽度
itemHeight: 34, // 图例图形高度
textStyle: {
color: '#3cb371' // 图例文字全局颜色
},
selected:{ //默认展示选中所有图标，可通过selected来设置哪些不需要选中
'Direct':false,
'Email':false,
'Union Ads':false
},
data: [
{
name: 'Direct', //每一个name的值,对应series中的每个对象的name值
icon: 'circle',//'image://../asset/ico/favicon.png',//标志图形类型，默认自动选择（8种 类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
textStyle: {fontWeight: 'bold', color: 'green'} //这里的textStyle可以单独设置每个图例的样式
},
{
name: 'Email',
icon: 'circle',//'image://../asset/ico/favicon.png',//标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
textStyle: {fontWeight: 'bold', color: 'green'}
}] //默认是series中所有对象的name属性值的集合
},
// 区域缩放控制器
dataZoom: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
//网格
grid:[{
id: '1', //组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
zlevel:0, //zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖,z相比zlevel优先级更低，而且不会创建新的 Canvas
show:true, //是否显示直角坐标系网格-----------值:true?false
left:"10%", //组件离容器左侧的距离,百分比字符串('left', 'center', 'right')或整型数字
top:60, //组件离容器上侧的距离，百分比字符串('top', 'middle', 'bottom')或整型数字
right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字
bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字
width:"auto", //grid 组件的宽度。默认自适应。
height:"auto", //grid 组件的高度
backgroundColor:'#ffd700', //网格背景色，默认透明。
//borderColor:'#3cb371', //网格的边框颜色
//borderWidth:'13', //网格的边框线宽-------------值:number
containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
shadowColor:"red", //阴影颜色
shadowOffsetX:20, //阴影水平方向上的偏移距离
shadowOffsetY:20, //阴影垂直方向上的偏移距离
shadowBlur:900, //阴影的模糊大小,该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
tooltip:{ //坐标系特定的 tooltip 设定(提示框组件可以设置在多种地方：可以设置在全局，即 tooltip;可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip;可以设置在系列中，即 series.tooltip;可以设置在系列的每个数据项中，即 series.data.tooltip)
show:true, //是否显示提示框组件，包括提示框浮层和 axisPointer
trigger:"axis", //触发类型 default:'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 none不触发
axisPointer: { // 坐标轴指示器配置项。tooltip.axisPointer 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPinter 在简单场景下会更方便一些。注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。
type:'shadow', //'line'直线指示器 'shadow'阴影指示器 'none'无指示器 'cross'十字准星指示器
lineStyle : { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
axis:'auto', //指示器的坐标轴
snap:true //坐标轴指示器是否自动吸附到点上
}，
showContent:true, //是否显示提示框浮层，默认显示
triggerOn:'mouseover', //触发时机'mouseover'鼠标移动时触发，'click'鼠标点击时触发，'mouseover|click'同时鼠标移动和点击时触发
enterable:false, //鼠标是否可进入提示框浮层中，默认为false,如需详情内交互，如添加链接，按钮，可设置为true
renderMode:'html', //浮层的渲染模式，默认以'html即额外的DOM节点展示tooltip'
extraCssText:'box-shadow:0 0 3px rgba(0,0,0,0.3);', //额外附加到浮层的CSS样式
confine:false, //是否将tooltip框限制再表的区域内
position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,Array:[10, 10]。回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，只在 trigger 为'item'的时候有效。
//formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
formatter:function(arg){
return arg[0].name+'的分数是:'+arg[0].data
}
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
textStyle:{
color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字体系列
fontSize:18, //字体大小
lineHeight: number // 行高
width: number, string //文字块的宽度
height: number,string //文字块的高度
textBorderColor: string // 文字本身的描边颜色。
textBorderWidth: number //文字本身的描边宽度。
textShadowColor: string //文字本身的阴影颜色。
textShadowBlur: number //文字本身的阴影长度。
textShadowOffsetX: number //文字本身的阴影 X 偏移。
textShadowOffsetY: number //文字本身的阴影 Y 偏移。
extraCssText: string //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例： extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
}, //文本样式
}
}],
xAxis: [
{
show:true, //是否显示 x 轴
gridIndex:0, //x 轴所在的 grid 的索引，默认位于第一个 grid,
//position:"top", //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
offset:10, //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type:"category", //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
name:'时间', //坐标轴名称
nameLocation:"start", //坐标轴名称显示位置。可选：'start','middle','end'
nameTextStyle:{ //nameTextStyle坐标轴名称的文字样式
color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字体系列
fontSize:18, //字体大小
lineHeight: 10, // 行高
width: 10, //文字块的宽度number, string
height:10, //文字块的高度number,string
textBorderColor: "#3cb371", // 文字本身的描边颜色string。
textBorderWidth:10, //文字本身的描边宽度number。
textShadowColor:'#7b68ee', //文字本身的阴影颜色string。
textShadowBlur: 10, //文字本身的阴影长度number。
textShadowOffsetX: 10, //文字本身的阴影 X 偏移number。
textShadowOffsetY: 10, //文字本身的阴影 Y 偏移number。
//extraCssText: //额外附加到浮层的 css 样式string。如下为浮层添加阴影的示例：extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
},
nameGap:50, //坐标轴名称与轴线之间的距离
nameRotate:90, //坐标轴名字旋转，角度值
inverse:false, //是否是反向坐标轴
boundaryGap:true, //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
//min:0, //设置从X轴第几个刻度开始显示，刻度的index值从0开始
//max:6, //坐标轴刻度最大值，index从1开始。
scale:true, //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
minInterval:0, //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效
silent:false, //坐标轴是否是静态无法交互
triggerEvent:false, //坐标轴的标签是否响应和触发鼠标事件
axisLine:{ //坐标 轴线
show:true, //是否显示坐标轴轴线
onZero:true, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
lineStyle:{
color:"#3cb371", //坐标轴颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:0, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型，solid，dashed，dotted
width:2, //坐标轴线线宽
opacity:0.5, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}
},
axisTick :{ //坐标轴刻度相关设置
show:true, //是否显示坐标轴刻度。
alignWithLabel:true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:3, //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //坐标轴刻度是否朝内，默认朝外。
length:5, //坐标轴刻度的长度。
lineStyle:{
color:"#3cb371", //坐标轴颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:10, //阴影水平方向上的偏移距离。
shadowOffsetY:10, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型，solid，dashed，dotted
width:10, //坐标轴线线宽
opacity:0.5, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}
},
axisLabel:{ //坐标轴刻度标签的相关设置
show:true, //是否显示
interval:"auto", //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //刻度标签是否朝内，默认朝外
rotate:0, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
margin:8, //刻度标签与轴线之间的距离
formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
showMaxLabel:null, //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
textStyle:{
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}
},
splitLine:{ //坐标轴在 grid 区域中的分隔线。
show:true, //是否显示分隔线。默认数值轴显示，类目轴不显示。
interval:"auto", //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
lineStyle:{
color:"#333", //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型，solid，dashed，dotted
width:1, //坐标轴线线宽
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}
},
splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。
interval:"auto",
show:true, //是否显示分隔区域
areaStyle:{
color:['#3cb371','#ff6666'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}
},
zlevel:0, //X 轴所有图形的 zlevel 值。
z:0, //X 轴组件的所有图形的z值
data: [1, 2, 3, 4, 5, 6, 7]
}
],
yAxis[ //y轴配置内容同x轴
{}
]
}
扫一扫
07-05
1557
1557
02-23
05-18
1786
1786
08-18
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
