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' }, } } }] });