使用echarts将中国各个省的数据以气泡的形式显示

参考代码网址为:https://gallery.echartsjs.com/editor.html?c=xBJDR584vG

效果如下:

但是3.x以上版本本的echarts会遇到一个问题,就是气泡上显示的不是数据信息,而是维度信息,这时需要修改部分代码,修改的代码如下(已标红处理):

{
                            name: '点',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin', //气泡
                            symbolSize: function(val) {
                            &nb

ECharts是一个强大的JavaScript图表库,它可以创建各种复杂的图表,包括气泡图。在ECharts气泡图中,你可以通过设置每个点的数据坐标以及相应的半径值来自定义气泡的大小。若想实现多个图例,并让各个气泡大小随数据大小动态展示,你需要按照以下步骤操作: 1. **初始化ECharts实例**:首先,在HTML中创建ECharts容器,并配置基本选项。 ```html <canvas id="bubbleChart" style="width: 600px;height:400px;"></canvas> ``` 2. **设置数据结构**:每个数据点需要包含x、y坐标值和表示大小的数据值,例如`data`数组里有对象如 `{name: '系列A', value: [x, y, size]}`。 3. **配置气泡图**:在JavaScript中,使用ECharts API配置气泡图,包括设置数据、大小比例和图例。 ```javascript var option = { xAxis: { type: 'category' }, yAxis: { type: 'value' }, series: [ { name: '系列A', type: 'scatter', data: [], // 这里填充实际的数据 symbolSize: function (val) { return val[2]; }, // 气泡大小由size属性决定 itemStyle: { normal: { color: 'red' } }, legendHoverLink: true, // 允许点击气泡触发对应的图例高亮 }, // 添加其他系列... ], legend: { data: ['系列A', '系列B'], // 图例项列表 orient: 'vertical', // 图例方向 } }; ``` 4. **渲染图表**:最后,将配置好的option传递给ECharts的`echarts.init()`函数,渲染图表。 ```javascript var chart = echarts.init(document.getElementById('bubbleChart')); chart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值