Echarts基础图表 -- 散点图（气泡图）

2017-12-26 15:38:29 0

上次介绍了Echarts的雷达图，现在简单介绍下Echarts的散点图(气泡图)

首先，在使用Echarts时，要先引用Echarts，然后创建容器挂载绘制的图表，接着将当前容器传进去，创建Echarts实例，此处比较简单，往期也有，所以一律省略这个

散点图（气泡图）

散点图主要用来展示二维或三维的数据，气泡图则可以理解成散点图的加强版，可以用来展示三维或四维的数据，甚至更多，维度上一般有x、y、z、面积、颜色、形状等散点图（气泡图）一般用于表示因变量随自变量而变化的大致趋势，在数据点越多的时候，效果越明显这里主要做一个展示三国时期势力发展的气泡图，效果如下图所示，数据非真实，主要涉及了标题组件（title）、提示框组件（tooltip）、直角坐标系组件（xAxis，yAxis）、坐标系网格组件（grid）、视觉映射组件（visualMap）、时间线组件（timeline）以及数据列组件（series）

首先，先看下数据的结构，由于篇幅有限，数据比较多，所以只给出部分的数据，感兴趣的也可以自己补全。其中，timeline属性表示三国时期的时间线，这个时间会应用在timeline组件上，subtext属性则是各个时间线对应的标题，story属性则是在各个时间线内发生的重要的事件，到时候会展示在图表的空白处，series属性则是数据列的数据了，counties属性则是在各个时间线上存活的势力

var data = {
    'timeline':['184',...],
    'subtext':['黄巾之乱',...],
    'story':['184年 - 黄巾起义...','...',...],
    'series':[[[30,10,'张角势力','张角',6,20],...], ...],// 数据维度，对应分别是势力总人口（x轴）、势力总兵力（y轴）、势力名称、势力君主、城池数、武将数
    'counties':[['张角势力',...],...]
};

具体实现起来也比较简单，因为时间线组件提供了在多个Echarts option间进行切换、播放等操作的功能，所以我们可以根据时间来创建 echarts option，每个时间的option包含对应该时间的数据以及配置项，包括 subtext、story、series 以及 counties 等，然后通过时间线组件来联系这些 option，达到切换、播放的效果对于一些公有配置或者是相同的配置，Echarts官方推荐我们放在一个基础的 option 中，因为 timeline 播放切换时，会把生成的 option 数组中对应的 option 与基础的 option 进行 merge（合并）形成最终的 option，因此，我们创建一个基础的 option，并在里面配置好配置项

baseOption: {
    backgroundColor: '#404a59',
    timeline: timeline,
    title: title,
    tooltip: tooltip,
    grid: grid,
    xAxis: xAxis,
    yAxis: yAxis,
    visualMap: visualMap,
    series: series,
    animationEasingUpdate: 'quinticInOut'
}

接下来是配置具体配置项，首先是时间线组件配置项，设置下时间轴的类型、位置、时间的顺序、播放的限制以及按钮、文本、线条等的样式

timeline: { axisType: 'category', //时间轴为类目轴 orient: 'vertical', //垂直放置 inverse: true, //时间反转，默认不反转垂直情况下时间从上往下递减，反转则为递增 playInterval: 1000, //播放的时间间隔 autoPlay: true, //设置自动播放 top: 20, bottom: 20, right: 0, width: 55, symbol: 'none', //每个时间都有个点来标志，现在把点去掉 checkpointStyle: { //时间轴上当前选中项的样式 color: '#bbb', borderColor: '#777', borderWidth: 2 }, controlStyle: {//控制按钮的样式 showNextBtn: false, showPrevBtn: false, normal: { color: '#666', borderColor: '#666' }, emphasis: { color: '#aaa', borderColor: '#aaa' } }, label: {//时间轴的文本标签样式 normal: { textStyle: { color: '#999' } }, emphasis: { textStyle: { color: '#fff' } } }, lineStyle: {//线条样式 color: '#555' }, data: []

}

然后是标题组件，这里用了三个标题组件，第一个是显示时间轴上的时间（即数据上的timeline属性的时间），第二个是显示重要的事件（即数据上的story），第三个则是整个图表的标题了

title: [{
    text: data.timeline[0],
    textAlign: 'center',
    left: '78%',
    top: '72%',
    textStyle: {
        fontSize: 40,
        color: 'rgba(255, 255, 255, 0.7)'
    }
},{
    text: '重要事件',
    subtext: data.story[0],
    textAlign: 'left',
    left: '20%',
    top: '25%',
    textStyle: {
        fontSize: 12,
        color: 'rgba(255, 255, 255, 0.8)'
    },
    subtextStyle: {
        fontSize: 10,
        color: 'rgba(255, 255, 255, 0.7)'
    }
},{
    text: '三国时期势力发展散点（气泡）图',
    subtext: '数据非真实',
    left: 'center',
    top: 10,
    textStyle: {
        color: '#aaa',
        fontWeight: 'normal',
        fontSize: 20
    }
}]

提示框组件，主要设置下提示框的样式

tooltip: {
    padding: 10,
    backgroundColor: '#f9f9f9',
    borderColor: '#777',
    borderWidth: 1,
    textStyle: {
        color: '#333',
        fontWeight: 'normal',
        fontSize: 18
    }
}

网格组件、坐标系组件，只要对位置和坐标轴样式进行设置

grid: {
    top: 100,
    containLabel: true,//设置为true，防止标签溢出
    left: 150,
    right: 110
},
xAxis: {
    type: 'log',
    name: '势力总人口',
    max: 1000,
    min: 1,
    nameGap: 25,
    nameLocation: 'middle',
    nameTextStyle: {
        fontSize: 18
    },
    splitLine: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: '#ccc'
        }
    },
    axisLabel: {
        formatter: '{value} 万人'
    }
},
yAxis: {
    type: 'value',
    name: '势力总兵力',
    min:1,
    max: 60,
    nameTextStyle: {
        color: '#ccc',
        fontSize: 18
    },
    axisLine: {
        lineStyle: {
            color: '#ccc'
        }
    },
    splitLine: {
        show: false
    },
    axisLabel: {
        formatter: '{value} 万人'
    }
}

视觉映射组件，使用分段型视觉映射组件，有三个配置比较重要，第一个是dimension，用来指定用数据的哪个维度，然后映射到视觉元素上，这里的dimension为2表示用上面的数据中的series内的第三个维度，也即是势力名称，第二个是categories，这个是用来设置离散型数据的，会在组件上显示出来，有点类似于图例，这里设置的是势力名称，与dimension对应，第三个则是inRange，这个是用来定义在选中范围中的视觉元素，然后会使用里面定义的颜色，如这里使用的是势力名称，那么在categories定义的势力名称则为选中范围的元素，如果dimension对应的series内的维度的数据不在该范围内，则不会使用inRange定义的颜色（而是使用outRange定义的颜色，outRange与inRange相反，他是定义在选中范围外的视觉元素，本例子的视觉元素都会在视觉范围中，因此不设置outRange）

visualMap: [{
    type:'piecewise',
    dimension: 2,
    categories: data.counties[0],
    textGap: 30,
    textStyle: {
        color: '#ccc'
    },
    top: 'middle',
    inRange: {
        color: (function () {
        var colors = ['#d48265', '#c23531','#6e7074', '#61a0a8', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#2f4554', '#546570', '#c4ccd3','#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];
        return colors.concat(colors);
        })()
    }
}]

最后就是数据列组件，主要是设置图表类型为散点图（气泡图），然后就是数据以及标记图形的样式

series: [{
    type: 'scatter',
    itemStyle: {
        normal: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    },
    data: data.series[0],
    symbolSize: function(val) {
        return sizeFunction(val[4]);//这个函数主要是将传入的值乘以8再返回，因为有些数值较小的数据直接放在图表上，会看不清，所以对整体数值在展示上进行放大
    }
}],

接下来是设置整个图表的 option，这是最终传入 Echarts 的 option

option = {
    baseOption: baseOption,
    options:[]
};

至此，图表的所有准备工作都完成了，接下来就是生成timeline组件需要的option了，然后填充数据

for (var n = 0; n < data.timeline.length; n++) {
    option.baseOption.timeline.data.push(data.timeline[n]);
    option.options.push({
        title: [{
            text: data.timeline[n] + ' ' + data.subtext[n]
        },{
            text: '重要事件',
            subtext: data.story[n]
        }],
        visualMap: [{
            categories: data.counties[n]
        }],
        series: {
            name: data.timeline[n],
            data: data.series[n]
        }
    });
}

将配置项设置到Echarts实例上，然后运行一下，就可以看到结果了

myEcharts.setOption(option);

上一篇： Echarts图表选项

下一篇： Echarts基础图表 -- 柱形图