javascript - 两个仪表在一整圈内-6ren

javascript - 两个仪表在一整圈内

转载作者：行者123 更新时间：2023-12-03 04:21:00

是否可以使用ECharts在一个电路上制作两个仪表，就像这里一样看起来像下面的图片吗？或者有其他 JS 库已经实现了这个功能吗？

最佳答案

这就是您所需要的。按照您想要的方式自定义它。

$(function() {
  $("#gauge").dxBarGauge({
    startValue: 0,
    endValue: 100,
    values: [47.27, 65.32, 84.59, 71.86],
    label: {
      indent: 30,
      format: {
        type: "fixedPoint",
        precision: 1
      },
      customizeText: function(arg) {
        return arg.valueText + " %";
      }
    },
    "export": {
      enabled: true
    },
    title: {
      text: "Series' Ratings",
      font: {
        size: 28
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>DevExtreme Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <script src="js/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" />
  <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" />
  <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="index.js"></script>
</head>

<body class="dx-viewport">
  <div class="demo-container">
    <div id="gauge"></div>
  </div>
</body>

</html>