echarts.js的折线图的显示

最新推荐文章于 2023-04-03 17:02:04 发布

山中水蓝

最新推荐文章于 2023-04-03 17:02:04 发布

阅读量2.4k

点赞数

分类专栏： echarts.js 文章标签： echarts.js 折线图

本文链接：https://blog.csdn.net/Garnett_zk/article/details/94548981

版权

echarts.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.目的

编写这篇文章的目的是为了记住stack的用法

2.演示

如果你只是为了将某些设备的变化通过折线图显示出来，就不要用stack。
不用stack的效果：
在这里插入图片描述
stack的用法：数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
使用stack后的效果图：

比较：使用stack属性后，后一个属性会将前一个属性的值累加起来显示，所以使用stack后会显示所有属性累加，例如，周一的时候，第一个值显示它本生，第二个值的位置为它本生与第一个值得和，第三个值的位置为它本身与第一个、第二个值得和，依此类推。
没有使用stack属性的代码：将stack属性代码中包含stack属性的哪行代码注释即可，html代码不变
使用stack的属性的代码：

$(function(){
	//折线图
	var myChart4 = echarts.init(document.getElementById('chart4'));

        // 指定图表的配置项和数据
       option4 = {
			title: {
				text: '折线图堆叠'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name:'邮件营销',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[120, 132, 101, 134, 90, 230, 210]
				},
				{
					name:'联盟广告',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[220, 182, 191, 234, 290, 330, 310]
				},
				{
					name:'视频广告',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[150, 232, 201, 154, 190, 330, 410]
				},
				{
					name:'直接访问',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[320, 332, 301, 334, 390, 330, 320]
				},
				{
					name:'搜索引擎',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[820, 932, 901, 934, 1290, 1330, 1320]
				}
			]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);
	})

html代码

<div class="newdiv1">
         <div class="newsdiv2">
			<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:5%;margin-top:10px;">
						<option>2019年</option>
						<option>2018年</option>
						<option>2017年</option>
						<option>2016年</option>
						<option>2015年</option>
						<option>2014年</option>
					
					</select>
					至
					<select style="width:5%;margin-top:10px;">
						<option>2019年</option>
						<option>2018年</option>
						<option>2017年</option>
						<option>2016年</option>
						<option>2015年</option>
						<option>2014年</option>					
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-z7qlpEM9-1562118709490)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart4" style="display: inline-block;height:80%;width:100%"></div>
		 </div>
    </div>

整个页面的代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all">
    <script type="text/javascript" src="content/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script>
	<script type="text/javascript" src="content/layui/echarts.js"></script>
</head>
<style>
    html {
        height: 100%;
        width: 100%;
        min-width: 1680px;
    }

    body {
        height: 100%;
        width: 100%;
    }

    
	
	.newdiv1{
		background-color:#ffffff;
		height:45%;
		width:100%;
		display: inline-block;
		margin-top:3%;
		margin-left:2%;
		border:1px solid #1CAFB5;
	}
	
	.newdiv2{
		height:90%;
		width:30%;
		display: inline-block;
		border:1px solid #1CAFB5;
		border-radius:14px;
		border-top:8px solid #0172C7;	
		margin-right:3%;
		margin-top:1%;
	}
	.newsdiv1{
		background-color:#ffffff;
		height:45%;
		width:100%;
		display: inline-block;
		margin-top:3%;
		margin-left:2%;
		border:1px solid #1CAFB5;
	}
	
	.newsdiv2{
		height:90%;
		width:97%;
		display: inline-block;
		border:1px solid #1CAFB5;
		border-radius:14px;
		border-top:8px solid #0172C7;	
		margin-right:3%;
		margin-top:1%;
	}
</style>
<script>
	$(function(){
		var myChart = echarts.init(document.getElementById('chart1'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '年度用电设备排行',
				x:'center',
				y:'top',
				textAlign:'center'
            },
            tooltip: {},
            legend: {
                //data:['千瓦时']
            },
            xAxis: {
				 type : 'category',
                 //name:'额度',
　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的
                show: true,
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"],
                axisLabel: {
　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
//                     rotate: 30,
　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                    }
            },
            yAxis: {
                type : 'value',
                name:'千瓦时',
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 500,
                 interval: 100,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value}'
                 }        
			},
            series: [{
                //name: '千瓦时',
                type: 'bar',
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
							//设置柱状图的显示颜色
							var colorList = [
                              '#0172C7','#0172C7','#0172C7','#0172C7','#0172C7',
                               '#0172C7','#0172C7','#0172C7'
                            ];	
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了

                        label: {
                            show: true,
                            position: 'top',
							//表示柱状图中显示数据的值
                            formatter: '{c}'
							//表示柱状图中显示数据的值以及对应的名称的数量
                            <!-- formatter: '{b}\n{c}' -->
                        }

                    }

                },
　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~

　　　　　　　　barWidth:40,
				//设置柱状图的值	
                data: [500,440,300,280,250,200,100]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		
		//以下是默认的柱状图
		var myChart2 = echarts.init(document.getElementById('chart2'));

        // 指定图表的配置项和数据
       var option2 = {
            title: {
                text: '月度用电设备排行',
				x:'center',
				y:'top',
				textAlign:'center'
            },
            tooltip: {},
            legend: {
                //data:['千瓦时']
            },
            xAxis: {
				 type : 'category',
                 //name:'额度',
　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的
                show: true,
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"],
                axisLabel: {
　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
//                     rotate: 30,
　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                    }
            },
            yAxis: {
                type : 'value',
                name:'千瓦时',
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 100,
                 interval: 20,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value}'
                 }        
			},
            series: [{
                //name: '千瓦时',
                type: 'bar',
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
							//设置柱状图的显示颜色
							var colorList = [
                              '#0172C7','#0172C7','#0172C7','#0172C7','#0172C7',
                               '#0172C7','#0172C7','#0172C7'
                            ];	
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了

                        label: {
                            show: true,
                            position: 'top',
							//表示柱状图中显示数据的值
                            formatter: '{c}'
							//表示柱状图中显示数据的值以及对应的名称的数量
                            <!-- formatter: '{b}\n{c}' -->
                        }

                    }

                },
　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~

　　　　　　　　barWidth:40,
				//设置柱状图的值	
                data: [100,70,60,50,43,35,21]
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
		
		var myChart3 = echarts.init(document.getElementById('chart3'));

        // 指定图表的配置项和数据
        var option3 = {
            title: {
                text: '日度用电设备排行',
				x:'center',
				y:'top',
				textAlign:'center'
            },
            tooltip: {},
            legend: {
                //data:['千瓦时']
            },
            xAxis: {
				 type : 'category',
                 //name:'额度',
　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的
                show: true,
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"],
                axisLabel: {
　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
//                     rotate: 30,
　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                    }
            },
            yAxis: {
                type : 'value',
                name:'千瓦时',
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 10,
                 interval: 2,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value}'
                 }        
			},
            series: [{
                //name: '千瓦时',
                type: 'bar',
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
							//设置柱状图的显示颜色
							var colorList = [
                              '#0172C7','#0172C7','#0172C7','#0172C7','#0172C7',
                               '#0172C7','#0172C7','#0172C7'
                            ];	
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了

                        label: {
                            show: true,
                            position: 'top',
							//表示柱状图中显示数据的值
                            formatter: '{c}'
							//表示柱状图中显示数据的值以及对应的名称的数量
                            <!-- formatter: '{b}\n{c}' -->
                        }

                    }

                },
　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~

　　　　　　　　barWidth:40,
				//设置柱状图的值	
                data: [10,9,7,6,5,3,2]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
	
	
	//折线图
	var myChart4 = echarts.init(document.getElementById('chart4'));

        // 指定图表的配置项和数据
       option4 = {
			title: {
				text: '折线图堆叠'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name:'邮件营销',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[120, 132, 101, 134, 90, 230, 210]
				},
				{
					name:'联盟广告',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[220, 182, 191, 234, 290, 330, 310]
				},
				{
					name:'视频广告',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[150, 232, 201, 154, 190, 330, 410]
				},
				{
					name:'直接访问',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[320, 332, 301, 334, 390, 330, 320]
				},
				{
					name:'搜索引擎',
					type:'line',
					//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
					stack: '总量',
					data:[820, 932, 901, 934, 1290, 1330, 1320]
				}
			]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);
	})
	 
</script>

<body>
    <div class="newdiv1">
            <div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019</option>
						<option>2018</option>
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-Ss8QiS1w-1562118749637)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart1" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
			<div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019年6月</option>
						<option>2019年5月</option>
						<option>2019年4月</option>
						<option>2019年3月</option>
						<option>2019年2月</option>
						<option>2019年1月</option>
					
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-NNqGN1tC-1562118749638)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart2" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
			<div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019年6月30</option>
						<option>2019年6月29</option>
						<option>2019年6月28</option>
						<option>2019年6月27</option>
						<option>2019年6月26</option>
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-ZwmKIv8j-1562118749638)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart3" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
    </div>
	
	<div class="newdiv1">
         <div class="newsdiv2">
			<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:5%;margin-top:10px;">
						<option>2019年</option>
						<option>2018年</option>
						<option>2017年</option>
						<option>2016年</option>
						<option>2015年</option>
						<option>2014年</option>
					
					</select>
					至
					<select style="width:5%;margin-top:10px;">
						<option>2019年</option>
						<option>2018年</option>
						<option>2017年</option>
						<option>2016年</option>
						<option>2015年</option>
						<option>2014年</option>					
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-gy27iR7D-1562118749639)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart4" style="display: inline-block;height:80%;width:100%"></div>
		 </div>
    </div>
   
</body>

</html>

山中水蓝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts.js的折线图的显示

1.目的编写这篇文章的目的是为了记住stack的用法2.演示如果你只是为了将某些设备的变化通过折线图显示出来，就不要用stack。不用stack的效果：stack的用法：数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置使用stack后的效果图：比较：使用stack属性后，后一个属性会将前一个属性的值累加起来显示，所以使用stack后会显示所有属性累加，例如，周一的时候...
复制链接

扫一扫

专栏目录