echarts画折线图的简单使用

最新推荐文章于 2024-04-07 15:33:41 发布

Amily_an

最新推荐文章于 2024-04-07 15:33:41 发布

阅读量655

点赞数

分类专栏： js 文章标签： js科学计数法 x轴两行显示日期时间 js求最大值 js保留两位小数并四舍五入折线数据点大小的设置

本文链接：https://blog.csdn.net/Amily_an/article/details/100767383

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

使用echarts画折线图

在做项目的时候使用到了echarts插件，在使用的过程中客户提了各种各样的需求，在这里总结下：
echarts.min.js的下载地址：https://www.echartsjs.com/en/download.html

详细学习各个配置的链接：https://www.echartsjs.com/en/option.html

其余需求都在代码里标注了：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用echarts画折线图</title>
<script type="text/javascript" src="echarts.min.js" ></script>

</head>
<style>
.box{
	width:98%;
	height:500px;
	top:200px;
	border:1px solid #c0c0c0;
	margin: 5px 5px;
}
</style>

<body>
	
	<div class="box" id="lineChart"></div>
	
	<script type="text/javascript">
	//用id找div
	var myChart = echarts.init(document.getElementById('lineChart'));

	var x = ['2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00',
			'2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00'];
			
	var y = [21941.146, 1654642.6444, 651165.5464, 15415616, 16440.564, 51654.264, 462.556, 9744.15, 546, 442.61];
	var max = Math.max.apply(Math,y);
   	//.toFixed(2)小数点保留两位并四舍五入
   	for(var i = 0; i < y.length; i++) {
		//string转float
   		y[i] = parseFloat(y[i]);
   		if(y[i]%1 === 0){
			y[i] = y[i];
		}else{
			y[i] = y[i].toFixed(2);
		}
   	}

	   	var option = {
			//线的颜色
            color: ['#8EC9EB'],
			//图例的位置
            legend: {
                data: ['lineName'],
                y: 'bottom',
		        x: 'left'
            },
            title: {
            	text: 'title',
            	subtext: 'subtext'
            },
            //折线图与div之间空隙的设定
            //x：左边距、x2：右边距、y：上边距、y2：下边距
            grid:{
                x:80,
                x2:80,
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    dataView: {},
                    saveAsImage: {
                    },
                }
            },
            xAxis: {
                type: 'category',
                //x轴的数值逐一对应
                boundaryGap: false,
                //显示与y轴平行的直线
                splitLine: {show: true},
                data: x.map(function (str) {
                	//x轴的日期时间两行显示
	                return str.replace(' ', '\n')
	            }),
				//x轴的名称
                //name: 'hours',
                //x轴显示值
				axisLabel: {
					//倾斜30度显示数值
					rotate: 30,
					//数据全部显示(强制)
					interval:0,
                    formatter: function (value) {
							return value.substring(5,16);

                    }
                }

            },
			yAxis: {
            	type: 'value',
            	//y轴显示值
            	axisLabel: {
            		//科学计数法
					formatter: function (value) {
							var res = value.toString();
							var numN1 = 0;
							var numN2 = 1;
							var num1=0;
							var num2=0;
							var t1 = 1;
							for(var k=0;k<res.length;k++){
								if(res[k]==".")
								   t1 = 0;
								if(t1)
								   num1++;
								else
								   num2++;
							}
							//abs()方法，取数的绝对值
							if(Math.abs(value)<1 && res.length>4)
							{
								for(var i=2; i<res.length; i++){
									if(res[i]=="0"){
										numN2++;
									}else if(res[i]==".")
										continue;
									else
										break;
								}
								var v = parseFloat(value);
								v = v * Math.pow(10,numN2);
								return v.toString() + "e-" + numN2;
							}else if(value == 0){
								return 0;
							}else if(max>=10000){
								if(res[0]=="-")
									numN1 = num1 - 2;
								else
									numN1 = num1 - 1;
								var v = parseFloat(value);
								v = v / Math.pow(10,numN1);
								if(num2 > 4)
									v = v.toFixed(4);
								return v.toString() + "e" + numN1;
							}else
								return parseFloat(value);
					}
				}
            },
            series: [{
                name:'lineName',
            	type: 'line',
            	//数据点的大小
        		symbolSize: 10,
            	//使折线有弧度
                smooth: true,
                //折线数据点的数值的显示
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
                data: y

            }]
        };

		//画折线图
        myChart.setOption(option);

	</script>
</body>
</html>

运行结果如下：
在这里插入图片描述

Amily_an

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts画折线图的简单使用

使用echarts画折线图在做项目的时候使用到了echarts插件，在使用的过程中客户提了各种各样的需求，在这里总结下：echarts.min.js的下载地址：https://www.echartsjs.com/en/download.html其余需求都在代码里标注了：<!DOCTYPE html><html><head><meta char...
复制链接

扫一扫