ECharts折线图小结

最新推荐文章于 2024-03-16 16:21:42 发布

爪穴心久

最新推荐文章于 2024-03-16 16:21:42 发布

阅读量5.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38317491/article/details/76512507

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近用Echarts的折线图做了一份报表，在使用过程中遇到了一些小麻烦，在这边总结下，js如下：

//iuput_echart_div是用来放图表的div,echarts是echarts.min.js中的参数（记得首先导入echarts.min.js，这个是echarts的js文件）
myChart = echarts.init(document.getElementById('iuput_echart_div'));
title="代码"
option = {
		    legend: {
		    	data:[title]
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            magicType : {show: true, type: ['line', 'bar']},
		        }
		    },
		    calculable : true,
		    tooltip : {
		        trigger: 'axis',
		        formatter: "Temperature : <br/>{b} : {c}"
		    },
		    yAxis : [
		        {
		            type : 'value',
		            axisLabel : {
		                formatter: '{value}'
		            },
		            name : '货量/票',
		            nameLocation:'middle',
		            nameGap : 100
		        }
		    ],
		    xAxis : [
		        {
		            type : 'category',
		            axisLine : {onZero: false},
		            axisLabel : {
		                formatter: '{value} '
		            },
		            boundaryGap : false,
		            data : timeList,
		            name : '时间',
		            nameLocation:'middle',
		            nameGap : 40
		        }
		    ],
		    grid: {
		    	x: 120
		    },
		    	              
		    series : [
		        {
		            name:title,
		            type:'line',
		            smooth:true,
		            itemStyle: {
		                normal: {
		                    lineStyle: {
		                        shadowColor : 'rgba(0,0,0,0.4)'
		                    }
		                }
		            },
		            data:operList
		        }
		    ]
		};
//以下代码是将echart显示出来
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

效果图如下：

关于这段代码，有几点说明：

1、title这个就不用多说了，是这个折线图的标题

2、toolbox：这个是用来显示折线图的工具栏的，就是这个，现在只显示了两个，其实有好几个，具体的可以参照Echarts官网上的例子

3、yAxis : 这个是用来设置y轴的相关属性的，其中name（设置这个y轴的名称）， nameLocation（设置y轴名称的显示位置，有三种形式，start,end,middle,现在显示的是middle形式），nameGap （这个属性是用来设置name与y轴距离，设置小了会使得name跟坐标上的数字重合）。xAxis跟yAxis相同

4、grip:这其实是个很有用的属性，他用来限定整张图表的边界，我现在用过4个参数，分别是x,y,x1,y1。x表示图表的左边框距离y轴x距离（把整张图表当成一张图片，这个图片的最左边与y轴的距离就是这个值。意义在于如果你这个值设置的小了，y轴左侧需要显示的内容就可能显示不全，就相当于显示的内容跑到图片外去了）。其他三个属性是设置另外三个方向的。

5、这张图表中的data（图表显示的数据）都是List，即在java后端将数据整合成List集合然后传到前端来就可以了

以上是我在使用过程中的一些心得，欢迎大家补充！