coordinateSystem: ‘bmap’,
2.区域刷选
1.添加区域刷选工具栏
在option中加入如下设置
brush: {
//工具栏外观
brushStyle: {
borderWidth: 2,
color: ‘rgba(0,0,0,0.2)’,
borderColor: ‘green’,
},
//设定刷选类型,停止后刷选还是一定频率刷选
throttleType: ‘debounce’,
//停止多久后刷选
throttleDelay: 300,
//未被选择的区域外观
outOfBrush: {
}
},
2.刷选函数
//动态渲染雷达图
function renderBrushed(params){
this.setOption({
//进行区域选择时,关闭百度地图的移动选项,否则会冲突
bmap: {
roam: ‘scale’
}
})
var mainSeries = params.batch[0].selected[0];
var allSum = 0;
var count = 0;
var max = 0;
var min = null;
for (var i = 0; i < mainSeries.dataIndex.length; i++) {
var rawIndex = mainSeries.dataIndex[i];
var dataItem = data[rawIndex];
val = dataItem.value[2];
allSum += val
if(!min||val < min){
min = val;
}
if(val > max){
max = val;
}
count += 1;
}
var unitPrice = allSum / count;
this.setOption({
series:{
title:‘区域雷达图’,
//此处id为series中雷达图id
id:“radarBrush”,
data:[[unitPrice,max,min]]
}
})
}
3.绑定事件
mapChart.on(‘brushselected’,renderBrushed);
3.刷选完毕后重置百度地图移动
在刷选时必须关闭百度地图的移动功能,否则刷选框会无法移动,刷选完毕后通过自定义一个开启移动按钮来开启百度地图移动
toolbox: {
feature: {
myTool1: {
show: true,
title:“开启百度地图移动”,
icon: “image://http://localhost:8000/Image/icon/移动2.png”,
onclick: function (a) {
mapChart.setOption({
//手动开启百度地图的移动选项
bmap: {
roam: ‘true’
}
})
}
}
},
4.优化
以上的设置在一般情况下已经能用了,但是在数据量非常大的时候,页面会非常卡顿,有两种方法可以优化这个问题
-
1.使用echarts-gl加速,将series中图表type改为scatterGL,但是目前区域刷选不支持scatterGL,开启后无法进行数据刷选,而且很坑的就是目前百度官网上给的echarts版本与给出的echartsgl版本是不匹配的,必须选择历史版本的ecahrts-gl,点这里下载
-
2.在series中加入large:True选项,然后使用largeThreshold属性设定阈值,在达到阈值时开启绘制优化,这种方式也有个问题就是开启绘制优化后无法为每个点单独设置样式,也就是说每个点的颜色大小都会变得相同,visualMap会失效
源码
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<!doctype html>
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
