码迷,mamicode.com
首页 > 其他好文 > 详细

数据输入——生成你需要的echart图(世界地图,气泡图)

时间:2018-02-28 23:06:08      阅读:2316      评论:0      收藏:0      [点我收藏+]

标签:www   normal   表示   世界   意思   gen   rgb   class   加拿大   

上一篇文章介绍了:堆积柱状图、扇形图、嵌套环形图,现在来介绍一下:世界地图和气泡图

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图(世界地图,气泡图)

标签:www   normal   表示   世界   意思   gen   rgb   class   加拿大   

原文地址:https://www.cnblogs.com/ybf-yyj/p/8485887.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!