利用eChart绘制网页图表

最新推荐文章于 2023-07-20 14:21:49 发布

weixin_34357887

最新推荐文章于 2023-07-20 14:21:49 发布

阅读量490

点赞数

文章标签： javascript json java ViewUI

首先，最好的教程在这里：eCchart

eCahrt所需JS：echarts.min.js

页面代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title>详情</title>
  <t:base type="jquery,easyui,tools,DatePicker"></t:base>
  <style type="text/css">
    #lightCattle{
        position: absolute;
        top: 390px;
    }
  </style>
  <script type="text/javascript" src="echarts.min.js"></script>

 </head>
 <body style="overflow-y: auto; overflow-x: hidden;width: 100%">
        <div id="lightCattle">
            时间选择：<t:dictSelect id="date" field="date" type="list"  typeGroupCode="dateSelect" defaultVal="1" hasLabel="false"  title="日期选择" ></t:dictSelect>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            指标选择：<t:dictSelect id="dex" field="dex" type="list"  typeGroupCode="dexSelect" defaultVal="weight" hasLabel="false"  title="指标选择" ></t:dictSelect>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="easyui-linkbutton l-btn" onclick="doSearch()" href="#"><span class="l-btn-text icon-search l-btn-icon-left">查询</span></a>
            <br><br>
            <div id="main" style="width: 1500px;height:300px; position: absolute;"></div>
        </div>
        <br>
  <script type="text/javascript">
    $(document).ready(function(){
        lightCattleSearch();
    });
    function doSearch(){
        $.messager.progress({ 
            title: '提示', 
            msg: '数据加载中，请稍后......', 
            text: '',
            interval:'500'
        });
        var clientNcode = $("#clientNcode").val();
        var date = $("#date").val();
        var dex = $("#dex").val();
        
        var url = "ClientManageController.do?doSearch";
        $.ajax({
            type:"POST",
            url:url,
            data:{
                clientNcode:clientNcode,
                date:date,
                dex:dex
            },
            success:function(data){
                //data是一个map
                $.messager.progress('close');
                var result = jQuery.parseJSON(data);//也可以这么写：JSON.parse(data);
                tubiao(result.str,result.dexSelect);
            }
        });
    }
    
    function tubiao(data,name){
        var datas = new Array();
        //data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
        //data = JSON.parse(data);
        var myobj=eval(data);
        for(var i=0;i<myobj.length;i++){
            var arry = new Array();
            arry[0]=myobj[i][0];
            arry[1]=myobj[i][1];
            datas[i]=arry;
        } 
        
        var dateList = datas.map(function (item) {
            return item[0];
        });
        var valueList = datas.map(function (item) {
            return item[1];
        });
        
        var  option = {
        
            // Make gradient line here
            visualMap: [{
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
            }],
        
        
            title: [{
                top:'0%',
                left: 'center',
                text: name
            }],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                data: dateList
            }],
            yAxis: [{
                
                splitLine: {show: true},
                
            }],
            grid: [{
                top: '90%',
                bottom: '87%'
            }],
            series: [{
                type: 'line',
                smooth: true,
                showSymbol: false,
                show:true,
                data: valueList
            }]
        };
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    }
  </script>
 </body>

java后台返回的map数据代码：

{dexSelect=周数据, str=[["2017-11-16 07:22:13",74.35],["2017-11-17 07:23:45",75.55],["2017-11-18 07:21:55",76.15],["2017-11-19 07:36:18",74.7],["2017-11-20 07:33:35",74.1]]}

出来的页面效果如下图：

weixin_34357887

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用eChart绘制网页图表

首先，最好的教程在这里：eCcharteCahrt所需JS：echarts.min.js页面代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;详情&lt;/title&gt; &lt;t:base type="jquery,easyui,tools,DatePicker"&gt;&lt;
复制链接

扫一扫