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

魁首

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

关注我🔰

🤖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>
复制代码

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

微信扫码订阅
UP更新不错过~
关注
  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

领秀5858

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值