echart折线图

本文详细介绍如何使用ECharts绘制动态折线图,并通过Ajax从后台获取数据进行实时更新。文章涵盖配置图表样式、实现鼠标悬停显示数据等功能。

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

第一次做折线图,记录,部分借鉴了其他博主的文章

var ECharts = echarts.init(document.getElementById('ECharts'), null, _size);//获取图标的id



        // 指定图表的配置项和数据
        option = {
            title: {
                text: ‘折线图名称'
            }, toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            legend: {
                
            },
            tooltip: {
                trigger: 'axis',//鼠标放到折线上显示数据
            },xAxis : [{
                'type':'category',
                 data: [1,2,3,4,5,6,7,8,9,10,11,12]//月份
                }
            ],
            yAxis: [
                {
                    type: 'value',
                   data:[]
                }
            ],series: [
                      
                       ]
        };
        
        $.ajax({
            type: "POST",
            async: true, //同步执行
            url: url,/访问的url
            dataType: "json", //返回数据形式为json,
            data: {
                "token": get_cookie("token")//需要传的数据
            },
            success: function(jsons){
            console.log(jsons);
           
              var legends = [];// 准备存放图例数据  
                var Series = []; // 准备存放图表数据  
                var json = jsons.data;// 后台返回的json  
                $.each(json,function (key, value) {
                    var it = new Object();  
                    it.name = key;// 先将每一项填充数据  
                    legends.push(key);// 将每一项的图例名称也放到图例的数组中  
                    it.data = value;  
                    it.type='bar';
                    Series.push(it);// 将item放在series中  
                });  
               // option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了,需要注意:option.xAxis.data = json.xcontent这样不行  
                option.legend.data = legends;// 设置图例  
                option.series = Series; // 设置图表  
                ECharts.setOption(option);// 重新加载图表  
             }, error:function(){  
                  alert("数据加载失败!请检查数据链接是否正确");  
             } 
        });
       
        // 使用刚指定的配置项和数据显示图表。
        ECharts.setOption(option);

    }


后台:

返回的是个Map<String,int[]> 数据结构int中放的是每个月的数据,key是要统计的


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值