echarts畫k線圖(折線)
阿新 • • 發佈:2019-02-09
引用echarts的庫,寫以下js檔案
//k線圖
function makeMapKLine(result){
var changeChart=echarts.init(document.getElementById("changeContent"));
var mapDate=[];
var goldCard=[];
var sunFlowerCard=[];
for(var i=0;i<result.monthPro.length;i++){
mapDate.push(result.monthPro[i].month);
goldCard.push(result.monthPro[i].goldCard);
sunFlowerCard.push(result.monthPro[i].sunFlowerCard);
option =({
title: {
text: '客戶總數變化',
left:'center',
textStyle:{
color:'#fff',
fontSize:'14',
fontWeight:'lighter',
fontFamily:'Arial',
},
},
legend:{
show:true,
orient:'horizontal' ,
bottom:40,
data:[
{
name:'A客戶',
textStyle:{
fontSize:12,
fontWeight:'bolder',
color:'#fff'
},
icon:'stack'
},
{
name:'B客戶' ,
textStyle:{
fontSize:12,
fontWeight:'bolder',
color:'#fff'
},
icon:'stack'
}
]
},
textStyle:{
color:'#fff',
fontSize:1,
},
tooltip: {
trigger: 'axis',
//axisPointer: {
// type: 'shadow'
//}
},
backgroundColor:'#1d3a59',
grid: {
left: '3%',
right: '3%',
bottom: '30%',
containLabel: true
},
xAxis: {
data :mapDate,
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:'white'
}
},
axisLabel:{
color:'white',
fontSize:'12',
// margin:1,
},
splitLine: {
show:true,
lineStyle: {
type: 'dashed',
color:'#303640'
}
}
},
yAxis:{
type:'value',
nameTextStyle:{
color:'white',
fontSize:'12',
},
axisLine:{
show:false,
lineStyle:{
color:'white',
},
},
axisTick:{
show:false
},
axisLabel:{
color:'white',
fontSize:'12',
margin:10,
},
splitLine: {
show:true,
lineStyle: {
type: 'dashed',
color:'white'
}
}
},
series:[
{
type:'line',
name:'A客戶',
smooth:true, //資料光滑過度
// symbol:'none', //下一個資料點
lineStyle:{
normal:{
color:'#5693cb',
width:3,
}
},
itemStyle:{
normal:{
color:'#5693cb',
label : {show:true,
color:'white',
fontSize:'12',
}
}
},
data:goldCard,
},{
type:'line',
name:'B客戶',
smooth:true, //資料光滑過度
// symbol:'none', //下一個資料點
lineStyle:{
normal:{
color:'#ed7d31',
width:3,
}
},
itemStyle:{
normal:{
color:'#ed7d31',
label : {show:true,
color:'white',
fontSize:'12',}
}
},
data:sunFlowerCard,
}
],
});
changeChart.setOption(option)
}
}
在呼叫介面時用資料生成echarts圖。
如果沒有資料,想清除K線圖的顯示,在setoption後加上以下程式碼。
$('#changeContent').find('.noDataTips').remove();
$('#changeContent').append('<div class="noDataTips" style="position:absolute;top:50%; left:50%; transform:translate(-50%,-50%); font-size:40px;font-weight: 600;text-align:center;">暫無資料</div>');