zoukankan      html  css  js  c++  java
  • brush图标

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <div id="wrapper">
      <div id="chart-area">
    
      </div>
      <div id="chart-bar">
    
      </div>
    </div>
    body {
      background: #000524;
    }
    
    #wrapper {
      padding-top: 20px;
      background: #000524;
      border: 1px solid #000;
      box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);
      max-width: 650px;
      margin: 35px auto;
    }
    
    #chart-bar {
      position: relative;
      margin-top: -38px;
    }
    var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
      min: 30,
      max: 90
    });
    var options1 = {
      chart: {
        id: "chart2",
        type: "area",
        height: 230,
        foreColor: "#ccc",
        toolbar: {
          autoSelected: "pan",
          show: false
        }
      },
      colors: ["#00BAEC"],
      stroke: {
         3
      },
      grid: {
        borderColor: "#555",
        yaxis: {
          lines: {
            show: false
          }
        }
      },
      dataLabels: {
        enabled: false
      },
      fill: {
        gradient: {
          enabled: true,
          opacityFrom: 0.55,
          opacityTo: 0
        }
      },
      markers: {
        size: 5,
        colors: ["#000524"],
        strokeColor: "#00BAEC",
        strokeWidth: 3
      },
      series: [
        {
          data: data
        }
      ],
      tooltip: {
        theme: "dark"
      },
      xaxis: {
        type: "datetime"
      },
      yaxis: {
        min: 0,
        tickAmount: 4
      }
    };
    
    var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);
    
    chart1.render();
    
    var options2 = {
      chart: {
        id: "chart1",
        height: 130,
        type: "bar",
        foreColor: "#ccc",
         {
          target: "chart2",
          enabled: true
        },
        selection: {
          fill: {
            color: "#fff",
            opacity: 0.4
          },
          xaxis: {
            min: new Date("27 Jul 2017 10:00:00").getTime(),
            max: new Date("14 Aug 2017 10:00:00").getTime()
          }
        }
      },
      colors: ["#FF0080"],
      series: [
        {
          data: data
        }
      ],
      stroke: {
         2
      },
      grid: {
        borderColor: "#444"
      },
      markers: {
        size: 0
      },
      xaxis: {
        type: "datetime",
        tooltip: {
          enabled: false
        }
      },
      yaxis: {
        tickAmount: 2
      }
    };
    
    var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);
    
    chart2.render();
    
    function generateDayWiseTimeSeries(baseval, count, yrange) {
      var i = 0;
      var series = [];
      while (i < count) {
        var x = baseval;
        var y =
          Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
    
        series.push([x, y]);
        baseval += 86400000;
        i++;
      }
      return series;
    }
  • 相关阅读:
    学习记录-1
    初识CSS3 3D效果,浅谈理解
    so easy,too happy
    软件工程作业----自我介绍
    从零玩转JavaWeb系列7web服务器-----表单的提交
    从零玩转JavaWeb系列7web服务器-----get与post的区别
    从零玩转JavaWeb系列7web服务器-----用户登录界面二维码的制作
    mina 粘包、多包和少包的解决方法
    《MFC游戏开发》笔记十 游戏中的碰撞检测进阶:地图类型&障碍物判定
    使用 mina 传输大字节数组
  • 原文地址:https://www.cnblogs.com/journey-mk5/p/9763248.html
Copyright © 2011-2022 走看看