echarts-循环生成图

最新推荐文章于 2025-06-12 11:14:21 发布

采精小蝴蝶

最新推荐文章于 2025-06-12 11:14:21 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jrrfgj/article/details/87160940

这篇博客介绍了如何在Echarts中通过for循环创建多个交互式的气泡图，每个气泡图都具备点击功能。文章提供了一段实现此功能的源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、问题背景

利用for循环生产多个气泡图，并且每个气泡都可以点击

2、实现源码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>echarts-循环生成图</title>  <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>    <style>   body,html,#div-chart{    width: 99%;    height: 100%;    font-family: "微软雅黑";    font-size: 12px;   }   .chart{    width: 1200px;    height: 100px;   }  </style>  <script>   $(document).ready(function(){    buildChart();    buildChartJS();   });      function buildChart()   {    $("#div-chart").empty();    var chart = "";    for(var i=0;i<8;i++)    {     chart += "<div id='chart"+i+"' class='chart'></div>";     }    $("#div-chart").append(chart);   }      function buildChartJS()   {    for(var i=0;i<8;i++)    {     var chart = document.getElementById('chart'+i);                   var echart = echarts.init(chart);                                      var option = {         legend: {             data:['scatter1'],             show:false         },         splitLine:{     　　　　   show:false     　　  },         grid:{            borderWidth:0         },         xAxis : [             {              show:false,                 type : 'value',                 splitNumber: 2,                 scale: true,                 axisLine:{                  show:false                 },                 splitLine:{       　　　　   show:false       　　 },          axisTick:{             show:false          }             }         ],         yAxis : [             {              show:false,                 type : 'value',                 splitNumber: 2,                 scale: true,                 axisLine:{                  show:false                 },                 splitLine:{       　　　　   show:false       　　 }             }         ],         series : [             {                 name:'scatter1',                 type:'scatter',                 symbol: 'emptyCircle',                 symbolSize: 20,                 itemStyle : {                   normal: {                   color:'#0068B7',                   label:{                    show: true,                     position: 'inside',                    textStyle : {                                 fontSize : 26,                                 fontFamily : '微软雅黑',                                 color:'#0068B7'                             }                   }                  }                 },                 data: randomDataArray()             }         ]     };                                         function eConsole(param)                     {                     alert(param.value);                        console.dir(param);                    }                    echart.on("click", eConsole);                 echart.setOption(option);      }   }      function randomDataArray()    {       var d = [];       var arr = [3,5,7,9,10,1,2,4,8,6];       var len = 10;       for(var i=0;i<len;i++)       {        d.push([i+1,0,arr[i],]);       }              return d;   }  </script> </head> <body>  <div id="div-chart">     </div> </body></html>

3、实现结果

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow