var myChart = echarts.init(document.getElementById('box'));
option = {
color: ['#3398DB'],
title: {
text: '总收益',
x:'center',
top:'2%',
},
// 在坐标轴上显示数据
label:{
normal:{
show: true,
textStyle:{color:'#d27d39',fontSize:"18"},
position: 'top'
},
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['1/30', '1/31', '2/1', '2/2', '2/3'],
axisTick: {
alignWithLabel: true
},
// 控制网格线是否显示
splitLine: {
show: false,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['red']
}
},
// 改变x轴颜色
axisLine:{
lineStyle:{
color:'#df0af8',
// width:8,//这里是为了突出显示加上的,可以去掉
}
},
// 改变x轴字体颜色和大小
axisLabel: {
textStyle: {
color: '#21abfa',
fontSize:'16'
},
},
}
],
yAxis : [
{
// 隐藏y轴
axisLine: {show: false},
// 去除y轴上的刻度线
axisTick: {
show: false
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['red']
}
},
// 改变y轴字体颜色和大小
axisLabel: {
textStyle: {
color: '#ef4c13',
fontSize:'16'
},
},
type : 'value'
}
],
series : [
{
name:'总收益',
type:'bar',
barWidth:'30%', // 调节柱形图宽度的大小
itemStyle:{
normal:{
color:'#4e76b5'
},
},
data:[10, 52, 200, 334, 390]
}
]
};
myChart.setOption(option);