169Echarts - 仪表盘(Gauge)

简介: 169Echarts - 仪表盘(Gauge)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [{
          name: '业务指标',
          type: 'gauge',
          detail: {
            formatter: '{value}%'
          },
          data: [{
            value: 50,
            name: '完成率'
          }]
        }]
      };
      setInterval(function() {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(option, true);
      }, 2000);
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
5月前
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
322 2
Vue3使用echarts仪表盘(gauge)
关于ECharts仪表盘的全部相关配置
关于ECharts仪表盘的全部相关配置
111 0
echarts仪表盘更换样式全圆形换成半圆
echarts仪表盘更换样式全圆形换成半圆
145 0
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
188 0
170Echarts - 仪表盘(Gauge Car Dark)
170Echarts - 仪表盘(Gauge Car Dark)
47 0
170Echarts - 仪表盘(Gauge Car)
170Echarts - 仪表盘(Gauge Car)
40 0
Echarts案例:整一个炫酷一点的仪表盘
Echarts案例:整一个炫酷一点的仪表盘
834 1
Echarts案例:整一个炫酷一点的仪表盘
|
3月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
88 1