ECharts 的参数设置非常多,这里列出了一些比较常用的:
1.title
用于设置图表标题,包括主标题和副标题。
title: {
text: '标题',
subtext: '副标题',
left: 'center' // 标题位置,默认居中
}
2.tooltip
用于显示数据提示框。
tooltip: {
trigger: 'axis', // 触发类型,还可以是 'item'
axisPointer: {
type: 'shadow' // 坐标轴指示器类型,还可以是 'line' 和 'cross'
}
}
3.legend
用于设置图例。
legend: {
data: ['数据1', '数据2'], // 图例数据
selectedMode: 'single', // 是否支持选中模式,还可以是 'multiple' 和 'false'
orient: 'horizontal', // 图例方向,默认水平
top: 'top', // 图例位置,默认上方
textStyle: {
color: '#333' // 图例文字颜色
}
}
4.xAxis和yAxis
分别用于设置 x 轴和 y 轴。
xAxis: {
type: 'category', // 坐标轴类型,还可以是 'value'、'time'、'log' 等
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 坐标轴数据
},
yAxis: {
type: 'value', // 坐标轴类型,还可以是 'category'、'time'、'log' 等
min: 0, // 坐标轴最小值,默认自适应
max: 100, // 坐标轴最大值,默认自适应
splitNumber: 5, // 坐标轴分割段数,默认为5
axisLine: {
show: false // 是否显示坐标轴线,默认显示
},
axisTick: {
show: false // 是否显示坐标轴刻度,默认显示
},
axisLabel: {
textStyle: {
color: '#333' // 坐标轴文字颜色
}
}
}
5.series
用于设置数据系列。
series: [{
name: '数据1', // 数据系列名称
type: 'line', // 图表类型,还可以是 'bar'、'scatter'、'pie' 等
data: [10, 20, 30, 40, 50, 60, 70], // 数据系列
lineStyle: {
normal: {
color: '#f00' // 折线颜色
}
},
itemStyle: {
normal: {
color: '#f00' // 点颜色
}
},
label: {
normal: {
show: true, // 是否显示标签,默认不显示
position: 'top' // 标签位置,默认上方
}
}
}]