<!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>
标签:show,color,type,bootstrap,var,180,组件,true,card From: https://www.cnblogs.com/caroline2016/p/16905502.html