zoukankan      html  css  js  c++  java
  • 图表------折线图

    @layout("/common/_container.html"){
    <div class="ibox float-e-margins">
    <div class="ibox-content">
    <h3 style="text-align:center;color:red;" id="ts"></h3>
    <div class="form-horizontal" id="temperatureCabinetInfoForm" >
    <div id="container" style="height:450px">
    </div>
    </div>
    </div>
    </div>
    <script src="${ctxPath}/static/modular/well/temperatureCabinet/temperatureCabinet_info.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    <script type="text/javascript">
    var aa = "${id}";
    //debugger;
    // console.log(aa);
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    //var app = {};
    option = null;
    $.ajax({
    url:Feng.ctxPath + "/temperatureSensor/zhexian",
    type:"post",
    data: {cabinet:aa},//井盖人员
    dataType:"json",
    success:function(data){
    /* var legend[] =data.list;
    var xAxis[] =data.listm; */
    var legends = [];
    legends=data.list;
    // alert(legends.length);
    if(legends.length>0){

    }else{
    $("#ts").html("暂无数据")
    }
    option = {
    tooltip: {
    trigger: 'axis'
    },
    legend: {
    data:data.list
    },
    grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
    },
    toolbox: {
    feature: {
    saveAsImage: {}
    }
    },
    xAxis: {
    name : '日期',
    type: 'category',
    boundaryGap: false,
    data: data.listm
    },
    yAxis: {
    name : '温度(℃)',
    type: 'value'
    },
    series:data.listp /* [
    {
    name:'上A',
    type:'line',
    //stack: '总量',
    data:[100.2,52,100,42.1]
    },
    {
    name:'上A',
    type:'line',
    //stack: '总量',
    data:[100,50]
    },
    {
    name:'上C',
    type:'line',
    //stack: '总量',
    data:[10,20,10,]
    },
    {
    name:'下B',
    type:'line',
    //stack: '总量',
    data:[100,52,10,42,76]
    },
    {
    name:'下C',
    type:'line',
    //stack: '总量',
    data:[20,20,10,402,96,38]
    }
    ] */
    }
    if (option && typeof option === "object") {
    myChart.setOption(option, true);
    }
    }
    })

    </script>
    @}

  • 相关阅读:
    The 2019 ICPC Asia Shanghai Regional Contest H Tree Partition k、Color Graph
    回溯法、子集树、排列树、满m叉树
    顺时针打印矩阵
    单调递增的数字
    nodejs
    nodejs + express + mangodb 项目搭建
    nodejs + express 项目初始化
    星星评分功能(带小数点的那种,5颗星,10分制)
    easyui 增加删除toolbar 显示异常问题
    sql 外键级联,触发器防删
  • 原文地址:https://www.cnblogs.com/cxiang/p/10387597.html
Copyright © 2011-2022 走看看