Echarts案例学习-渐变堆积面积图

本文中使用的Echarts版本为：5.3.0

本系列主要是通过复现Apach Echarts官网上的示例来学习Echarts。目标图像网页地址：https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradient

1. Echarts画图

这里先画出基础图形，把5条折线画出来，然后在基础图形上一步步进行改进。基础图形代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Echarts官网示例学习</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width:500px;height:300px"></canvas><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"),"white",{renderer:"canvas"});// 指定图表的配置项和数据var option = {title:{text:'Gradient Stacked Area Chart'},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},legend:{},series:[{type:'line',name:'Line 1',data:[140, 232, 101, 264, 90, 340, 250]},{type:'line',name:'Line 2',data:[120, 282, 111, 234, 220, 340, 310]},{type:'line',name:'Line 3',data:[320, 132, 201, 334, 190, 130, 220]},{type:'line',name:'Line 4',data:[220, 402, 231, 134, 190, 230, 120]},{type:'line',name:'Line 5',data:[220, 302, 181, 234, 210, 290, 150]}]};myChart.setOption(option);</script>
</body>
</html>

基础图形为：

接着，将基础图形上的折线图上折线改为“平滑的曲线”，并设置数据堆叠。可以通过设置每条折线的smooth和stack属性来达到目的。具体代码如下(这里仅仅说明相关属性的设置，下同。完整的画图代码可以再本部分末尾查看到)：

{smooth:true,
stack:'Total'}

操作之后图形如下：

将图形改为面积图，并设置渐变色。这个需要用到折线的areaStyle属性。具体如下：

<!--这里先展示Line 1的渐变色面积图设，将下述代码加入Line1对应{}中即可-->
areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(255, 191, 0)'},{offset:1,color:'rgb(224, 62, 76)'}]}}

将原有的折线及其标记去掉，这里说的“去掉”只是让其在视觉上不可见而已。使用lineStyle中的width属性可以让折线不可见，使用symboSize可以让折线上的数据项标记(每条折线上的7个小圆圈)不可见。具体代码如下：

lineStyle:{width:0},
symbolSize:0,

把图形两边的空白部分删除。在这个例子中x坐标轴为类目轴，需要在xAxis中添加boundaryGap属性，将boundaryGap设为false可以将其左右留白删除。具体代码如下：

xAxis:{boundaryGap:false,}

添加提示框。当鼠标在目标图形上滑动的时候，可以看到提示框内显示的每一天的5条线上的值。这里需要将提示框的触发类型修改为“axis”触发。具体代码如下：

tooltip:{trigger:'axis'}

在图形上滑动鼠标时会发现，当鼠标滑动到某个面积带时，该折线图会高亮显示。这个可以通过折线的emphasis属性来设置。具体代码如下：

emphasis:{focus:true,},

使用在图形上滑动数据的时候，会随时显示鼠标所在的坐标轴当前刻度。这个就需要用到tooltip的axisPoint属性。具体如下：

axisPointer:{type:'cross'},

当鼠标悬停在第5条折线时，会显示对应数据项的数据标签。这个可以通过showSymbol来设置。具体代码如下：

{showSymbol:false;
label:{show:true,},}

到目前为止，目标图形已经基本完成了。但由于在画图的时候图形尺寸选的太小，导致图例和图表标题发生了重叠。这里可以将图例移到图标下方。具体代码如下：

legend:{bottom:'0%'},

完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Echarts官网示例学习</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width:500px;height:300px"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"),"white",{renderer:"canvas"});// 指定图表的配置项和数据var option = {title:{text:'Gradient Stacked Area Chart'},xAxis:{type:'category',boundaryGap:false,data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},legend:{bottom:'0%'},tooltip:{trigger:'axis',axisPointer:{type:'cross'},},series:[{type:'line',name:'Line 1',data:[140, 232, 101, 264, 90, 340, 250],smooth:true,stack:'Total',lineStyle:{width:0},symbolSize:0,areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(128, 255, 165)'},{offset:1,color:'rgb(1, 191, 236)'}]}},emphasis:{focus:'series'},},{type:'line',name:'Line 2',data:[120, 282, 111, 234, 220, 340, 310],smooth:true,stack:'Total',lineStyle:{width:0},symbolSize:0,areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(0, 221, 255)'},{offset:1,color:'rgb(77, 119, 255)'}]}},emphasis:{focus:'series'},},{type:'line',name:'Line 3',data:[320, 132, 201, 334, 190, 130, 220],smooth:true,stack:'Total',lineStyle:{width:0},symbolSize:0,areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(55, 162, 255)'},{offset:1,color:'rgb(116, 21, 219)'}]}},emphasis:{focus:'series'},},{type:'line',name:'Line 4',data:[220, 402, 231, 134, 190, 230, 120],smooth:true,stack:'Total',lineStyle:{width:0},symbolSize:0,areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(255, 0, 135)'},{offset:1,color:'rgb(135, 0, 157)'}]}},emphasis:{focus:'series'},},{type:'line',name:'Line 5',data:[220, 302, 181, 234, 210, 290, 150],smooth:true,stack:'Total',showSymbol:false,label:{show:true,},lineStyle:{width:0},symbolSize:0,areaStyle:{opacity:0.8,color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgb(255, 191, 0)'},{offset:1,color:'rgb(224, 62, 76)'}]}},emphasis:{focus:'series'},}]};myChart.setOption(option);</script>
</body>
</html>

2. 补充内容

这一部分主要是对第1部分中涉及到的属性及其用法的介绍(这里就不再以第1部分的图形为例进行说明了)。

Line的stack属性怎么使用？
同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。以下述代码为例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Echarts官网示例学习</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width:500px;height:300px"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"),"white",{renderer:"canvas"});// 指定图表的配置项和数据var option = {title:{text:'Gradient Stacked Area Chart'},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},legend:{bottom:'0%'},series:[{type:'line',name:'Line 1',data:[140, 232, 101, 264, 90, 340, 250],stack:'Sum',symbolSize:0,areaStyle:{},emphasis:{focus:'series'}},{type:'line',name:'Line 2',data:[120, 282, 111, 234, 220, 340, 310],stack:'Sum',symbolSize:0,areaStyle:{},emphasis:{focus:'series'}},{type:'line',name:'Line 3',data:[320, 132, 201, 334, 190, 130, 220],stack:'Total',symbolSize:0,areaStyle:{},emphasis:{focus:'series'}},{type:'line',name:'Line 4',data:[220, 402, 231, 134, 190, 230, 120],stack:'Total',symbolSize:0,areaStyle:{},emphasis:{focus:'series'}},{type:'line',name:'Line 5',data:[220, 302, 181, 234, 210, 290, 150],stack:'Total',symbolSize:0,areaStyle:{},emphasis:{focus:'series'},}]};myChart.setOption(option);</script>
</body>
</html>

在这个示例中构造了两组数堆叠，line1和line2堆叠在一起(stack:‘Sum’)，line3、line4和line5堆叠到一起(stack:‘Total’)

渐变色原理设置。

Echarts案例学习-渐变堆积面积图相关推荐

三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
用Echarts绘制折线图-----堆积面积图和堆积折线图
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势,展示的是部分与整体的关系. 堆积面积图是在折线图中添加面积图,属于组合图形中的一种.堆积面积图又被称为堆积区域图,它强调数量随时 ...
Axure教程—堆积面积图
本文将教大家如何用AXURE制作堆积面积图一.效果介绍如图: 预览地址:https://d4nsae.axshare.com 下载地址:https://download.csdn.net/down ...
JavaFX图表（九）之堆积面积图
翻译自 JavaFX - 堆积面积图 StackedArea Chart是区域图的变体,显示每个值的贡献趋势(例如 - 加班).堆叠区域使每个系列相邻,但不与前面的系列重叠.这与区域图表形成对比,其 ...
python可视化stackplot函数用法-绘制堆积面积图。
matplotlib.pyplot.stackplot(x, *args, labels=(), colors=None, baseline='zero', data=None, **kwargs) ...
R语言数据可视化之折线图、堆积图、堆积面积图
折线图简介折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图本例选用如下测试数据集: 绘制方法是首先 ...
python堆叠面积图_python如何绘制堆积面积图？
要在Excel工作表上绘制堆积面积图,请使用类型为"area"的add_chart(). # import xlsxwriter module import xlsxwriter ...
highCharts第一天学习笔记（面积图）
一.认识highCharts 一张图认识highCharts 二.highCharts的常用配置知识点: 1.chart图表属性的常用配置 type:'area',//指定图表的类型,这里是面积图/ ...
python 百分比图_python如何绘制百分比堆积面积图
要在Excel工作表上绘制"堆积面积百分比"图表,请使用类型为"area"的add_chart() # import xlsxwriter module imp ...

Echarts案例学习-渐变堆积面积图

1. Echarts画图

2. 补充内容

Echarts案例学习-渐变堆积面积图相关推荐

最新文章

热门文章