引用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>');