欢迎来到甘丰迟的博客,更新中...

svg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="svg/logo.svg" width="180" height="80" />
  </body>
</html>

map 地图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>自定义定位点图标</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=2cc7acd5402708b09bffcd61c0b47e2a"
    ></script>
    <script type="text/javascript">
      //初始化地图对象，加载地图
      var map = new AMap.Map("container", {
        resizeEnable: true,
      });
      var options = {
        showButton: true, //是否显示定位按钮
        buttonPosition: "LB", //定位按钮的位置
        /* LT LB RT RB */
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
        showMarker: true, //是否显示定位点
        markerOptions: {
          //自定义定位点样式，同Marker的Options
          offset: new AMap.Pixel(-18, -36),
          content:
            '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
        },
        showCircle: true, //是否显示定位精度圈
        circleOptions: {
          //定位精度圈的样式
          strokeColor: "#0093FF",
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: "#02B0FF",
          fillOpacity: 0.25,
        },
      };
      AMap.plugin(["AMap.Geolocation"], function () {
        var geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
      });
    </script>
  </body>
</html>

svg object embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <object data="svg/logo.svg" type="image/svg+xml"></object>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <embed src="svg/logo.svg" type="image/svg+xml"></embed>
</body>
</html>

xml

<?xml version="1.0" encoding="utf-8"?>
<root>
  <book id="1">
      <名称>XML完全探索</名称>
      <price>99</price>
  </book>
  <book id="1">
      <名称>XML完全探索</名称>
      <价格>99</价格>
      <img src="a.gif"/>
  </book>
  <book id="1">
      <名称>XML完全探索</名称>
      <price>99</price>
  </book>
</root>

svg polyline

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="800"
      height="480"
      stroke-width="5"
      stroke="red"
      fill="transparent"
    >
      <polyline points="20,300,100,80,150,270,400,50"></polyline>
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="800"
      height="480"
      stroke-width="5"
      stroke="red"
    >
      <line x1="20" y1="20" x2="150" y2="20"></line>
      <line x1="150" y1="20" x2="150" y2="150"></line>
      <line x1="150" y1="150" x2="20" y2="150" stroke="#000"></line>
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="600"
      height="400"
      stroke="#f00"
    >
      <rect x="50" y="50" width="100" height="200" fill="transparent"></rect>
      <rect
        x="200"
        y="50"
        width="100"
        height="200"
        fill="transparent"
        rx="20"
        ry="20"
      ></rect>
    </svg>
  </body>
</html>

svg dom

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      <button onclick="drawLine()">单击我，创建SVG中的line元素</button>
    </p>
    <script>
      function drawLine() {
        //创建指定命名空间内的元素
        let svgEle = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        //设置SVGSVGElement元素的宽度和高度
        svgEle.setAttribute("width", 800);
        svgEle.setAttribute("height", 400);
        svgEle.setAttribute("version", "1.1");
        //创建SVGLineElement元素
        let lineEle = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line"
        );
        //设置SVGLineElement元素属性
        lineEle.setAttribute("x1", 50);
        lineEle.setAttribute("y1", 50);
        lineEle.setAttribute("x2", 150);
        lineEle.setAttribute("y2", 50);
        lineEle.setAttribute("stroke", "red");
        //将line元素添加到SVG元素内部
        svgEle.appendChild(lineEle);
        //将SVG元素添加到body元素内
        document.body.appendChild(svgEle);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="600"
      height="300"
    >
      <a
        xlink:href="http://www.baidu.com"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        target="_blank"
      >
        <text x="50" y="50" font-size="30">百度</text>
      </a>
    </svg>
  </body>
</html>

echats

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/echarts.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      function getVirtulData(year) {
        year = year || "2017";
        var date = +echarts.number.parseDate(year + "-01-01");
        var end = +echarts.number.parseDate(+year + 1 + "-01-01");
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        for (var time = date; time < end; time += dayTime) {
          data.push([
            echarts.format.formatTime("yyyy-MM-dd", time),
            Math.floor(Math.random() * 10000),
          ]);
        }
        return data;
      }

      var data = getVirtulData(2016);

      option = {
        backgroundColor: "#404a59",

        title: {
          top: 30,
          text: "2016年某人每天的步数",
          subtext: "数据纯属虚构",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "30",
          left: "100",
          data: ["步数", "Top 12"],
          textStyle: {
            color: "#fff",
          },
        },
        calendar: [
          {
            top: 100,
            left: "center",
            range: ["2016-01-01", "2016-06-30"],
            splitLine: {
              show: true,
              lineStyle: {
                color: "#000",
                width: 4,
                type: "solid",
              },
            },
            yearLabel: {
              formatter: "{start}  1st",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              color: "#323c48",
              borderWidth: 1,
              borderColor: "#111",
            },
          },
          {
            top: 340,
            left: "center",
            range: ["2016-07-01", "2016-12-31"],
            splitLine: {
              show: true,
              lineStyle: {
                color: "#000",
                width: 4,
                type: "solid",
              },
            },
            yearLabel: {
              formatter: "{start}  2nd",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              color: "#323c48",
              borderWidth: 1,
              borderColor: "#111",
            },
          },
        ],
        series: [
          {
            name: "步数",
            type: "scatter",
            coordinateSystem: "calendar",
            data: data,
            symbolSize: function (val) {
              return val[1] / 500;
            },
            itemStyle: {
              color: "#ddb926",
            },
          },
          {
            name: "步数",
            type: "scatter",
            coordinateSystem: "calendar",
            calendarIndex: 1,
            data: data,
            symbolSize: function (val) {
              return val[1] / 500;
            },
            itemStyle: {
              color: "#ddb926",
            },
          },
          {
            name: "Top 12",
            type: "effectScatter",
            coordinateSystem: "calendar",
            calendarIndex: 1,
            data: data
              .sort(function (a, b) {
                return b[1] - a[1];
              })
              .slice(0, 12),
            symbolSize: function (val) {
              return val[1] / 500;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            itemStyle: {
              color: "#f4e925",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
          {
            name: "Top 12",
            type: "effectScatter",
            coordinateSystem: "calendar",
            data: data
              .sort(function (a, b) {
                return b[1] - a[1];
              })
              .slice(0, 12),
            symbolSize: function (val) {
              return val[1] / 500;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            itemStyle: {
              color: "#f4e925",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
上次更新:
作者: ganfengchi