Jquery +Ajax 请求Json文件，绘制Echarts 上下两个堆叠折线图

最新推荐文章于 2023-05-17 13:38:07 发布
最新推荐文章于 2023-05-17 13:38:07 发布
阅读量599 收藏 4
点赞数
分类专栏： javascript Echarts 文章标签： echarts ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44019370/article/details/120822506
版权

魁首

🔔一个没有天赋的前端程序员👨‍💻 💡博客

关注我🔰

🤖Github |🔑CSDN | 💎掘金 | 📖 知乎 | 💡博客 |

请添加图片描述

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts 上下两个堆叠折线图的实现</title>
</head>
<body>
    <div id="rateTable" style="height: 100%; width: 100%;min-height: 470px"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script>
    <!--Echarts在这里绘制-->
</script>
</html>

json数据格式

[
  {
    "dt": "2020-01-02",        //x轴日期
    "portfolio_net_value": 0.0,//数据1
    "SH_net_value": 0.0,       //数据2
    "alpha_net_value": 0.0,    //数据3
    "cur_drawdown_rate": 0.0   //数据4
  },
  {
    "dt": "2020-01-03",
    "portfolio_net_value": -0.0083730541368796,
    "SH_net_value": 0.0008564679888114,
    "alpha_net_value": -0.0092295221256908,
    "cur_drawdown_rate": -0.0083730541368796
  },
  {
    "dt": "2020-01-06",
    "portfolio_net_value": -0.0040413555084052,
    "SH_net_value": 0.0109406884571092,
    "alpha_net_value": -0.0148841629410285,
    "cur_drawdown_rate": -0.0040413555084056
  },
  {
    "dt": "2020-01-07",
    "portfolio_net_value": 0.0088552022531673,
    "SH_net_value": 0.0230293795826546,
    "alpha_net_value": -0.0139078885557082,
    "cur_drawdown_rate": 0.0
  },
  
]
复制代码

js部分

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script>
    var mychartdd = echarts.init(document.getElementById('rateTable'));
    var seriesName1 = '数据1';
    var seriesName2 = '数据2';
    var seriesName3 = '数据3';
    var seriesName4 = '数据4';
    var option = {
        legend: { // 图例
            data: [seriesName1, seriesName2, seriesName3, seriesName4],
            right: '10%',
        },
        dataZoom: [ // 底部红色数据框拖动条
            {
                id: 'datazoomX',
                type: 'slider',
                xAxisIndex: [0, 1],
                height: 20,
                top: '69%',
                right: 10,
                left: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                fillerColor: "rgba(255, 76, 31,.2)",
                dataBackground: {
                    areaStyle: {
                        color: ''
                    },
                    lineStyle: {
                        opacity: 1,
                        color: '#FF4C1F'
                    }
                },
                handleStyle: {
                    color: '#FF4C1F',
                },
                filterMode: 'weakFilter',
                zoomOnMouseWheel: 'false'
            },{
                id: 'dataZoomY',
                type: 'inside',
                xAxisIndex: [0, 1],
                filterMode: 'weakFilter',
                zoomOnMouseWheel: 'false'
            }
        ],
        tooltip: { // 鼠标悬停提示框组件
            trigger: 'axis',
            axisPointer: {
                type: 'cross', //十字准星指示器
            },
            formatter: function (datas) { //提示框浮层内容格式 
                var res = datas[0].name + '<br/>';
                var length = datas.length;
                var i = 0;
                for (; i < length; i++) {
                    res += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + datas[i].color + ';"></span>' + datas[i].seriesName + '：' + datas[i].value.toFixed(2) + '%' + '<br/>'
                }
                return res
            }
        },
        axisPointer: { // 坐标轴指示器
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
        grid: [ //直角坐标系内绘图网格
            {
                top: 20,
                left: 10,
                right: 0,
                bottom: 20,
                height: '60%',
            }, {
                left: 10,
                right: 0,
                bottom: 15,
                height: '20%',
            }
        ],
        xAxis:[
            {
                type: 'category',
                data: [],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#D8D8D8'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show:true,
                    textStyle: {
                        fontSize: 10,
                        color: '#222831'
                    },

                },
                splitLine: {
                    show: false
                },
                scale: true,
            },
            {
                type: 'category',
                gridIndex: 1,
                data: [],
                axisLine: {
                    lineStyle: {
                        color: "#D8D8D8"
                    }
                },
                scale: true,
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},

            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: false
                },
                splitNumber: 4,
                // max: 150,
                // logBase:10,
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 10,
                        color: '#808080',
                        align: 'left'
                    },
                    formatter: '{value} %'
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#D8D8D8'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#F5F5F5'
                    }
                },
                offset: -10,
            },
            {
                type: 'value',
                gridIndex: 1,
                offset: -10,
                axisLabel: {
                    show: true,
                    textStyle: {fontSize: 10, color: "#808080", align: 'left'},
                    formatter: '{value} %',
                },
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        series: [
            {
                name: seriesName1,
                type: 'line',
                data: [],
                color: "#FF7855",
                xAxisIndex: 0,
                yAxisIndex: 0,
                symbol: 'none',
            },
            {
                name: seriesName2,
                type: 'line',
                data: [],
                color: "#009DFF",
                xAxisIndex: 0,
                yAxisIndex: 0,
                symbol: 'none'
            },
            {
                name: seriesName3,
                type: 'line',
                data: [],
                color: "#FFBD00",
                xAxisIndex: 0,
                yAxisIndex: 0,
                symbol:'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255, 189, 0, .5)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 189, 0, 0)'
                        }
                    ])
                },
            },
            {
                name: seriesName4,
                type: 'line',
                data: [],
                color: '#769CFA',
                gridIndex: 1,
                xAxisIndex: 1, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
                yAxisIndex: 1,
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(115,156,250,0.05)'
                    }, {
                        offset: 0.76,
                        color: 'rgba(115,156,250,0.25)'
                    }])
                },
            }
        ]
    };

    mychartdd.setOption(option);

    /*请求json数据*/
    $(function(){
        var SoilTemp1 = [], SoilTemp2 = [], SoilTemp3 = [], SoilTemp4 = [];// Y坐标值：各项指标数据
        var TM = [];// x坐标值:时间
        mychartdd.showLoading({ text: "图表数据正在加载中.....如果加载不出来，建议使用WebStorm工具打开" });
        $.ajax({
            type: "GET",
            // 请求地址
            url: "json/html1.json",
            // async:true,    //是否异步
            // dataType: "jsonp",  //预期的服务器响应的数据类型。
            // jsonp: "callback",  //在一个 jsonp 中重写回调函数的字符串。
            // xhrFields: {withCredentials: true},
            success: function (ret) {
                var date = ret;
                if (date == null) {
                    mychartdd.showLoading({ text: "未获取到数据，请选择正确的时间..." });
                }
                // 遍历上面 '数据1','数据2','数据3'
                for (var i = 0; i < date.length; i++) {
                    TM.push(date[i].dt); //时间
                    SoilTemp1.push(date[i].portfolio_net_value); //数据1
                    SoilTemp2.push(date[i].SH_net_value); //数据2
                    SoilTemp3.push(date[i].alpha_net_value); //数据3
                }
                // 遍历下面 ‘数据4’ 数据
                for (var j = 0; j < date.length; j++) {
                    SoilTemp4.push(date[j].cur_drawdown_rate); //数据4
                }
                mychartdd.hideLoading();    //隐藏加载动画
                mychartdd.setOption({       //加载数据图表
                    tooltip: [
                        {
                            trigger: 'axis'
                        },
                    ],
                    toolbox: { // 工具栏
                        show: false,
                        feature: {
                            saveAsImage: { show: false }, // 保存为图片
                            restore: { show: false },
                        },
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: TM
                        },
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: TM
                        },
                    ],
                    yAxis: [{},{}],//注意一定不能丢了这个，不然图表Y轴不显示
                    series: [
                        {
                            name: seriesName1,
                            type: 'line',
                            data: SoilTemp1
                        },
                        {
                            name: seriesName2,
                            type: 'line',
                            data: SoilTemp2
                        },
                        {
                            name: seriesName3,
                            type: 'line',
                            data: SoilTemp3
                        },
                        {
                            name: seriesName4,
                            type: 'line',
                            data: SoilTemp4
                        }
                    ]
                });
            }
        });
    });
</script>
复制代码

看完感觉对你有帮助，记得关注 我 !

领秀5858
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Highcharts：bar折线图+jQuery+Ajax+json+springMVC
洪君的博客
11-11 435
Highcharts：纯JavaScript图表库 echarts教程，快速上手:echarts bar折线图，统计报表   Highcharts   上图是成品。 首先，导入highcharts的资源文件。 再然后，在html中定义一个div层，用来承装图表 &lt;div id="container" style="min-width:700px;height:400px...
Echarts--Ajax动态实现折线图
www_96的博客
11-28 1155
Echarts–Ajax动态实现折线图 第一次使用Echarts。利用springboot搭建java项目框架，前端利用Echarts的折线图模板实现数据展示。 1.搭建springboot框架 详细查看上一篇博客 2.Echarts素材 百度下载需要的素材 3.修改代码 注意： 用ajax需要导入jquery $.ajax <!DOCTYPE html> <html sty...
echart ajax json,echart多条折线图ajax请求json数据
weixin_42097967的博客
08-06 206
//折线图$.ajax({url:"test.json",data: {},type:‘GET‘,success:function(data) {console.log(JSON.stringify(data))bloodFun(data.echatX, data.echatY,data.echatY2);},});//基于准备好的dom，初始化echarts实例var bloodChart = ...
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件echarts实现的多折线图效果,结合完整实例形式分析了echarts插件绘制多折线图效果的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
echat 上下两个折线图 共用一个y轴，滚动条
qq_45823368的博客
05-17 740
【代码】echat 上下两个折线图 共用一个y轴，滚动条。
饼图ajax请求数据如何写,饼图如何动态获取数据
weixin_35241774的博客
08-05 202
@贫民窟大侠:function showPie(){ $.ajax({ type: "get", url: "csylLine.json", async: true, dataType: "json", success:function(data){ $('#pieChart').highcharts({ chart : { plotBackgroundColor : null, plotBord...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
weixin_39661589的博客
08-06 527
本文实例讲述了jquery.flot.js简单绘制折线图用法。分享给大家供大家参考，具体如下：1、完整实例代码：折线图$(function() {AlPriceQuery();});function AlPriceQuery(){var result = {AvgPrice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 140...
echarts后台读取数据动态生成折线图
05-09
实现了由php读取数据库后json编码传到前端ajax中，实现echarts折线图的实时刷新，(得放到你的Apache htdocs文件下用浏览器打开)内附我的echarts包和jQuery包。
Echarts实现单条折线可拖拽效果
10-15
1) **封装Echarts折线图方法**：首先，我们需要将Echarts折线图的配置和绘制逻辑封装到一个自定义函数中，例如`coinConsumeChart()`。这样做是为了提取出共通部分，方便复用和维护。在这个函数中，我们可以设置图表...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化2
08-03
Echarts是一个强大的、基于JavaScript的开源数据可视化库，能够帮助我们创建各种图表，如柱状图、折线图、饼图等。PHP是后端语言，常用于处理服务器端逻辑，如与数据库交互。Ajax则是一种在不刷新整个页面的情况下...
基于Echarts 3.19 制作常用的图形(非静态)
09-02
Echarts是一个流行的、开源的JavaScript可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，适用于大数据的可视化展示。Echarts 3.19版本虽然较旧，但其核心功能仍然强大，能够满足大部分数据可视化的...
JS画图,柱状图,饼图,折线图,例子代码
04-22
本主题将深入探讨如何使用JS实现柱状图、饼图和折线图的绘制，以及如何实现数据与代码的分离，使得代码更加可维护和灵活。 首先，让我们了解一下柱状图。柱状图是一种用于比较不同类别数据的有效方式。在JS中，我们...
JQUERY插件学习之jqPlot
热门推荐
bravezhe的专栏
06-15 2万+
JS图表，有HighCharts、JqPlot、JsChart，其中HighCharts和JsChart只能用作个人使用、为了以后项目中能使用，在这用了JqPlot（个人和商业都免费），先学习下。         关于JqPlot的下载可以去：www.jqplot.com/        关于JqPlot的详细中文配置参考：http://blog.csdn.net/gaoyusi4964238
利用jQuery来实现Ajax
xihuanLilia的博客
03-03 1655
Ajaxget()不带参数时带参数时post()ajax（）使用$.ajax()发起get请求使用$.ajax() 发起POST请求 get() 在jQuery中 $.get()函数的功能比较单一 它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用 $.get()函数的语法如下 $.get( url , [data] ,{callback}) 第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址 第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数
js实现折线统计图引入html,jQuery实现折线图的方法
weixin_36156209的博客
06-20 716
本文实例讲述了jQuery实现折线图的方法。分享给大家供大家参考。具体如下：效果图如下所示：js引用：定时刷新：//曲线图ar chart;$(document).ready(function() {chart = new Highcharts.Chart({chart: {renderTo: 'divChart', //放置图表的容器plotBackgroundColor: n...
用异步ajax（jquery）请求后台接口数据实现echarts图表
代码帮
10-12 1388
通常实现实现echarts图表用异步ajax（jquery）请求后台接口数据，现在举例python,flask项目 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
JQ+echarts实现可拖动节点的折线图（支持拖动方向设置-仅上下、仅左右、坐标轴内自由拖动）
Feng_1012的博客
05-12 663
JQ+echarts实现可拖动节点的折线图（支持拖动方向设置-仅上下、仅左右、坐标轴内自由拖动）
ajax画图表源码,使用JCharts生成图表通过Ajax 基于JQuery
weixin_42437067的博客
08-07 220
使用JCharts生成统计图，下载网站：http://www.oschina.net/p/jcharts 。页面代码：String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"...
使用JSON和JQuery的ajax异步加载数据到Echarts图表
唐傘皮
07-10 928
如果傘皮不能用代码改变世界，那就改变自己就好了~ 如果有所帮助，请给俺点个赞哦~嘿嘿 文章目录一：Echarts图表二：JavaScript代码三：后台代码四：json样式 一：Echarts图表 在官方看文档时感觉还是很迷糊，于是就看了些大神的博客，也没有找到我想要的结果，但是在不断学习中，逐渐试探，还是搞出我自己想要的结果来了。我想要的是从后台用json将list<实体类>序列化成json字符串，然后发送到前端，从字符串中将数据显示到Echarts中。下面先将Echarts图表和效果图给.
jquery+ajax+json简单的登录注册
最新发布
06-01
好的，下面是一个简单的 jQuery、Ajax 和 JSON 实现的登录注册示例： HTML 代码： ```html 用户名"> 密码"> 登录 用户名"> 密码"> 确认密码"> 注册 ``` jQuery 代码： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值