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>
    @}

  • 相关阅读:
    geoserver发布地图服务WMTS
    geoserver发布地图服务WMS
    geoserver安装部署步骤
    arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
    arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
    cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)
    arcgis api 3.x for js 入门开发系列十二地图打印GP服务(附源码下载)
    arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
    arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)
    arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
  • 原文地址:https://www.cnblogs.com/cxiang/p/10387597.html
Copyright © 2011-2022 走看看