Echart仪表盘示例

javascript 复制代码
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>

<body style="height: 80%; margin: 0">
  <p1 id="p1">11111111111111111111111</p1>
  <div id="container" style="height: 80%"></div>


  <script type="text/javascript">
  
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'svg',
      useDirtyRect: false
    });
    var app = {};
    var option;
	option = {
    tooltip:{},
    legend:{},
	  series: [
      {
        type: 'gauge',
        //dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
        data: [
          {name:"时钟", value:1}, 
          {name:"秒钟", value:60}, 
          {name:"分钟", value:150}, 
        ]
      },

	  ]
	};  
  var i =0;
  function demo(){
    document.getElementById("p1").innerHTML=i;
    if(i%2){
      $.get('test1.json', function (graph) {

		  // 在这里可以处理读取到的数据
		  // 将数据绑定到Echarts中
		  //option.xAxis[0].data = graph.data;
      //option.xAxis[1].data = graph.data;
      //option.series[0].data = graph.raw;
      //option.series[1].data = graph.eff;
		  myChart.setOption(option);
	  })
    }else{
      $.get('test.json', function (graph) {

		  // 在这里可以处理读取到的数据
		  // 将数据绑定到Echarts中
		  //option.xAxis[0].data = graph.data;
      //option.xAxis[1].data = graph.data;
      //option.series[0].data = graph.raw;
      //option.series[1].data = graph.eff;
		  myChart.setOption(option);
	  })
    }
    setTimeout(demo,1000);
    i=i+1;
  }
  demo()
  </script>
</body>
</html>
相关推荐
之歆7 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
Maimai108087 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
candyTong7 小时前
Claude Code 的 Edit 工具是怎么工作的
javascript·后端·架构
卡卡军10 小时前
agmd 1.0 重磅升级——Rust 重写,性能起飞
javascript·rust
Larcher10 小时前
🔥 告别抓瞎:用 Claude Code (cc) 优雅接手与维护已有项目
javascript·机器学习·前端框架
JYeontu10 小时前
轮播图不够惊艳?试下这个立体卡片轮播图
前端·javascript·css
亲亲小宝宝鸭11 小时前
如何监听DOM尺寸的变化?element-resize-detector 和 resizeObserver
前端·javascript
卷帘依旧13 小时前
Generator 全面解析 + async/await 深度对比
前端·javascript
weixin_4713830314 小时前
统一缩放单位基础(px、em、rem)
开发语言·javascript·ecmascript
yqcoder14 小时前
数据劫持的双雄:深入解析 Object.defineProperty 与 Proxy
开发语言·前端·javascript