使用echarts在jsp页面开发一个简单的折线图实例

最新推荐文章于 2024-07-05 17:19:25 发布

1988我想和这个世界谈谈

最新推荐文章于 2024-07-05 17:19:25 发布

阅读量2.1k

点赞数

分类专栏： echarts 文章标签： echarts 折线图折线图实例

本文链接：https://blog.csdn.net/malz_zh/article/details/85006703

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此实例是根据后台查询到的数据展示的实例，涉及框架(此实例是dwr)，若需要展示固定参数数据的实例请看博客：https://blog.csdn.net/malz_zh/article/details/85006979

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'tvHisQuery.jsp' starting page</title>
   <script src="./js/echarts.js" type="text/javascript"></script>//echarts.js放在该页面的同级文件夹js中
</head>

<body>

<div id='main' style='width:600px;height:400px;'></div>
<script type="text/javascript">
$(document).ready(function(){//进入页面后自动执行该程序
var dates=null;

//使用的是dwr框架
           servicetool.tvHisQreu(function(date){//date为后台返回的json参数，格式如{"衣服":"62","鞋":"62","手套":"1","裤子":"0"}
           var json=eval('(' + date + ')');
           var arrayName = new Array();//定义横轴显示数字
           var arrayValue = new Array();//定义纵轴值数组
           for (var key in json)
       {
           arrayName.push(key);
           arrayValue.push(json[key]);
       }
           //基于准备好的DOM，初始化echarts实例--echarts.init() 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，
   var myChart = echarts.init(document.getElementById('main'));
   //指定图表的配置项和数据
   var option = {
   title:{
   text:'数据展示',//标题
   // subtext: '',//备注
   left: 'center',//标题位置
   textStyle: {//标题颜色
           color: '#ccc'
           }
   },
   //提示框组件
   tooltip:{
   //坐标轴触发，主要用于柱状图，折线图等
   trigger:'axis'
   },
   //横轴显示
   xAxis:{
   data:arrayName
   },
   //纵轴显示
   yAxis:{},
   //系列列表。每个系列通过type决定自己的图表类型
   series:[{
   name:'销量',                           //series名称
   type:'line',                       //series图表类型,line折线图、scatter散点图
   data:arrayValue
   }]
   };
   //使用刚指定的配置项和数据显示图表
   myChart.setOption(option);
           });
       });
   </script>
</body>
</html>

1988我想和这个世界谈谈

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用echarts在jsp页面开发一个简单的折线图实例

此实例是根据后台查询到的数据展示的实例，涉及框架(此实例是dwr)，若需要展示固定参数数据的实例请看博客：https://blog.csdn.net/malz_zh/article/details/85006979&lt;html&gt; &lt;head&gt; &lt;base href="&lt;%=basePath%&gt;"&gt; &lt;title&...
复制链接

扫一扫

专栏目录