Echrtart 数据对接

来源：互联网发布：域名后缀的区别编辑：程序博客网时间：2024/05/18 02:27

本人是个菜比。。。写的不好希望大家见谅。。。

但是我相信我会变成大牛的。。。哈哈

这个是我最近搞得一个Echart 图表。虽然没有真正让数据活起来，但是还好吧！

废话不多说直接上代码

demo1:

这是一个jsp 的demo，

<%@ page language="java" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE html><html><head>    <title>数据展示</title></head><body><div id="mainbar" style="width: 1000px;height:400px;"></div><script src="<%=path %>/js/jquerylib/jquery-1.11.1.min.js"></script><!-- 引入 echarts.js --><script src="<%=path %>/js/data/echarts.js"></script><script>    // 基于准备好的dom，初始化echarts实例    var myChart0 = echarts.init(document.getElementById('mainbar'));    // 指定图表的配置项和数据    option = {        color: ['#fdca00'],        tooltip : {            trigger: 'axis',            axisPointer : {            // 坐标轴指示器，坐标轴触发有效                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'            }        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        xAxis : [            {                type : 'category',                data : ['设计师', '企业', '普通用户'], // 顺序不能变                axisTick: {                    alignWithLabel: true                }            }        ],        yAxis : [            {                type : 'value'            }        ],        series : []    };    // 使用刚指定的配置项和数据显示图表。    myChart0.setOption(option);    // 异步加载数据    $.post(        '<%=path%>/data/getStatisticsData.shtml','json'    ).done(function (data) {        console.log(data);        // 填入数据        myChart0.setOption({            series : [                {                    name:'注册数量',                    type:'bar',                    barWidth: '60%',                    data:data                }            ]        });    });</script></body></html>

demo2；

这是一个html的demo

<div class="row">    <div id="main" style="width: 1600px;height:450px;"></div></div>

其实都是一样的

<script type="text/javascript">    $(function desktoprefresh () {        //ajax动态取数据        $.ajax({            data: {"orgkey": "c71badcc543e4c968275025f1896ec5f"},            type: "POST",            dataType: "json",            url: "/admin/desktop/netpost",            error: function (data) {                console.log("data:" + data);                alert("当前没有DeskTop在运行哦！");            },            success: function (data) {                console.log("success data:" + data);                if (data.success) {                    var list1=data.payload.list1;                    var list2=data.payload.list2;                    var list3=data.payload.list3;                    // 基于准备好的dom，初始化echarts实例                    var myChart = echarts.init(document.getElementById('main'));                    option = {                        tooltip: {                            trigger: 'axis',                            position: function (pt) {                                return [pt[0], '10%'];                            }                        },                        title: {                            left: 'center',                            text: 'Vdyoo DesktopNetWorkStatus',                        },                        toolbox: {                            feature: {                                dataZoom: {                                    yAxisIndex: 'none'                                },                                restore: {},                                saveAsImage: {}                            }                        },                        xAxis: {                            type: 'category',                            boundaryGap: false,                            data: list3                        },                        yAxis: {                            type: 'value',                            boundaryGap: [0, '100%']                        },                        dataZoom: [{                            type: 'inside',                            start: 0,                            end: 10                        }, {                            start: 0,                            end: 10,                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',                            handleSize: '80%',                            handleStyle: {                                color: '#fff',                                shadowBlur: 3,                                shadowColor: 'rgba(0, 0, 0, 0.6)',                                shadowOffsetX: 2,                                shadowOffsetY: 2                            }                        }],                        series: [                            {                                name:'模拟带宽',                                type:'line',                                smooth:true,                                symbol: 'none',                                sampling: 'average',                                itemStyle: {                                    normal: {                                        color: 'rgb(255, 70, 131)'                                    }                                },                                areaStyle: {                                    normal: {                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                                            offset: 0,                                            color: 'rgb(255, 158, 68)'                                        }, {                                            offset: 1,                                            color: 'rgb(255, 70, 131)'                                        }])                                    }                                },                                data: list1                            },                            {                                name:'Test',                                type:'line',                                smooth:true,                                symbol: 'none',                                sampling: 'average',                                itemStyle: {                                    normal: {                                        color: 'rgb(255, 70, 131)'                                    }                                },                                areaStyle: {                                    normal: {                                        color: {                                            type: 'radial',                                            x: 0.5,                                            y: 0.5,                                            r: 0.5,                                            colorStops: [{                                                offset: 0, color: 'red' // 0% 处的颜色                                            }, {                                                offset: 1, color: 'blue' // 100% 处的颜色                                            }],                                            globalCoord: false // 缺省为 false                                        }                                    }                                },                                data: list2                            }                        ]                    };                    // 使用刚指定的配置项和数据显示图表。                    myChart.setOption(option);                } else {                    alert(data.payload.msg);                }            }        });        setInterval(desktoprefresh, 60000);    });</script>

当然了这些数据都是咱们在后台准备好了的数据

我想这也不是什么难事！

我的数据是从Es上搜索出来的

搜索出来后组装一下就ok了

当然了从数据库里面取也是没问题的

这个html使用ajax动态刷新请求可以让数据进行改变！

我的数据这样的

{"payload":{"list1":[246,246,246,246,246,4294967,432,325,525,100000,525,525,525,4294967,0,246,338,205,246,4294967,246,246,192,4294967,301,246,246,1459,920,246,246,246,246,192,255,525],"list3":["15:33","15:29","15:24","15:34","15:38","15:44","15:41","15:44","15:48","15:24","15:45","15:46","15:47","15:38","15:22","15:37","15:42","15:22","15:31","15:41","15:35","15:32","15:40","15:22","15:23","15:25","15:26","15:43","15:42","15:27","15:36","15:30","15:28","15:39","15:43","15:49"],"list2":[1310,425,690,876,1156,1000,712,1017,656,1891,656,656,656,1000,0,745,651,918,318,1000,956,732,950,1000,585,351,278,1908,1888,263,759,317,352,950,736,656]},"message":"","error":"","success":true}]

这就是我的页面！

阅读全文

0 0