initChart: function (id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
xAxis: {
type: 'category',
data: ['11號', '12號', '13號', '14號', '15號'],
color: ['#DDDDDD'],
name:'4月',
show: true,
nameTextStyle: {
color: '#636363', // 坐標軸名稱樣式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
}
},
axisTick: { //去除刻度線
show: false
},
axisLabel: {
show: true, //坐標軸的文字是否顯示
textStyle: {
color: '#323232', //坐標軸上的字體顏色
fontSize:'12' // 坐標軸字體大小
}
},
},
yAxis: {
type: 'value',
name:'金額(元)',
show: true,
nameTextStyle: {
color: '#636363', // 坐標軸名稱樣式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
},
textStyle: {
color: '#323232', //x軸上的字體顏色
fontSize:'11' // x軸字體大小
}
},
axisTick: { //去除刻度線
show: false
},
axisLabel: {
show: true, //坐標軸的文字是否顯示
textStyle: {
color: '#323232', //坐標軸上的字體顏色
fontSize:'12' // 坐標軸字體大小
}
},
splitLine:{
show:true ,
lineStyle:{
color:'#DCDCDC',
width: 1
}
},
min:0, //坐標軸最大值
max:700, //坐標軸最大值
splitNumber:10, //間隔線間距
},
series: [{
data: [320, 240, 280, 500, 290],
type: 'line',
color: '#F40000',
symbol: 'circle',//折線點設置為實心點
symbolSize: 9, //折線點的大小
symbol:'circle',
smooth:false,
itemStyle:{
normal:{
// color:'#ddd',
lineStyle:{
width:1,
type:'solid', //'dotted'虛線 'solid'實線
color:'#F40000',
},
label : { //折線上的數據
show: true,
position: 'top',
color:'#636363'
},
}
}
}]
});

