• Layui-ECharts-百度地图API


    ECharts:
    1.第一个试例:
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="<%=basePath%>content/layer/layer.js"></script>
    <script src="<%=basePath%>content/echarts/echarts.min.js"></script>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件(一般不使用) -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>

    </head>
    <body>

    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style=" 600px;height:400px;">

    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
    title: {
    text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
    data:['销量']
    },
    xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
    }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
    </div>

    </body>
    </html>

    2.


    -----------------------------------------------------------------------------
    Layui:

    -----------------------------------------------------------------------------
    百度地图:

    -----------------------------------------------------------------------------

  • 相关阅读:
    年薪30W的软件测试“老司机”工作经验
    软件测试的痛点有哪些?
    学会高效管理时间,健康工作
    一周面试十家公司,分享面试经历
    电子公文传输系统安全进展二
    常用国外会议出版社及出版社地址
    linux中wget命令
    python中 从gff文件提取指定基因信息
    R语言中空值NA、""、NULL的区别
    python 中列出指定目录中文件的绝对路径
  • 原文地址:https://www.cnblogs.com/Bkxk/p/9371761.html
Copyright © 2020-2023  润新知