图表7 仪表盘图

Qwe7

发布于 2022-06-16 11:49:45

5720

发布于 2022-06-16 11:49:45

文章被收录于专栏：网络收集

7、图表7 仪表盘图

1.仪表盘的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
  <html lang="en">

  <head>
    <script src="js/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px;height:400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector("div")) var option = {}
      mCharts.setOption(option)
    </script>
  </body>

</html>

此时 option 是一个空空如也的对象

步骤2: 准备数据, 设置给 series 下的 data

data:[97]

步骤3: 在 series 下设置 type:gauge

var option = {
  series: [{
    type: 'gauge',
    data: [{
      value: 97,
    }]
  }]
}

2.仪表盘的常见效果

数值范围: max min

多个指针: 增加data中数组的元素

多个指针颜色的差异: itemStyle

var option = {
  series: [{
    type: 'gauge',
    data: [{
      value: 97,
      itemStyle: {
        color: 'pink'
      }
    }, {
      value: 85,
      itemStyle: {
        color: 'green'
      }
    }],
    min: 50
  }]
}