echarts画k线图（折线）

最新推荐文章于 2025-06-30 12:50:10 发布

菜鸟的备忘录

最新推荐文章于 2025-06-30 12:50:10 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习 js jQuery 文章标签： javascript echarts k线图

本文链接：https://blog.youkuaiyun.com/hilary_front/article/details/78135077

前端学习同时被 2 个专栏收录

11 篇文章

订阅专栏

js jQuery

7 篇文章

订阅专栏

该博客介绍了如何借助ECharts库来绘制K线图。通过引用ECharts库并在获取数据后生成图表，如果数据为空，则在调用setOption后添加代码清除显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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