echarts配置项
tooltip: {
trigger: 'axis', // 触发tooltip提示类型 axis:坐标轴触发
axisPointer: {
type: 'cross', // 指示器类型 cross: 十字准星指示器
crossStyle: {
color: '#999' // 线颜色
}
}
},
grid: {
left: '0%', //离容器左侧的距离
top:'5%',
bottom: '3%',
containLabel: true // 是否将标签文字包含在图形之内,为false时,左侧label会不显示
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine:{
show:false, // 设置 X 轴网格线不展示
},
axisLine:{
show:false, // 设置 X 轴线不显示
},
axisTick: {
show: false // 设置 X 轴刻度不显示
},
axisLabel:{
show:false, // 设置 X 轴数值不显示
},
},
yAxis: {
type: 'category',
splitLine:{
show:false, // 设置 X 轴网格线不展示
},
axisLine:{
show:false, // 设置 X 轴线不显示
},
axisTick: {
show: false // 设置 X 轴刻度不显示
},
data:['周一','周二','周三','周四']
},
series: [
{
name:'命中次数',
data:[6,2,2,1],
type:'bar',
itemStyle:{
// 渐变 从左到右
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#50a0ff' },
{ offset: 1, color: '#51e3d9' }
),
borderRadius:[10,10,10,10], // 圆角,左上、右上、右下、左下
},
barWidth:10, // 柱状图宽度
tooltip: {
valueFormatter: function (value:any) {
return (value as number)+'次';
}
},
label: {
show: true, // 显示文案
position: 'right', // 在顶部显示
// 可以通过 formatter 自定义显示格式
formatter: '{c}', // {c} 表示数据值
}
}
]