数据输入——生成你需要的echart图(世界地图,气泡图)
2018-02-28 21:23
751 查看
上一篇文章介绍了:堆积柱状图、扇形图、嵌套环形图,现在来介绍一下:世界地图和气泡图
1.世界地图
http://echarts.baidu.com/examples/editor.html?c=map-world-dataRange
这个就不多做介绍了,大家看图就可以了,颜色越深表示value越大,白色表示data中没有这个国家。
2.气泡图
按照这张图的意思来解释图中的1 2 3 4 5
1.[x轴数据(无需定义范围),y轴数据(无需定义范围),气泡大小,对应的国家(鼠标放上去才会显示),年份]
2.年份有哪几个,对应的下面就有几个serie来定义
3.1990年对应的是第一行,即data[0],这里不是以上面1中的第5个元素来确定属于那一年的
4.这里的data[2]是指1中的data,注意看函数哦,这里是数字太大进行缩减。
5.对属于1990气泡颜色的定义
这张图可以改成这样:
需要做的如下:
改变X轴 Y轴数据类型,添加对应的值,代码如下
app.title = '气泡图'; var data = [ [['澳大利亚1',7.7,150,'Australia',1990],['澳大利亚2',7.7,270,'Canada',1990]], [['加拿大1',8.1,230,'Australia',2015],['加拿大2',8.1,350,'Canada',2015]] ]; option = { backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' }]), title: { text: '1990 与 2015 年各国家人均寿命与 GDP' }, legend: { right: 10, data: ['1990', '2015'] }, xAxis: { type : 'category', data: ['澳大利亚1','加拿大1','澳大利亚2','加拿大2'] }, yAxis: { type:'value' }, series: [{ name: '1990', data: data[0], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]); }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' }]) } } }, { name: '2015', data: data[1], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]); }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' }]) } } }] };
相关文章推荐
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
- VOC数据提取自己需要的类生成XML标签
- 巧用 ROW_NUMBER() 生成不重复的唯一排序码,按客户的需要任意排序数据
- 数据的输入和随机数的生成
- 根据已经输入的代理商流向单生成代理商与医院关系表中的数据
- excel内一键进行sql查询(使用方法 1.选择’需要进行sql查询区域 包括字段名 2 输入sql语句 3.选择输出数据的单元格)
- HG20592-2009需要输入的数据
- 巧用 ROW_NUMBER() 生成不重复的唯一排序码,按客户的需要任意排序数据
- caffe 实验中输入数据和label都是图片时,训练或测试数据列表train.txt生成方法(linux指令总结)
- Java Web中数据从前端输入到插入数据库,哪些地方需要考虑字符编码?
- 动态获取Echart所需要的数据Map List
- JS,JQuery循环数组,循环对象生成需要的数据
- 怎么用php post 数据到服务器端,封装的方法,只需要输入url 和 post 数据即可
- 按照需要生成数据子集的一个sql
- ABAP根据输入的表名动态生成上传EXCEL数据的代码
- 如何生成多叉树,以构建树形结构需要的数据
- 统计给定的n个数中,负数、零和正数的个数。输入数据有多组,每组占一行,每行的第一个数是整数n(n<100),表示需要统计的数值的个数,然后是n个实数;如果n=0,则表示输入结束,该行不做处理。
- 【前端基础】html端输入数据,利用qrcode.js生成打印二维码
- 利用动软代码生成器 自动生成LINQ需要用的数据实体类 (转)
- Greendao 简单实现增删改查使用过GreenDao的同学都知道,3.0之前需要通过新建GreenDaoGenerator工程生成Java数据对象(实体)和DAO对象,非常的繁琐而且也加大了使用成