echarts折线图使用

最新推荐文章于 2022-10-25 15:07:47 发布

qq_1291799550

最新推荐文章于 2022-10-25 15:07:47 发布

阅读量555

点赞数

分类专栏： jsp 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41722217/article/details/125916408

版权

jsp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[@TOC]

0.效果,点击数据信息实现弹窗

在这里插入图片描述

1.引入css

<script language="javascript" src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

2.准备一个DOM

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="lineChart" style="width: 100%;height:90%;"></div>

3.编写js

3.1 准备数组，存放x轴和待显示的折线

var txs = new Array(); //x轴
var series1 = new Array();
var series2 = new Array();
var series3 = new Array();

3.2 给数组赋值

<%
	long sj_date = LongCalendar.getLongCalendar();
    	for(int i = 0; i<listSJC.size(); i++){
    	    Map map = (Map)  listSJC.get(i);
			String x = (String)map.get("SJ_HH");
			String max_sjc = (String)map.get("MAX_SJC");
			String min_sjc = (String)map.get("MIN_SJC");
			String avg_sjc = (String)map.get("AVG_SJC");
    	%>
    	    
			txs[<%=i%>] = "<%=x%>";    //类别数组（实际用来盛放X轴坐标值）    
			series1[<%=i%>] = <%=max_sjc%>;
			series2[<%=i%>] = <%=min_sjc%>;
			series3[<%=i%>] = <%=avg_sjc%>;
    	<%
    	}
    	%>

3.3 基于准备好的dom，初始化echarts实例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('lineChart'));
// 指定图表的配置项和数据
myChart.setOption ({
    title: {
        text: '响应统计'  //图标的名字
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最大值','最小值','平均值']  //三条折线的名字
    },
    toolbox: {  
        show: true,  //是否显示右上角的视图转换
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },  //line 折线图；bar 柱状图
            restore: { show: true }  //还原初始的视图类型
        }
    },
    calculable: true,
    xAxis: {
        type: 'category',
        boundaryGap: false, //取消左侧的间距
        data: txs  //x轴数据
    },
    yAxis: {
        type: 'value',
        name: ''
    },
    series: [{
        name: '最大值',  //跟上面折线图的名字相同
        type: 'line',
        symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
        data: series1

    },
             {
                 name: '最小值',
                 type: 'line',
                 symbol: 'emptyrect',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                 data: series2
             },
             {
                 name: '平均值',
                 type: 'line',
                 symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                 data: series3
             }]
});

//myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
    xAxis: {
        data: txs 
    },
    series: [{                    
        data: series1  //最大值
    },
             {
                 data: series2 //最小值
             },
             {
                 data: series3 //平均值
             }]
});

3.4 点击数据触发事件

//点击数据触发事件
myChart.on('click', function(params){
    var sj_HH = params.name;  //x轴值
    var sj_date = <%=jssj%>;
    openDialog({
        url:"<%= application.getAttribute("MISRoot")%>/HTTPController?RequestID=<%=secretCoder.encodeStr("DF_SSGL_MRDZ_listFzxx")%>"+"&HH="+sj_HH+"&date="+sj_date,
        title:"数据详细信息",
        width:"90%",
        height:"80%"
 });

3.5 代码整合

<script type="text/javascript">
    	var txs = new Array(); //x轴
    	var series1 = new Array();
	    var series2 = new Array();
	    var series3 = new Array();
    	
    	<%
	long sj_date = LongCalendar.getLongCalendar();
    	for(int i = 0; i<listSJC.size(); i++){
    	    Map map = (Map)  listSJC.get(i);
			String x = (String)map.get("SJ_HH");
			String max_sjc = (String)map.get("MAX_SJC");
			String min_sjc = (String)map.get("MIN_SJC");
			String avg_sjc = (String)map.get("AVG_SJC");
    	%>
    	    
			txs[<%=i%>] = "<%=x%>";    //类别数组（实际用来盛放X轴坐标值）    
			series1[<%=i%>] = <%=max_sjc%>;
			series2[<%=i%>] = <%=min_sjc%>;
			series3[<%=i%>] = <%=avg_sjc%>;
    	<%
    	}
    	%>
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart'));
        // 指定图表的配置项和数据
        myChart.setOption ({
            title: {
                text: '响应统计'
            },
            tooltip: {
				trigger: 'axis'
			},
            legend: {
                data:['最大值','最小值','平均值']
            },
		    toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar'] },
					restore: { show: true }
				}
			},
			calculable: true,
            xAxis: {
				type: 'category',
				boundaryGap: false, //取消左侧的间距
                data: txs
            },
            yAxis: {
				type: 'value',
				name: ''
			},
            series: [{
                name: '最大值',
                type: 'line',
				symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
				data: series1
                
            },
			{
                name: '最小值',
                type: 'line',
                symbol: 'emptyrect',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
				data: series2
            },
			{
                name: '平均值',
                type: 'line',
                symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
				data: series3
            }]
        });
		
	//myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
		
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
		       xAxis: {
                    data: txs
                },
                series: [{                    
                    data: series1
                },
                {
                    data: series2
                },
                {
                    data: series3
                }]
		});
		//点击数据触发事件
		myChart.on('click', function(params){
			var sj_HH = params.name;  //x轴值
			var sj_date = <%=jssj%>;
			openDialog({
				url:"<%= application.getAttribute("MISRoot")%>/HTTPController?RequestID=<%=secretCoder.encodeStr("DF_SSGL_MRDZ_listFzxx")%>"+"&HH="+sj_HH+"&date="+sj_date,
				title:"数据详细信息",
				width:"90%",
				height:"80%"
	        }); 
			
		})
    </script>