zoukankan      html  css  js  c++  java
  • 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:

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

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

  • 相关阅读:
    CSS基础——基本单位
    CSS基础——表格
    CSS基础——列表
    Single-Source Shortest Paths
    Maximum Flow
    Breadth-First Search
    Depth-First Search (III)
    Depth-First Search (II)
    Depth-First Search (I)
    Simple Complete Search
  • 原文地址:https://www.cnblogs.com/Bkxk/p/9371761.html
Copyright © 2011-2022 走看看