例子1:折线图
配置项:
option = {
xAxis: {
type: 'category',
// 隐藏x轴
show: false,
// 坐标轴两边留白策略
boundaryGap: false
},
yAxis: {
// 隐藏y轴
show: false
},
// 控制图表底板的位置
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
series: [{
type: 'line',
data: [620, 432, 220, 534, 790, 430, 220, 320, 834, 690, 530, 220, 620],
// 区域填充样式,设置后显示区域面积图
areaStyle: {
color: 'purple'
},
// 是否平滑曲线显示,可是设置number,true为0.5
smooth: true,
// 折现拐点标志的样式
itemStyle: {
opacity: 0 // 隐藏折线图拐点
},
// 线条样式
lineStyle: {
width: 0 // 设置为0 只显示区域颜色,不显示线条
}
}]
}
效果图:
例子2:柱状图
配置项:
option = {
color: ['#3398DB'],
xAxis: {
show: false,
type: 'category',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00']
},
yAxis: {
show: false
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
tooltip: {
show: true
},
series: [{
type: 'bar',
// 柱条的宽度,不设时自适应,百分数基于自动计算出的每一类目的宽度
barWidth: '60%',
// 不同系列的柱间距离,为百分比(如 '30%',表示柱子宽度的 30%)
barGap: '30%',
data: [410, 82, 200, 334, 390, 220, 150, 82, 200, 134, 290, 330, 150, 180]
}]
}
效果图: