Echarts仪表盘

最新推荐文章于 2024-06-21 11:27:08 发布

Akimoto Hiroshi

最新推荐文章于 2024-06-21 11:27:08 发布

阅读量186

点赞数

分类专栏： echarts 文章标签： echarts html javascript

本文链接：https://blog.csdn.net/dyw3390199/article/details/120630904

版权

echarts 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>仪表盘</title>
  <script src="./lib/echarts.js"></script>
  <script src="./lib/axios.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))

    var option = {
      series: [
        {
          type: 'gauge',
          data: [
            // 每一个对象代表一个指针
            {
              value: 88
            }
          ]
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>

在这里插入图片描述

配置数值范围

在这里插入图片描述

配置多个指针

在这里插入图片描述

指针颜色配置

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<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>仪表盘</title>
  <script src="./lib/echarts.js"></script>
  <script src="./lib/axios.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))

    var option = {
      series: [
        {
          type: 'gauge',
          data: [
            // 每一个对象代表一个指针
            {
              value: 88,
              itemStyle: {
                color: 'red'
              }
            },
            {
              value: 70,
              itemStyle: {
                color: 'darkblue'
              }
            }
          ],
          min: 50
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts仪表盘

<!DOCTYPE html><html lang="en"><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>仪表盘</ti.
复制链接

扫一扫

专栏目录