ECharts之堆叠图、重复图
ECharts 之堆叠图、重复图
前言
在图表实际开发中，经常会对两个或多个系列的值进行比较，或者比较同个类目轴上（同一X轴位置）数据的和值于不同类目轴上的和值，同时又要展示该系列每一种情况下的值，这时可以使用 ECharts 中的堆叠图和重复图来展示，将会更加直观、突出。
堆叠图
堆叠图是指多个系列的数据在同个类目轴上（同一X轴位置）进行叠加显示多系列数据和的柱状图或折线图（面积图）。堆叠图一般用在不追求突出两个或多个系列数据之间的差异性，而更关注于多系列数据的和在不同个类目轴上（不同X轴位置）的差异。
使用ECharts实现堆叠图非常简单容易，只需在配置信息series添加属性stack就可以实现堆叠图。stack属性值可以为任意字符串值，配置相同的stack值的系列可以堆叠放置。
以下为代码示例：
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
body>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title:{
text:"不同品牌手机销量"
},
xAxis: {
data: ["第一季度", "第二季度", "第三季度", "第四季度", ]
},
yAxis: {},
series: [
{
name: '华为p8',
type: 'bar',
stack: "华为",//同个类目轴上系列配置相同的stack值可以堆叠放置
data: [1345, 2355, 2341, 2316]
},
{
name: '华为p9',
type: 'bar',
stack: "华为",
data: [3252, 2345, 1245, 4561]
},
{
name: '华为p10',
type: 'bar',
stack: "华为",
data: [2355, 4679, 2341, 3451]
},
{
name: '小米p8',
type: 'bar',
stack: "小米",
data: [2345, 2235, 2452, 3416]
},
{
name: '小米p9',
type: 'bar',
stack: "小米",
data: [3354, 3462, 2345, 2345]
},
{
name: '小米10',
type: 'bar',
stack: "小米",
data: [3455, 2379, 2451, 4351]
}
]
};
myChart.setOption(option);
script>
html>
重复图
重复图主要是指柱状图中的一个系列数据重复显示在另一系列上，可以更加直观地突出两系列数据的差异，与两系列数据并列显示相比，更加直观，且占用空间小。重复图相比于堆叠图更关注于多系列数据间的差异性。重复图一般用在多系列数据间具有层级关系，如最底层为总量，次底层为次总量，层级向上，靠近顶层系列数据越小。
在ECharts中实现两系列数据的重复图也非常简单，只需在配置信息series中将barGap属性值设为 '-100%'，就可以实现。
注意：在同一坐标系上，barGap属性会被多个 'bar' 系列共享。该属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
以下为代码示例：
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
body>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title:{
text:"不同品牌手机销量"
},
xAxis: {
data: ["第一季度", "第二季度", "第三季度", "第四季度", ]
},
yAxis: {},
series: [
{
name: '华为',
type: 'bar',
data: [3655, 4679, 2841, 4551]
},
{
name: '小米',
type: 'bar',
barGap: '-100%',
data: [3455, 2379, 2451, 4351]
}
]
};
myChart.setOption(option);
script>
html>
需要注意的是，使用重复图的两系列数据中其中一系列数据应在各种情况下（各个X轴位置）普遍大于另一系列数据，并将其作为对底层显示，否则将会被覆盖。如下图所示：
多系列重复图
多系列重复图是指柱状图中有多系列数据的重复图，可以很清楚地对多系列数据进行比较。
多系列重复图的实现相对来说较为麻烦，需要用到多坐标系。如果用一个坐标系，由于在同一坐标系上，barGap属性会被多个 'bar' 系列共享，多个系列的数据会重复到一起。因此需要建立多坐标系，并用属性xAxisIndex和yAxisIndex来指定该系列数据使用哪一个坐标系。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
body>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: "不同品牌手机销量"
},
xAxis: [
{
data: ["第一季度", "第二季度", "第三季度", "第四季度",]
},
{
//隐藏第二X轴
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ["第一季度", "第二季度", "第三季度", "第四季度",]
},
{
//隐藏第三X轴
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ["第一季度", "第二季度", "第三季度", "第四季度",]
}
],
yAxis: {},//共用一个Y坐标轴
series: [
{
name: '华为总销售量',
type: 'bar',
xAxisIndex: 2,//使用第三X轴
data: [4655, 5679, 6141, 5551]
},
{
name: '小米总销售量',
type: 'bar',
xAxisIndex: 2,
data: [3655, 4679, 3141, 4551]
},
{
name: '华为P系列销售量',
type: 'bar',
xAxisIndex: 1,
data: [4455, 3379, 5451, 3351]
},
{
name: '红米系列销售量',
type: 'bar',
xAxisIndex: 1,//使用第二X轴
data: [3455, 2379, 2451, 4351]
},
{
name: '华为P9销售量',
type: 'bar',
//xAxisIndex: 0,//使用第一X轴
data: [3455, 2379, 3451, 2351]
},
{
name: '红米7销售量',
type: 'bar',
data: [2455, 1379, 1451, 1351]
}
]
};
myChart.setOption(option);
script>
html>
结语
Charts提供了众多图表，可以根据自己的开发中的实际需求，修改配置信息，使得图表的展示更加清晰、明了，更易于观看者的理解，更符合观看者的视觉效果。
**声明：**此资源由本博客收集整理于网络，只用于交流学习，请勿用作它途。如有侵权，请联系， 删除处理。