Echart输出图形
Posted 如风105
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echart输出图形相关的知识，希望对你有一定的参考价值。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8"> <title>广兰路电压模拟量显示</title> <!-- 引入 echarts.js --> <script src="js/echarts.common.min.js"></script> <script src="js/jquery-1.8.3.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:500px;width:100%;margin:0 auto"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main‘)); option = { title: { text: ‘广兰路电压模拟量实时显示‘, left:‘7%‘, top:‘5%‘, }, tooltip: { trigger: ‘axis‘ }, legend: { show:true, data:[‘上行门使能‘,‘上行开门‘,‘上行门锁闭‘,‘下行门使能‘,‘下行开门‘,‘下行门锁闭‘], // left:‘80px‘, }, grid: { left: ‘3%‘,//grid组件离容器左侧的距离 right: ‘4%‘, bottom: ‘3%‘, top:‘10%‘, containLabel: true //是否显示坐标轴的刻度标签 }, toolbox: {//工具栏 feature: { saveAsImage: {} } }, dataZoom: [ { type: ‘slider‘, //支持鼠标滚轮缩放 start: 0, //默认数据初始缩放范围为10%到90% end: 100 }, { type: ‘inside‘, //支持单独的滑动条缩放 start: 0, //默认数据初始缩放范围为10%到90% end: 100 } ], xAxis: { type: ‘category‘,//坐标轴类别，类目轴，适用于离散的类目数据，通过data设置类目数据 boundaryGap: true, data: [] }, yAxis: { type: ‘value‘//数值轴，用于连续数据 }, series: [ { name:‘上行门使能‘, type:‘line‘, //stack: ‘总量‘, data:[] }, { name:‘上行开门‘, type:‘line‘, // stack: ‘总量‘, data:[] }, { name:‘上行门锁闭‘, type:‘line‘, //stack: ‘总量‘, data:[] }, { name:‘下行门使能‘, type:‘line‘, //stack: ‘总量‘, data:[] }, { name:‘下行开门‘, type:‘line‘, //stack: ‘总量‘, data:[] }, { name:‘下行门锁闭‘, type:‘line‘, //stack: ‘总量‘, data:[] }, ] }; $(document).ready(function(){ setInterval(" getNewData()",10000); }) function getNewData(){ var upenablevol =[];//上行使能电压数组 var upopenvol =[];//上行开门电压数组 var uplockingvol=[];//上行门锁闭电压数组 var downenablvol=[];//下行门使能电压数组 var downopenvol =[];//下行开门电压数组 var downlockvol =[];//下行门锁闭电压数组 var dates =[];//当前系统时间 $.ajax({ //使用JQuery内置的Ajax方法 type : "post", //post请求方式 async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "GuangLanRoadUpVoltageServlet", //请求发送到 GuangLanRoadUpVoltageServlet 处 dataType : "json", //返回数据形式为json cache:false, success : function(result) { //请求成功时执行该函数内容，result即为服务器返回的json对象 //debugger; if (result != null && result.length > 0) { for(var i=0;i<result.length;i++ ){ upenablevol.push(result[i].upenablevoltage); //挨个取出电压电流等数组 upopenvol.push(result[i].upopenvoltage); uplockingvol.push(result[i].uplockingvoltage); downenablvol.push(result[i].downenablevoltage); downopenvol.push(result[i].downopenvoltage); downlockvol.push(result[i].downlockingvoltage); dates.push(result[i].currenttimestr);//填入X轴的数据 } myChart.setOption({ //载入数据 xAxis: { data: dates //填入X轴数据, }, series: [ //填入系列（内容）数据 { // 根据名字对应到相应的系列 name: ‘上行门使能电压‘, data: upenablevol }, { name: ‘上行门锁闭电压‘, data: uplockingvol }, { name:‘上行开门电压‘, data: upopenvol }, { name:‘下行门使能电压‘, data: downenablvol }, { name:‘下行门锁闭电压‘, data: downlockvol }, { name:‘下行开门电压‘, data: downopenvol } ] }); } else { //返回的数据为空时显示提示信息 alert("图表请求数据为空，您可以稍后再试！"); // myChart.hideLoading(); } }, }) }//function getnewdata 的结束 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
以上是关于Echart输出图形的主要内容，如果未能解决你的问题，请参考以下文章