ECharts折线图渲染json格式数据(格式为数组)

简介: ECharts折线图渲染json格式数据(格式为数组)

ECharts折线图渲染json格式数据(json格式,为数组)

需要对数组进行循环取值,将取到的值分别赋值给x轴和y轴

json格式,data为数组

{
    "msg": "查询成功",
    "code": 1,
    "data": [{      
        "statTime": "2021-03",      
        "noPatrolNum": 21
    }, {        
        "statTime": "2021-04",
        "noPatrolNum": 15
    }]
}

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折线图
            var names = []; //类别数组(实际用来盛放X轴坐标值)    
            var series = [];
            $.ajax({
                url: "test.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    //请求成功时执行该函数内容,data即为服务器返回的json对象           
                    $.each(data.data, function(index, item) {
                        names.push(item.statTime); //挨个取出类别并填入类别数组
                        series.push(item.noPatrolNum);
                    });
                    hFun(names, series);
                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));
            function hFun(x_data, y_data) {
                hrChart.setOption({
                    color: ['#1e63d8'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['漏检次数']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: {
                        splitLine: {
                            show: false
                        },
                        /* 改变x轴颜色 */
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 这里是为了突出显示加上的
                            }
                        },
                        type: 'category',
                        data: x_data,
                    },
                    yAxis: { // 纵轴标尺固定
                        splitLine: {
                            show: false
                        },
                        type: 'value',
                        scale: true,
                        name: '漏检次数',
                        min: 0, // 就是这两个 最小值
                        max: 'dataMax', // 最大值
                        splitNumber: 10,
                        /* 改变y轴颜色 */
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 这里是为了突出显示加上的
                            }
                        },
                        boundaryGap: [0.2, 0.2]
                    },
                    series: [{
                        name: '漏检次数',
                        type: 'line',
                        symbol: 'circle', // 折线点设置为实心点
                        symbolSize: 6, // 折线点的大小
                        itemStyle: {
                            normal: {
                                color: "#1bdaf8", // 折线点的颜色
                                lineStyle: {
                                    color: "#0d427e" // 折线的颜色
                                }
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#0e4b7a" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#0d3f70" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#0c3367" // 100% 处的颜色
                                }], false)
                            }
                        },
                        data: y_data
                    }]
                }, true);
            }
        </script>
    </body>
</html>

目录
打赏
0
0
0
0
10
分享
相关文章
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
探索大型语言模型LLM推理全阶段的JSON格式输出限制方法
本篇文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
对比JSON和Hessian2的序列化格式
通过以上对比分析,希望能够帮助开发者在不同场景下选择最适合的序列化格式,提高系统的整体性能和可维护性。
121 3
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
探索LLM推理全阶段的JSON格式输出限制方法
文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
587 12
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
springboot中表字段映射中设置JSON格式字段映射
springboot中表字段映射中设置JSON格式字段映射
183 1
如何在Python中高效实现CSV到JSON的数据转换
在实际项目中,数据格式转换是常见问题,尤其从CSV到JSON的转换。本文深入探讨了多种转换方法,涵盖Python基础实现、数据预处理、错误处理、性能优化及调试验证技巧。通过分块处理、并行处理等手段提升大文件转换效率,并介绍如何封装为命令行工具或Web API,实现自动化批量处理。关键点包括基础实现、数据清洗、异常捕获、性能优化和单元测试,确保转换流程稳定高效。
104 82
|
1月前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
42 12
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
101 1
抓取和分析JSON数据:使用Python构建数据处理管道