echarts 不显示气泡3的气泡图能实现交替显示吗

来源：蜘蛛抓取(WebSpider) 时间：2017-11-04 08:42 标签： echarts 气泡图
1. 请在录制窗口对应的HTML/CSS/JS代码编辑器中输入HTML, CSS, JS代码，录制立刻开始，预览后也可以继续录制，直到保存代码
2. 请在回放区域点击回放按钮“”，预览已录制的代码请问echarts3的气泡图(Scatter)能实现交替显示吗?
请问echarts3的气泡图(Scatter)能实现交替显示吗?
比如地图中的城市top5展示，由于挨得太近，气泡都重叠了，能设置top5的这5个城市交替展示吗？
一.自己摸索了一下，找到了解决办法.二.思路:既然是要让这个top5的城市交替展示，有一个轮换的效果,那就动态的改变配置文件中series[1]的data数组的值就可以了.三.摞代码:还是拿官方给出的这个demo来讲,将option数组中的series数组修改为:
series : [
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
formatter: '{b}',
position: 'right',
show: false
emphasis: {
show: true
itemStyle: {
color: '#ddb926'
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
// 将data数组初始化一个空数组
//data: convertData(data.sort(function (a, b) {
return b.value - a.
//}).slice(0, 6)),
data : [],
symbolSize: function (val) {
return val[2] / 10;
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
hoverAnimation: true,
formatter: '{b}',
position: 'right',
show: true
itemStyle: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
// 然后在初始化显示的时候:
// 设置top5城市的循环展示,每隔3秒轮换显示
// @blog http://phping.sinaapp.com
var j = 0;
var IntervalId = window.setInterval(function(){
if (j == 5) j = 0;
// topCity数组就是top的这个5个城市.
main_option.series[1].data = [convertData(topCity)[j]];
main_chart.setOption(main_option);
四.当top5的城市挨得比较近的时候，气泡会重叠在一起,这时候使用轮换展示的效果就会很好的解决这个问题。大家有什么疑问，可以给我留言.
也可以设置 showEffectOn: 'hover' 然后配合 dispatchAction 对需要的数据高亮
option = {
backgroundColor: '#404a59',
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
tooltip : {
trigger: 'item'
orient: 'vertical',
y: 'bottom',
x:'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
map: 'china',
emphasis: {
show: false
roam: true,
itemStyle: {
areaColor: '#323c48',
borderColor: '#111'
emphasis: {
areaColor: '#2a333d'
series : [
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
formatter: '{b}',
position: 'right',
show: false
emphasis: {
show: true
itemStyle: {
color: '#ddb926'
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
showEffectOn: 'hover',
rippleEffect: {
brushType: 'stroke'
hoverAnimation: true,
formatter: '{b}',
position: 'right',
show: true
itemStyle: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
setTimeout(function () {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: 1
Copyright & 2016 phpStudy

我要回帖

更多关于 echarts 气泡图 的文章

 

随机推荐