ECharts之堆叠图、重复图

ECharts 之堆叠图、重复图

前言

在图表实际开发中，经常会对两个或多个系列的值进行比较，或者比较同个类目轴上（同一X轴位置）数据的和值于不同类目轴上的和值，同时又要展示该系列每一种情况下的值，这时可以使用 ECharts 中的堆叠图和重复图来展示，将会更加直观、突出。

堆叠图

堆叠图是指多个系列的数据在同个类目轴上（同一X轴位置）进行叠加显示多系列数据和的柱状图或折线图（面积图）。堆叠图一般用在不追求突出两个或多个系列数据之间的差异性，而更关注于多系列数据的和在不同个类目轴上（不同X轴位置）的差异。

使用ECharts实现堆叠图非常简单容易，只需在配置信息series添加属性stack就可以实现堆叠图。stack属性值可以为任意字符串值，配置相同的stack值的系列可以堆叠放置。

以下为代码示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <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' 系列生效。

以下为代码示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <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来指定该系列数据使用哪一个坐标系。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <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提供了众多图表，可以根据自己的开发中的实际需求，修改配置信息，使得图表的展示更加清晰、明了，更易于观看者的理解，更符合观看者的视觉效果。

声明：此资源由本博客收集整理于网络，只用于交流学习，请勿用作它途。如有侵权，请联系，删除处理。

今天的文章 ECharts之堆叠图、重复图分享到此就结束了，感谢您的阅读。

ECharts之堆叠图、重复图

ECharts 之堆叠图、重复图

前言

堆叠图

重复图

多系列重复图

结语

相关推荐