首页echarts气泡图例子

echarts气泡图例子

时间: 2024-10-27 09:11:28 浏览: 33

ECharts是一个强大的数据可视化库，其中气泡图（Bubble Chart）常用于展示三个维度的数据，比如x轴、y轴数值以及大小数据。下面是一个简单的ECharts气泡图的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> </head> <body> <div id="bubbleChart" style="width: 600px; height: 400px;"></div> <script> var option = { title: { text: 'ECharts 气泡图示例' }, tooltip: {}, xAxis: { type: 'category', data: ['类别A', '类别B', '类别C'] }, yAxis: { type: 'value' }, series: [{ name: '气泡', type: 'scatter', data: [ { x: '类别A', y: 100, size: 15 }, { x: '类别B', y: 200, size: 20 }, { x: '类别C', y: 300, size: 25 } ], symbolSize: function (val) { return val[2] / 3; } }] }; var chart = echarts.init(document.getElementById('bubbleChart')); chart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们创建了一个包含三个分类（类别A、B、C）的气泡图，每个气泡的位置由x轴和y轴坐标表示，大小由`size`属性控制，`symbolSize`函数用来动态调整大小与实际数据值的关系。

阅读全文