web数据可视化(Echarts版)4-4标准气泡图(代码仅供参考)_web数据可视化绘制商品价格区间的气泡图-CSDN博客

本文链接：https://blog.csdn.net/m0_63471474/article/details/130760041

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 900px; height: 400px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
       function random() {   //生成一个范围在（-90,90）的随机数函数
           var r =Math.round(Math.random() * 90);
           return (r*(r%2==0?1:-1));    //返回一个值在（-90,90）的随机数
       }
       //生成有100个元素的数组，每个元素有3个数值，数组中前两个元素的值的范围在（-90,90）
       //第三个元素的值是表示气泡大小的随机数，其范围是[0,90)
       function randomDataArray() {
           var d=[];
           var len=100;
           while(len--) {
               d.push([random(),random(),Math.abs(random()),]);
           }
           return d;
       }
       var option = {
           color:['#FFCCCC','green'],    //配置气泡的颜色系列
           title:{   //配置标题组件
               x:40,text:'标准气泡图示例',subtext:"随机生成"
           },
           tooltip:{   //配置提示框组件
               trigger:'axis',showDelay:0,
               axisPointer:{
                   show:true,type:'cross',
                   lineStyle:{type:'dashed',width:1}
               }
           },
           legend:{x:240,data:['bubble1','bubble2']},    //配置图例组件
           toolbox:{   //配置工具箱组件
               show:true,x:450,
               feature:{
                   mark:{show:true},dataZoom:{show:true},
                   dataView:{show:true,readOnly:false},
                   restore:{show:true},saveAsImage:{show:true}
               }
           },
           xAxis:[{type:'value',splitNumber:4,scale:true}],
           yAxis:[{type:'value',splitNumber:4,scale:true}],
           series:[   //配置数据系列
               {  //设置数据系列中的第1类气泡bubble1
                   name:'bubble1',type:'scatter',symbol:'circle',
                   symbolSize:function(value){return Math.round(value[2] /5);},
                   data:randomDataArray()
               },
               {  //设置数据系列中的第2类气泡bubble2
                   name:'bubble2',type:'scatter',symbol:'circle',
                   symbolSize:function(value){return Math.round(value[2] /5);},
                   data:randomDataArray()
               }
           ]
       };
myChart.setOption(option);
</script>
</body>
</html>