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);