<!DOCTYPE html>
<html lang="en" backgound="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link rel="stylesheet" href="../public/plugins/fontawesome-free/css/all.min.css" />
    <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
  </head>

  <body class="bg-light">
    <!-- content ------------------------------------- -->
    <div class="container-fluid mt-3">
      <div class="row mb-4">
        <div class="col-lg-3 col-6">
          <div class="card bg-info text-white">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-pie mr-1"></i>
                text5
              </p>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-5">
                  <h2 style="font-weight: bolder">70%</h2>
                  <p class="mt-4 mb-1">text6</p>
                  <p>1109 pcs</p>
                </div>
                <div class="col-7" id="echart1" style="height: 150px"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card bg-danger text-white">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-pie mr-1"></i>
                tex7
              </p>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-5"></div>
                <div class="col-7" id="echart1" style="height: 150px"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card bg-warning text-dark">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-pie mr-1"></i>
                tex8
              </p>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-5"></div>
                <div class="col-7" id="echart1" style="height: 150px"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card bg-success text-white">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-pie mr-1"></i>
                tex9
              </p>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-5"></div>
                <div class="col-7" id="echart1" style="height: 150px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-4">
        <div class="col-lg-3 col-6">
          <div class="card">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-bar mr-1"></i>
                tex10
              </p>
            </div>
            <div class="card-body">
              <div class="" id="echart5" style="height: 270px"></div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-bar mr-1"></i>
                tex10
              </p>
            </div>
            <div class="card-body">
              <div class="" id="echart6" style="height: 270px"></div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-bar mr-1"></i>
                tex10
              </p>
            </div>
            <div class="card-body">
              <div class="" id="echart7" style="height: 270px"></div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="card">
            <div class="card-header">
              <p class="card-title">
                <i class="fas fa-chart-bar mr-1"></i>
                tex10
              </p>
            </div>
            <div class="card-body">
              <div class="" id="echart8" style="height: 270px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../public/plugins/echarts.min.js"></script>
    <script>
      var chartDom = document.getElementById("echart1");
      var myChart = echarts.init(chartDom);
      myChart.showLoading();
      var option;
      option = {
        series: [
          {
            type: "gauge",
            itemStyle: {
              color: "#0e7686",
            },
            progress: {
              show: true,
              width: 18,
              itemStyle: {
                color: "#0e7686",
              },
            },
            axisLine: {
              lineStyle: {
                // color: [[1, "rgba(0,0,0,.125)"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 20,
              color: "white",
              offsetCenter: [0, "70%"],
              formatter: function (value) {
                return value.toFixed(0) + "%";
              },
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      };
      myChart.hideLoading();
      option && myChart.setOption(option);
    </script>
    <script>
      var chartDom1 = document.getElementById("echart5");
      var myChart1 = echarts.init(chartDom1);
      var option1;
      option1 = {
        darkMode: true,
        // textStyle: { color: "#fff" },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: { color: "#dc3545" },
          },
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: { color: "#ffc107" },
          },
        ],
      };

      option1 && myChart1.setOption(option1);

      window.onresize = function () {
        myChart1.resize();
      };
    </script>
  </body>
</html>

 

原文地址：http://www.cnblogs.com/caroline2016/p/16905502.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性