ECharts加载json数据解决方案

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

祈澈菇凉

5305人浏览 · 2019-04-22 16:39:00

祈澈菇凉 · 2019-04-22 16:39:00 发布

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>五分钟上手之散点图</title>
          <!-- 引入 echarts.js -->
          <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
          <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
     </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div style="height: 500px;width: 1000px;" id="main"></div>
        <script type="text/javascript">
         
      var myChart = echarts.init(document.getElementById("main"));
    
      var x_data = [1,2,3,4]
      var y_data = [1,20,3,40]
        myChart.setOption({
            title : {
                /*text : '睡眠质量监测',
                     textStyle:{
                      fontSize:12,
                        }*/
                    
            },
            tooltip : {
                trigger : 'axis'
            },
            xAxis : {
                data : x_data
            },
            yAxis : {
                splitLine : {
                    show : false
                }
            },
        /*  toolbox : {
                left : 'center',
                feature : {
                    dataZoom : {
                        yAxisIndex : 'none'
                    },
                    restore : {},
                    saveAsImage : {}
                }
            },*/
            dataZoom : [ {
                startValue : '2014-06-01'
            }, {
                type : 'inside'
            } ],
            visualMap : {
                top : 10,
                right : 10,
                pieces : [ {
                    gt : 1,
                    lte : 2,
                    label:'浅睡',
                    color : '#ff9933'
                }, {
                    gt : 2,
                    lte : 3,
                    label:'深睡',
                    color : '#cc0033'
                }, {
                    gt : 3,
                    lte : 4,
                label:'熟睡',
                    color : '#660099'
                } ],
                
                
                outOfRange : {
                    color : '#999'
                }
            },
            series : {
                name : '睡眠',
                type : 'line',
                data : y_data,
                markLine : {
                    silent : true,
                    data : [ {
                        yAxis : 1
                    }, {
                        yAxis : 2
                    }, {
                        yAxis : 3
                    } ]
                }
            }
        });
        myChart.setOption(option)          
        </script>
    </body>
</html>

模拟数据

json数据
https://echarts.baidu.com/examples/data/asset/data/aqi-beijing.json

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>五分钟上手之散点图</title>
          <!-- 引入 echarts.js -->
          <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
          <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
     </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div style="height: 500px;width: 1000px;" id="main"></div>
        <script type="text/javascript">
         
      var myChart = echarts.init(document.getElementById("main"));
    
     $.get('aqi-beijing.json', function (data) {
        myChart.setOption({
            title : {
                /*text : '睡眠质量监测',
                     textStyle:{
                      fontSize:12,
                        }*/
                    
            },
            tooltip : {
                trigger : 'axis'
            },
            xAxis : {
                 data: data.map(function (item) {
                return item[0];
            })
            },
            yAxis : {
                splitLine : {
                    show : false
                }
            },
        /*  toolbox : {
                left : 'center',
                feature : {
                    dataZoom : {
                        yAxisIndex : 'none'
                    },
                    restore : {},
                    saveAsImage : {}
                }
            },*/
            dataZoom : [ {
                startValue : '2014-06-01'
            }, {
                type : 'inside'
            } ],
            visualMap : {
                top : 10,
                right : 10,
                pieces : [ {
                    gt : 1,
                    lte : 2,
                    label:'浅睡',
                    color : '#ff9933'
                }, {
                    gt : 2,
                    lte : 3,
                    label:'深睡',
                    color : '#cc0033'
                }, {
                    gt : 3,
                    lte : 4,
                label:'熟睡',
                    color : '#660099'
                } ],
                
                
                outOfRange : {
                    color : '#999'
                }
            },
            series : {
                name : '睡眠',
                type : 'line',
                data: data.map(function (item) {
                return item[1];
            }),
                markLine : {
                    silent : true,
                    data : [ {
                        yAxis : 1
                    }, {
                        yAxis : 2
                    }, {
                        yAxis : 3
                    } ]
                }
            }
        });
        })
        myChart.setOption(option)     
        
        </script>
    </body>
</html>

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：2 个月前 )

960b763e 5 个月前

8c391e04 8 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m