在使用Echarts的条形图时候,想让图表变得干净清爽一点,只留下展示数据的条形,X轴和Y轴的所有数据都进行隐藏。
想要实现的效果大致是这样,数据只有鼠标在上方时候才显示
option对象的代码:
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
//设置图表的位置和宽高
left: 0,
top: 0,
width: 480,
height: 120,
},
xAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
scale: true,
splitNumber: 1,
axisLabel: {
show: false
}
},
],
yAxis: [
{
type: "category",
data: ['电费'],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: '本月',
type: "bar",
data: [18],
showBackground: true,
itemStyle: {
borderRadius: [0, 10, 10, 0],
},
},
{
name: '上月',
type: "bar",
data: [220],
showBackground: true,
itemStyle: {
borderRadius: [0, 10, 10, 0],
},
},
],
};