Question

通过使用ECharts在这样的电路上制作两个仪表是否可行并且在下面的图像上看起来像？或者还有一些其他JS库已经实现了吗？

Answer 1

这是你需要的。根据您的需要进行自定义。

＆＃13;

$(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
      }
    }
  });
});

＆＃13;

<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>

＆＃13;

有用的文章：

两个仪表在一个完整的圆圈中

1 个答案: