echarts图形开发常用参数集合
本文档提供展示当前较为常用参数，具体配置请参照 echarts官网
0. 公共配置项
配置项中有很多公共配置项，如文字，容器，线样式等，该模块将该配置项提出，后续不再重复写入
0.1 字体样式
{
color: '#0000FF', // 字体颜色
fontStyle: 'normal', // 字体类型
fontWeight: 'bold', // 字体粗细
fontFamily: 'sans-serif', // 字体风格
fontSize: '40', // 字体大小
width: 20, // 字体宽度
height: 20, // 字体高度
lineHeight: 50, // title显示行高
textBorderColor: '#8A2BE2', // 文本边框颜色
textBorderWidth: 2, // 文本边框宽度
textBorderType: 'solid', // 文本边框显示类型
textShadowColor: '#FF7F50', // 阴影颜色
textShadowBlur: 5, // 阴影宽度
textShadowOffsetX: 5, // 阴影偏移x轴
textShadowOffsetY: 5, // 阴影偏移y轴
}
0.2 容器样式
{
backgroundColor: '#FF8C00', // 背景颜色
borderColor: '#FF1493', // 边框颜色
borderWidth: 5, // 边框宽度
borderRadius: 10, // 边框圆角
shadowBlur: 10, // 图形阴影的模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 10, // 阴影水平方向上的偏移距离
shadowOffsetY: 10, // 阴影垂直方向上的偏移距离
}
0.3 线样式
{
color: '#ccc', // 线颜色
width: 1, // 线宽
type: 'solid', // 线类型
dashOffset: 5, // 线偏移量
opacity: 0.5, // 线透明度
}
0.4 图形文本配置
{
show: true, // 是否显示
position: 'top', // 显示位置
distance: 5, // 距离
formatter: '{b}: {@score}', // 显示格式
// 以下省略标签文字样式配置，配置项见公共配置项-字体样式
color: '#48D1CC', // 文字样式
}
1. 标题配置项(title)
标题当前可配置项有三大项：主标题、副标题、标题整体框架，具体配置项可见下列代码
效果可访问 示例 将下列代码复制到编辑内可见
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
title: {
text: 'test\n换行', // 主标题显示文本
show: true, // 是否显示标题
// 主标题样式设置，配置项见公共配置项-字体样式
textStyle: {
overflow: 'none', // 文本超出显示方式
ellipsis: '...', // 超出文本显示
lineOverflow: 'truncate', // 文本超出高度时是否截断
},
subtext: '副文本标题', // 副文本标题
// 副标题与标题样式配置项基本相同，配置项见公共配置项-字体样式
subtextStyle: {
},
textAlign: 'left', // 文本水平对齐方式
textVerticalAlign: 'auto', // 文本垂直对齐方式
triggerEvent: true, // 是否触发事件
padding: 20, //标题内边距
itemGap: 30, // 主副标题差距
left: 20, // title左侧边距，可使用方位字符串
top: 20, // title上侧边距，可使用方位字符串
right: 20, // title右侧边距，可使用方位字符串
bottom: 20, //title下侧边距，可使用方位字符串
// 以下为容器样式，配置项见公共配置项-容器样式
backgroundColor: '#FF8C00', // 标题背景颜色
borderColor: '#FF1493', // 标题边框颜色
borderWidth: 5, // 标题边框宽度
borderRadius: 10, // 标题边框圆角
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
2. 图例显示项(legend)
图表显示项一般为多类型数据显示，legend 起到配置图例显示项作用
var data = genData(50);
option = {
title: {
text: '同名数量统计',
subtext: '纯属虚构',
left: 'right',
top: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
show: true, // 是否显示
type: 'scroll', // 图例类型，滚动或者全部显示
scrollDataIndex: 5, // 初始时，滚动定位位置（类型为滚动才有效）
pageButtonItemGap: 10, // 页码和翻页按钮之间的距离
pageButtonGap: 10, // 图例与控制块距离
pageButtonPosition: 'end', //控制块相对图例位置
pageFormatter: '{current}/{total}', // 翻页信息显示格式
left: 10, // 图例左侧边距
top: 10, // 图例上侧边距
right: 10, // 图例右侧边距
bottom: 10, // 图例上侧边距
width: 900, // 图例宽度
height: 100, // 图例高度
orient: 'horizontal', // 布局朝向
align: 'right', // 图例标记与文本对齐方式
padding: [5, 10, 10, 10], // 整体图例内边距
itemGap: 5, // 每项图例之间间隔
itemWidth: 15, // 图表标记图形宽度（颜色块）
itemHeight: 15, // 图表标记图形高度（颜色块）
// 图例图形样式配置
itemStyle: {
borderColor: '#FFD700', // 图例图形边框颜色
borderWidth: 2, // 图例图形边框宽度
borderType: 'dotted', // 图例图形边框描边类型
opacity: 0.5, // 图例图形透明度
},
// 图例图形线样式（本配置项只适用于折线图）
lineStyle: {
width: 10, // 线宽
},
formatter: '姓名：{name}', // 图例文字项显示格式
selectedMode: 'multiple', // 控制单击图例是否控制该项在图表中显示隐藏
inactiveColor: '#fff', // 图例关闭时的字体与图例颜色
selected: { '测试姓名1s': false }, // 设置图例是否开启关闭，未设置默认开启
// 图例文本显示样式，配置项见公共配置项-字体样式
textStyle: {
color: 'inherit', // 文本颜色，inherit显示该项数据颜色
},
// tooltip显示
tooltip: {
show: true
},
// 以下为容器样式，配置项见公共配置项-容器样式
backgroundColor: '#000', // 图例模块背景颜色
// 图例页信息的文字样式，配置项见公共配置项-字体样式
pageTextStyle: {
},
// 环形图使用，环形图内部文字，配置项见公共配置项-字体样式
emphasis: {
selectorLabel: {
show: true
}
},
selector: true, // 全选反选按钮开关
// 全选反选文本样式，配置项见公共配置项-字体样式
selectorLabel: {
},
selectorPosition: 'start', // 选择器（全选反选）位置
selectorItemGap: 10, // 选择器（全选反选）按钮距离
selectorButtonGap: 10, // 选择器（全选反选）与图例距离
data: data.legendData
},
series: [
{
name: '姓名',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
function genData(count) {
var nameList = [
'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
];
var legendData = [];
var seriesData = [];
for (var i = 0; i < count; i++) {
var name = Math.random() > 0.65
? makeWord(4, 1) + '·' + makeWord(3, 0)
: makeWord(2, 1);
legendData.push(name);
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
});
}legendData.push('测试姓名1s');
seriesData.push({name: '测试姓名1s', value: Math.round(Math.random() * 100000)});
return {
legendData: legendData,
seriesData: seriesData
};
function makeWord(max, min) {
var nameLen = Math.ceil(Math.random() * max + min);
var name = [];
for (var i = 0; i < nameLen; i++) {
name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
}
return name.join('');
}
}
3. 网格(grid)
本块内容配置项主要负责折线图、柱状图、散点图等网格图参数配置
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
// trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
show: true, // 显示直角坐标系网格
left: '3%', // 左侧边距
right: '4%', // 右侧边距
bottom: '3%', // 下侧边距
top: '10%', // 上侧边距
width: 'auto', // 网格宽度
height: 'auto', // 网格高度
containLabel: true, //是否包含刻度标签，此项数字过千后关闭似乎有问题，不要随意关闭
backgroundColor: '#FDF5E6', // 网格背景颜色
borderColor: '#000', // 网格四周边框颜色
borderWidth: 5, // 网格边框线宽
tooltip: {
show: true, // 是否显示提示框
// trigger: 'axis', // 触发类型
// 坐标轴指示器配置项，能够指示坐标轴当前刻度工具，
// 该项配置项能够实现对大数据概况和详细查看，也能实现对复杂数据辅助查看
axisPointer: {
type: 'line', // 指示器类型
axis: 'x', // 指示器坐标轴，如x轴，则x轴出现虚拟辅助线
snap: true, // 是否吸附到点上
},
position: [80, 90], // 提示框浮层的位置，该项触发前提是trigger不能为axis
formatter: '{a}: {b}<br />{c}', // 提示框浮层内容格式，参数代表数据请自行查看文档
backgroundColor: '#6B8E23', // tooltip背景颜色
},
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
4. 坐标系X,Y轴(xAxis、yAxis)
本配置项主要负责直角坐标系的 x 轴配置，一般情况组件最多只能防两个 x 轴，多个x 轴需要配置 offset 偏移防止多个 x 轴重叠
在本节内容前，需要了解一些专用名称：
- 类目轴：类目轴数据点基本为无序的数据，由数组传入，例如
['类A', '类B', '类C'] - 非类目轴：非类目轴数据点为有序的数据，例如时间，有序数值等
- 次刻度线：非类目轴每个数据点等距划分，每个划分点形成虚线标识更小的数据间隔，详见实例
option = {
xAxis: {
show: true, // x轴内容是否显示
position: 'top', // x轴内容显示位置，只能是上下
offset: 10, // x轴上下偏移值，主要分开多个x轴
realtimeSort: true, // 实时排序，该配置项需要配合多个配置项才能有效果，详见文档
sortSeriesIndex: 0, // 用于排序列的系列id
type: 'category', // 坐标轴类型，详见文档
name: 'x轴', // 坐标轴名称，设置后将会在尾部添加名称
nameLocation: 'start', // 坐标轴名称相对轴显示位置
// 坐标轴名称样式，配置项见公共配置项-字体样式
nameTextStyle: {
},
nameGap: 20, // 坐标轴名称与坐标轴距离
nameRotate: 30, // 坐标轴名称旋转角度
inverse: true, // 是否反向（左右）坐标轴，反向时数据也将相反显示
boundaryGap: false, // 坐标轴两边留白策略，开启时，x轴显示项将会显示在中间
min: 1, // 刻度最小值，如为类目轴，则该数据代表数组序号
max: 5, // 刻度最大值，如为类目轴，则该数据代表数组序号
scale: true, // 是否脱离0值比例，此项设置最大最小值后会无效
splitNumber: 2, // 坐标轴分割段数，类目轴无效
minInterval: 1, // 自动计算坐标轴最小间隔大小，类目轴无效
maxInterval: 2, // 自动计算坐标轴最大间隔大小，类目轴无效
interval: 2, // 强制设置坐标轴分割间隔
silent: true, // 坐标轴是否静态不可交互，关闭时鼠标时间等交互都将关闭
triggerEvent: true, // 坐标轴的标签是否响应和触发鼠标事件
// 坐标轴轴线（不包含刻度名称，但包含轴名称）相关设置
axisLine: {
show: true, // 轴线是否显示
onZero: false, // xy轴是否共用一个0值，如设置x轴position需要关闭掉这个
},
// 刻度线设置
axisTick: {
show: true, // 是否显示刻度线
alignWithLabel: true, // 刻度与标签是否对齐，此项需要boundaryGap开启才有效果
interval: 0, // 刻度间隔，类目轴有效，如1则隔一个有刻度线
inside: true, // 刻度线是否朝内部显示
length: 10, // 坐标轴刻度线长度
// 刻度线样式，配置项见公共配置项-线样式
lineStyle: {
}
},
// 次刻度线配置，该配置项类目轴无法使用
minorTick: {
show: true, // 是否显示次刻度线
splitNumber: 10, // 每两个刻度线间分割数量
},
// 刻度线标签配置
axisLabel: {
show: true, // 是否显示刻度线标签
interval: 0, // 标签显示间隔，如1则隔一个有标签
inside: true, // 标签刻度是否朝内
margin: 20, // 标签与刻度线之间的距离
formatter: '{value}星期', // 标签显示格式
// 以下省略标签文字样式配置，配置项见公共配置项-字体样式
color: '#00BFFF', // 标签颜色
},
// 刻度线在grid的分割线
splitLine: {
show: true, // 是否显示分割线
interval: 1, // 分割线显示间隔
// 分割线样式，配置项见公共配置项-线样式
lineStyle: {
}
},
// 次刻度线的分割线配置
minorSplitLine: {
show: false, // 是否显示次刻度线的分割线
// 次刻度线的分割线样式，配置项见公共配置项-线样式
lineStyle: {
}
},
// 刻度线在网格中分割的区域配置，分割区域主要视觉上区分相邻刻度块，与斑马线相同
splitArea: {
show: true, // 是否显示分割区域
interval: 0, // 显示间隔
// 区域显示样式
areaStyle: {
color: ['#90EE90', '#ffffff'], // 区域显示颜色
opacity: 0.5, // 区域颜色透明度
}
},
// 坐标轴指示器配置项,鼠标移入网格某个区域后显示该标签值
axisPointer: {
show: true, // 是否显示
type: 'shadow', // 指示器类型，线型或者阴影
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
5. 提示框组件(tooltip)
本配置项主要负责提示框相关配置项配置，本配置项可设置在多种地方
- 可以设置在全局，即 tooltip
- 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
- 可以设置在系列中，即 series.tooltip
- 可以设置在系列的每个数据项中，即 series.data.tooltip
声明处影响生效范围
本节需要了解的专用名称：
- 坐标轴指示器：鼠标放入网格中，坐标轴提示当前坐标位置显示
option = {
title: {
text: '一天用电量分布',
subtext: '纯属虚构'
},
tooltip: {
show: true, // 是否显示提示框
trigger: 'axis', // 触发类型，图形触发或者坐标轴触发
// 坐标轴指示器配置项,
axisPointer: {
show: true, // 是否显示指示器
type: 'cross', // 指示器类型
// 坐标指示器文本标签
label: {
show: true, // 是否显示文本
precision: 3, // 文本标签中数值的小数点精度，对非类目且为数字有效
formatter: '当前时间：{value}', // 指示器文本显示格式
margin: 20, // 文本与轴线距离
// 以下为指示器文本样式属性，配置项见公共配置项-字体样式
},
// 指示器类型为line时可配置，主要配置线样式，配置项见公共配置项-线样式
lineStyle: {
},
// 指示器类型为shadow时可配置，主要配置阴影样式
shadowStyle: {
color: '#87CEFA', // shadow颜色
opacity: 0.5, // shadow透明度
},
// 类型为cross时，可配置，主要配置交叉线样式，配置项见公共配置项-线样式
crossStyle: {
},
animation: true, // 是否开启动画
animationThreshold: 1000, // 开启动画的阈值，图形数量低于该数量开启，否则关闭
},
showContent: true, // 是否显示浮框层
alwaysShowContent: true, // 移出是是否显示提示框
triggerOn: 'mousemove|click', // 提示框触发的条件
enterable: true, // 鼠标是否可进入tooltip
confine: true, // 适配窄屏幕，tooltip超出是否隐藏
className: 'test-class', // 指定tooltip的css类
position: [10, 10], // 浮框位置
formatter: '时间：{b}<br />{a}: {c}W', // 浮框内容显示格式
backgroundColor: '#FDF5E6', // 浮框背景颜色
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name: '用电量',
type: 'line',
smooth: true,
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
6. 视图工具栏(toolbox)
本配置项主要负责视图工具（导出图片、数据视图、动态类型切换、数据区域缩放、重置）配置
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true, // 是否显示工具栏组件
orient: 'horizontal' ,// 工具布局朝向
itemSize: 20, // 工具icon大小
itemGap: 15, // 工具之间间隔
showTitle: true, // 鼠标移入是否显示标题
// 各工具配置项
feature: {
// 保存为图片工具
saveAsImage: {
type: 'jpg', // 保存格式
name: '气温变化表', // 保存文件名称
backgroundColor: '#EEE8AA', // 导出表格背景颜色
show: true, // 是否显示该工具
title: '导出为图片', // 鼠标移入显示提示
},
// 配置项还原（刷新按钮）
restore: {
show: true, // 是否显示刷新按钮
title: '刷新', // 提示文本
},
// 数据视图切换
dataView: {
show: true, // 是否显示
readOnly: false, // 是否只读
title: '切换视图', // 提示文本
},
// 数据区域缩放
dataZoom: {
show: true, // 是否显示
title: {
zoom: '放大',
back: '还原'
}, // 提示文本
xAxisIndex: [0, 3], // 可操作x轴
yAxisIndex: 'none', // 可操作y轴
},
// 动态切换类型
magicType: {
show: true, // 是否显示
type: ['line', 'bar', 'stack'], // 显示类型集合
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
position: 'start',
formatter: '最大值'
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
7. 所有类型视图常见配置项
本节内容主要负责展示部分视图的常见配置项
7.1 折线图
折线图主要负责展现数据变化的趋势
需要了解专用名称：
- 引导线：鼠标放置在节点上时显示文本，引导线连接节点与文本之前，起到引导作用
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 1111],
type: 'line', // 图类型
clip: true, // 是否裁剪超出项
smooth: true,
// 设置线条样式，配置项见公共配置项-线样式
lineStyle: {
color: '#4169E1',
},
// 区域填充样式，只要该项声明出来图形将会变成区域面积图
areaStyle: {
color: '#87CEEB', // 区域颜色
origin: 'start', // 图形区域起始位置
opacity: 0.5, // 透明度
},
// 折线图高亮状态及文本配置
emphasis: {
focus: 'series', // 鼠标放入折线上是否聚焦
// 节点标签文本配置项
label: {
show: true, // 是否显示标签文本
position: 'top', // 标签与图形元素相对位置
distance: 10, // 标签与图形元素距离
formatter: '当前值：{c}', // 标签显示格式
// 以下省略标签文字样式配置，配置项见公共配置项-字体样式
},
// 视觉引导线配置
labelLine: {
show: true, // 是否显示
lineStyle: {
width: 5
}
}
}
}]
};
7.2 柱状图
柱状图通过柱形高度展示数据大小
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
// 系列名称，用于tooltip显示
name: '直接访问',
type: 'bar',
showBackground: true, // 是否显示柱条的背景色
backgroundStyle: {
'Mon': '#F5F5F5',
'Tue': '#F5F5F5',
'Wed': '#F5F5F5',
'Thu': '#F5F5F5',
'Fri': '#F5F5F5',
'Sat': '#F5F5F5',
'Sun': '#F5F5F5'
}, // 柱条背景色
// 柱条显示文本
label: {
show: true, // 是否显示
position: 'top', // 显示位置
distance: 5, // 距离
formatter: '{b}: {@score}', // 显示格式
// 以下省略标签文字样式配置，配置项见公共配置项-字体样式
color: '#48D1CC', // 文字样式
},
// 柱条图形样式
itemStyle: {
color: '#48D1CC', // 颜色
opacity: 0.8, // 透明度
},
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
7.3 饼图
饼图主要用于表现不同类目的数据在总和中的占比
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源', // 系列名称，用于tooltip的显示
type: 'pie',
radius: '50%', // 饼图半径
roseType: true, // 是否展示成南丁格尔图
stillShowZeroSum: false,// 数据为0的时候是否显示扇区
avoidLabelOverlap: true, // 防止标签重叠
// 文本标签配置项（包含文本样式），配置项见公共配置项-图形文本配置
label: {
},
// 引导线配置
labelLine: {
show: true, // 是否显示
length: 10, // 第一段引导线长度
length2: 15, // 第二段引导线长度
smooth: true, // 平滑引导线
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'},
{value: 0, name: '无数据'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
