ECharts漏斗图示例

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: 'funnel',
        //dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
        data: [
          {name:"L1", value:150}, 
          {name:"L2", value:100}, 
          {name:"L3", value:50}, 
          {name:"L4", value:25}, 
          {name:"L5", value:12.5}],

      },

	  ]
	};  
  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>
相关推荐
ZC跨境爬虫7 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人7 小时前
HTML 字符引用完全指南
开发语言·前端·html
matlab_xiaowang7 小时前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
幼儿园技术家7 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠9 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker9 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding11 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马11 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren11 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川11 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端