echarts配置项titlelegenddataRangetoolboxtooltipd。。。
var option = {
// 全图默认背景
// backgroundColor: 'rgba(0,0,0,0)',
// 默认⾊板
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
],
// 图表标题
title: {
x: 'left', // ⽔平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）//textAlign: null // ⽔平对齐⽅式，默认根据x设置⾃动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜⾊
borderWidth: 0, // 标题边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 标题内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18, // 主标题⽂字⼤⼩
fontWeight: 'bolder', // 主标题⽂字加粗
color: '#333'// 主标题⽂字颜⾊
},
subtextStyle: {
color: '#aaa'// 副标题⽂字颜⾊
}
},
// 图例
legend: {
orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：'horizontal' ¦ 'vertical'
x: 'center', // ⽔平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜⾊
borderWidth: 0, // 图例边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 图例内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为⽔平间隔，纵向布局时为纵向间隔
icon: 'rect', // 默认圆⾓矩形roundRect，可选项有'circle' 椭圆，'rect' 矩形， 'roundRect' 圆⾓矩形 '，// triangle' 三⾓形， 'diamond' 菱形， 'pin' 正圆，'arrow' 箭头
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形⾼度
textStyle: {
color: '#333'// 图例⽂字颜⾊
}
},
// 值域
dataRange: {
orient: 'vertical', // 布局⽅式，默认为垂直布局，可选为：'horizontal' ¦ 'vertical'
x: 'left', // ⽔平安放位置，默认为全图左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜⾊
borderWidth: 0, // 值域边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 值域内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为⽔平间隔，纵向布局时为纵向间隔 itemWidth: 20, // 值域图形宽度，线性渐变⽔平布局宽度为该值 * 10
itemHeight: 14, // 值域图形⾼度，线性渐变垂直布局⾼度为该值 * 10
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color: ['#1e90ff', '#f0ffff'], //颜⾊
//text:['⾼','低'], // ⽂本，默认为数值⽂本
textStyle: {
color: '#333'// 值域⽂字颜⾊
}
},
// ⼯具栏
toolbox: {
show: true, //是否显⽰
orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：'horizontal' ¦ 'vertical'
x: 'right', // ⽔平安放位置，默认为全图右对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） left: '460', //距左
top: '2', //距上
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // ⼯具箱背景颜⾊
borderColor: '#ccc', // ⼯具箱边框颜⾊
borderWidth: 0, // ⼯具箱边框线宽，单位px，默认为0（⽆边框）
padding: 5, // ⼯具箱内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为⽔平间隔，纵向布局时为纵向间隔 itemSize: 16, // ⼯具箱图形宽度
featureImageIcon: {}, // ⾃定义图⽚icon
featureTitle: {
mark: '辅助线开关',
markUndo: '删除辅助线',
markClear: '清空辅助线',
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退',
dataView: '数据视图',
lineChart: '折线图切换',
barChart: '柱形图切换',
restore: '还原',
saveAsImage: '保存为图⽚'
},
//⾃定义⼯具官⽹配置项解释：
feature: { //⾃定义⼯具，只能以my开头
myTool1: {
show: true,
title: '⾃定义扩展⽅法', //悬停出现的⽂字
icon: 'image://xxx.png', //⾃定义按钮图⽚格式必须是：'image://（图⽚/图标的路径)'
onclick: function() { //点击图⽚事件
alert('myToolHandler')
}
}
}
},
// ⿏标移到图表上后提⽰框
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
showDelay: 20, // 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration: 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提⽰背景颜⾊，默认为透明度为0.7的⿊⾊
borderColor: '#333', // 提⽰边框颜⾊
borderRadius: 4, // 提⽰边框圆⾓，单位px，默认为4
borderWidth: 0, // 提⽰边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 提⽰内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
axisPointer: { // 坐标轴指⽰器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: { // 直线指⽰器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle: { // 阴影指⽰器样式设置
width: 'auto', // 阴影⼤⼩
color: 'rgba(150,150,150,0.3)'// 阴影颜⾊
}
},
textStyle: {
color: '#fff'
},
//formatter 提⽰框浮层内容格式器，⽀持字符串模板和回调函数两种形式
formatter: '{b0}: {c0}<br />{b1}: {c1}',
// formatter:function(parmas){
// console.log(parmas);
// }
},
// 区域缩放控制器
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', // 数据缩略背景颜⾊
handleColor: 'rgba(70,130,180,0.8)', // 控制⼿柄颜⾊
fillerColor: 'rgba(144,197,237,0.2)', // 选择区域填充颜⾊
handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z’', //更改⼿柄形状也可通过image://url设置为图⽚//可去查看handleIcon的具体设置
handleSize: 12, //更改⼿柄⼤⼩
start: 0, //数据窗⼝范围的起始百分⽐
end: 100, //数据窗⼝范围的结束百分⽐
realtime: true, //是否实时更新系列的视图默认为true
},
// ⽹格
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
/
/ 类⽬轴
categoryAxis: {
position: 'bottom', // 位置
nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
boundaryGap: true, // 类⽬起始和结束两端空⽩策略
axisLine: { // 坐标轴线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴⼩标记
show: true, // 属性show控制显⽰与否，默认不显⽰
interval: 'auto',
// onGap: null,
inside: false, // 控制⼩标记是否在grid⾥
length: 5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显⽰，属性show控制显⽰与否
// onGap: null,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显⽰，属性show控制显⽰与否
/
/ onGap: null,
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']fontweight取值
}
}
},
// 数值型坐标轴默认参数(value:x/y) x轴/y轴
valueAxis: {
position: 'left', // 位置
nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
nameTextStyle: {}, // 坐标轴⽂字样式，默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空⽩策略
splitNumber: 5, // 分割段数，默认为5
axisLine: { // 坐标轴线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴⼩标记
show: false, // 属性show控制显⽰与否，默认不显⽰
inside: false, // 控制⼩标记是否在grid⾥
length: 5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显⽰，属性show控制显⽰与否
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
},
//图表类型
series: series, //有点多单独说
/
/极坐标图
polar: {
center: ['50%', '50%'], // 默认全局居中
radius: '75%',
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论