Toggle navigation
Echarts 气泡图
By
笔***地
2019-12-13 03:36:35
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var data = [{ name: '白羊座\n\n432', value: 111, symbolSize: 70, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: ' #FFB695' }, { offset: 1, color: '#EC4A5E' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(240, 97, 106, 1)', } } }, { name: '处女座\n\n399', symbolSize: 80, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#34EC94' }, { offset: 1, color: '#2FCBC8' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(39, 206, 167, 1)', } } }, { name: '金牛座\n\n388', symbolSize: 90, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#42BEF8' }, { offset: 1, color: '#5F6EFF' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(67, 150, 247, 1)', } } }, { name: '巨蟹座\n\n353', tips: 'https://github.com/rain120', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#F8D042' }, { offset: 1, color: '#FF9152' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(253, 161, 78, 1)', } } }, { name: '魔蝎座\n\n353', tips: '前端 React + Mobx + Typescript', symbolSize: 110, draggable: true, itemStyle: { color: 'red', normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#8383FF' }, { offset: 1, color: '#B450FF' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(157, 104, 255, 1)', } } }, { name: '射手座\n\n377', symbolSize: 100, draggable: true, itemStyle: { normal: { label: { color: '#F0FFF0', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#F0FFF0' }, { offset: 1, color: '#FF9152' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(253, 161, 78, 1)', } } }, { name: '狮子座\n\n403', symbolSize: 80, draggable: true, itemStyle: { normal: { label: { color: '#E6E6FA', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: ' #Fcc5EE' }, { offset: 1, color: ' #FFF0F5' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(39, 206, 167, 1)', } } }, { name: '双鱼座\n\n327', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#AFEEEE' }, { offset: 1, color: '#FFFF00' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(135,206,235, 1)', } } }, { name: '双子座\n\n330', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#F08080' }, { offset: 1, color: '#FF9152' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(175,238,238, 1)', } } }, { name: '水瓶座\n\n364', tips: 'https://github.com/rain120', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#F8D042' }, { offset: 1, color: '#BFEFFF' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(255,182,193, 1)', } } }, { name: '天秤座\n\n452', tips: 'https://github.com/rain120', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#63B8FF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#F8D042' }, { offset: 1, color: '#FF9152' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(255,240,245, 1)', } } }, { name: '天蝎座\n\n419', tips: 'https://github.com/rain120', symbolSize: 110, draggable: true, itemStyle: { normal: { label: { color: '#FFFFFF', fontSize: '14px', borderColor: 'none', shadowColor: 'none', }, color: { type: 'linear', colorStops: [{ offset: 0, color: '#EEA9ee' }, { offset: 1, color: '#ccccFF' } ], global: false }, shadowBlur: 20, shadowColor: 'rgba(245, 21, 68, 1)', } } }, ] option = { animationDurationUpdate: function(idx) { return idx * 100; }, tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.tips || params.name; } }, animationEasingUpdate: 'bounceIn', itemStyle: { color: 'red' }, cursor: 'pointer', series: [{ type: 'graph', layout: 'force', cursor: 'pointer', force: { repulsion: 200, edgeLength: 100 }, roam: true, label: { normal: { show: true } }, data, }] }
