0
点赞
收藏
分享

微信扫一扫

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

624c95384278 2022-02-25 阅读 39
echarts学习前端

  本系列主要是通过复现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"></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',
				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"></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:{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绘制堆积柱状图

javascriptecharts大数据

Echarts--面积图

echartsjavascript前端

Echarts图表之堆积柱形图

echarts前端javascript

echarts 渐变

css3前端css

Echarts图表之平滑曲线区域面积图

echarts前端javascript

三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》

echarts数据可视化前端开发yyds干货盘点

Echarts 柱状图横向排版颜色渐变效果

Vue-Echarts前端开发那些事儿图表Echar...

echarts 柱形图使用渐变色的方法

echarts前端javascript3d编程语言

echarts堆叠、渐变、圆柱、底部发光柱状图

vuevue.jsecharts前端

[echarts] 给柱形图的每个柱子设置不同渐变颜色

echarts前端javascript配置项数据OpenStack云计算
0 条评论