option = {
title: { // 标题
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: { // 气泡提示框
trigger: 'item',
formatter: '{a}<br/>{b}:{c}({d}%)'
},
legend: { // 图例
orient: 'vertical',
x: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: { // 工具箱,辅助工具
show: true,
feature: { // 工具箱,自定义功能
mark: { show: true },
dataView: { show: true, readOnly: false }, // 数据视图
magicType: { // 动态类型切换
show: true,
type: ['pie','funnel'],
option: {
funnel:{
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true },
}
},
calculable: true,
series: [ // 数据系列
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%','60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
// 数据
series:[
{
name:'访问来源', // 系列名称,鼠标放在饼状图上时显示的字
type:'pie', // 图表类型,pie-饼图,line-折线图,bar-柱状图,map-地图,...
radius:'55%', // 半径长度
center:['50%','60%'], // 饼状图圆心的位置
data:[
{value:335, name:'直接访问'},
{value:315, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'},
]
}
]
// 提示框,鼠标悬停交互时的信息提示
tooltip:{
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
}
tooltip:{
show: true/false,
zlevel: 1, // 一级层叠控制
z: 8, // 二级层叠控制
showContent: true/false, // tooltip主体内容显示策略
trigger: 'item'/'axis', // 触发类型
position: null, // 位置指定
formatter: null,
islandFormatter: '{a}<br/>{b}:{c}', // 拖拽重计算独有,饼图:a(序列名称)、b(数据项名称)、c(数值)、d(百分比)
showDelay: 20, // 单位为ms
hideDelay: 100, // 单位为ms
transitionDuration: 0.4, // 动画变换时常,单位为s
enterable: false/true, // 鼠标是否可进入详情旗袍气泡中
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角
borderWidth: 0, // 提示边框宽度
padding: 5, // 提示内边距
axisPointer: {
type:'line'/'cross'/'shadow'/'none'(无),
lineStyle: { color: '#48b', width: 2, type: 'solid' }, // 直线指示器
crossStyle: { color: '#1e90ff', width: 1, type: 'dashed' }, // 十字准星指示器
shadowStyle: { color: 'rgba(150, 150, 150, 0.3)', width: 'auto', type: 'default' }, // 阴影指示器
},
textStyle: { color: '#fff' } // 文本样式
}
// 图例
legend: {
show: true/false,
zlevel: 0,
z: 4,
orient: 'horizontal'/'vertical', // 布局方式
x: 'center'/'left'/'right'/{number}(x坐标,单位px), // 水平放置位置
y: 'top'/'bottom'/'center'/{number}(y坐标), // 垂直放置位置
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc',
borderWidth: 0,
padding: 5,
itemGap: 10, // 各个item之间的间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14,
textStyle: { color: '#333' },
formatter: null,
selectedMode: true/single/multiple, // 选中模式
selected: null, // 配置默认选中状态
data: [ // 如需个性化图例文字样式,可把数组项改为{ Object },指定文件样式和个性化图例icon
{
name: { string },
textStyle: { Object },
icon: { string }
}
],
type: 组件类型
isSelected: 图例开关相关
getSelectedMap: 图例相关开关相关,获取当前的全部图例开关状态
getColor: 图例颜色,获取传入的名称所对应的颜色
setColor: 设置颜色
setSelected: 选择状态
}
// 工具箱
toolbox{
color: ['#1e90ff','#22bb22','#4b0082','#d2691e'], // 工具箱icon颜色序列,循环使用,同时支持在具体feature内制定color
disableColor: '#ddd', // 禁用颜色定义
effectiveColor: red, // 生效颜色
showTitle: true, // 是否显示工具箱文字提示
textStyle: {},
feature: {
mark:{ // 辅助线标志
show: false,
title: { mark: '辅助线开关', markUndo: '删除辅助线', markClear: '清空辅助线' },
lineStyle: { width: 2, color: '#1e90ff', type: 'dashed' }
},
dataZoom:{ // 框选区域缩放
show: false,
title: { dataZoom: '区域缩放', dataZoomReset: '区域缩放后退' }
},
dataView:{ // 数据视图
show: false,
title: '数据视图',
readOnly: false, // 默认数据视图为只读,false表打开编辑功能
lang: ['数据视图', '开关', '刷新'],
},
magicType:{ // 动态类型切换
show: false,
title: { line: '折线图切换', bar: '柱状图切换', stack: '堆积', tiled: '平铺', force: '力导向布局图切换', chord: '和弦图且哈U呢', pie: '饼图切换', funned:'漏斗图切换'},
option: {
// line: { ... },
// bar: { ... },
// stack: { ... },
// tiled: { ... },
// force: { ... },
// chord: { ... },
// pie: { ... },
// funned:'漏{ ... }
},
type: [],
},
restore: { show: false, title: '还原' }, // 还原
saveAsImage: { show: false, title: '保存图片', type: 'pie', lang: ['点击保存'] } // 保存图片
}
}
饼图
{
center:['50%','50%'], // 圆心坐标
radius: [0, '75%'], // 半径
startAngle: 90, // 开始角度
minAngle: 0, // 最小角度
clockWise: true, // 显示是否顺时针
roseType: null,
selectedOffset: 10, // 选中的扇区偏移量
selectedMode: null/single/multiple, // 选中模式
legendHoverLink: true // 是否启用图例(legend)hover时的联动响应(高亮显示)
}
关于itemStyle
itemStyle: {
normal: { ... }, // 默认样式
emphasis: { ... }, // 强调样式(悬浮式样式)
}
color: { seriesIndex: x, series: xxx, dataIndex: y, data: yyy }
label: {
show: true/false,
position: 'outer','inner', // 饼图标签显示位置
rolate: false,
distance: 10,
formatter: null,
textStyle: ...
x: ...
y: ...
}
lableLine: {
show: true/false, // 饼图标签视觉引导线显示策略
length: 40, // 长度
lineStyle: {} // 线条样式
}
{
value: 1548,
name: '搜索引擎',
itemStyle: {
normal:{
color: ('red')
},
emphasis: {
labelLine: {
show: true,
lineStyle: { color: 'red' },
}
}
}
文字样式
textStyle: {
color: ...
decoration: none, // 修饰,仅对tooltip、textStyle生效
align: 'left'/'right'/'center', // 水平方向对齐
baseline: 'top'/'bottom'/'middle', // 垂直方向对齐
fontFamily: ... // 字体
fontSize: 12, // 字号
fontStyle: 'normal'/'italic'/'obliqua', // 样式
fontWeight: 'normal'/'bold'/'bolder'/'lighter'/100/200/.../900 // 粗细
}
normal:{
color: ('#000'),
label: {
textStyle: {
fontSize: 30,
fontFamily: '微软雅黑',
fontWeight: 'bolder',
}
}
}
// 坐标轴有三种类型,类目型、数值型、时间型
axis:{
type: 'category'/'value'/'time'/'log', // 坐标类型
show: true/false,
zlevel: 0,
z: 0,
position: 'bottom'/'left'/'top'/'right', // 坐标轴类型
name: '', // 坐标轴名称
nameLocation: 'end'/'start', // 坐标轴名称位置
nameTextStyle: {},
boundaryGap: true/false, // 类目起始和结束两端空白策略
boundaryGap: [0,0], // 坐标轴两端空白策略
min: null, // 指定最小值
max: null,
scale: false, // 脱离0值比例,放大聚焦到最终_min、_max区间
splitNumber: null, 分分割段数
logLabelBase: null, // axis.type === log时生效
logPositive: null, // axis.type === log时生效
axisLine: ... // 坐标轴线
axisTick: ... // 坐标轴小标记
axisLabel: ... // 坐标文本标签
splitLine: ... // 分隔线
splitArea: ... // 分隔区域
data: [] // 类目列表
}