JS实现柱状图、折线图

效果图：

JSP页面：

<div class="canvesbox"><div class="la">    <button class="aweek">最近一周</button><select id="myselect"></select></div><div id="chartmain" style="width:100%; height: 400px;margin-top: 15px;"></div><div id="chartweek" style="width:100%; height: 400px;margin-top: 15px;"></div><div class="allNum">年消费总计：<span class="colorNum"> ￥</span>    <span class="zongjije colorNum fontNum"></span>元</div><div class="weekNum">最近消费总计：<span class="colorNum"> ￥</span>   <span class="weekje colorNum fontNum"></span>元</div>
</div>

JS：

<script type="text/javascript" src='<c:url value="/js/echarts.js"></c:url>'></script>$(function() {getData();getOpen();$("#chartmain").hide();$(".allNum").hide();$(".aweek").css({'border':'2px solid #6178EA'});
})//获取数据库消费的所有的年份
function getOpen(){$.ajax({url: "路径",data: {},dataType: "json",success: function(data){var mliye = eval('data.numye');$("#myselect").append("<option value=''>选择年份</option>");$.each(mliye,function(idx,obj){$("#myselect").append("<option value='"+obj.merchants+"-0-0"+"'>"+obj.merchants+"年"+"</option>");}); }});}//选择年份时获取每一年每个月消费情况
$("#myselect").change(function(){$(".aweek").css({'border':''});$("#myselect").css({'border':'2px solid #6178EA'});var time=$("#myselect").val();$("#chartmain").show();$(".allNum").show();$(".weekNum").hide();$("#chartweek").hide();getWeek(time);
});//获取交易流水数据、和最近一周每一天的消费总额以及一周的总额
function getData(time){$.ajax({url: "路径",data: {time:time},dataType: "json",success: function(data){var htmlStr = template("list",{allList:data.json});$("#allSlist").html(htmlStr);$(".weekje").text(data.weekmoney);var mlist = eval('data.weekjson');var nianArry=[];//年var money=[];//金额$.each(mlist,function(idx,obj){nianArry.push(obj.merchants+"-"+obj.archivesname+"-"+obj.consumtype);money.push(obj.consummoney);});//指定图标的配置和数据var option = {title:{text:'财务汇总'},tooltip:{trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend:{data:['用户来源']},xAxis:{data:nianArry},yAxis:{},series:[{name:'消费总额',type:'line',//type改成bar为柱状图，改成line为曲线图label: {normal: {show: true,position: 'top'}},itemStyle: {normal: {// 随机显示color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}// 定制显示（按顺序）/* color: function(params) { var colorList = ['#FFC0CB','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; return colorList[params.dataIndex] } */},},data:money}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartweek'));//使用制定的配置项和数据显示图表myChart.setOption(option);}});
}//选择最近一周显示最近一周的消费情况
$('.aweek').on("click", function() {$("#myselect").empty();$("#myselect").css({'border':''});$("#chartmain").hide();$(".allNum").hide();$("#chartweek").show();$(".weekNum").show();getData();getOpen();
})//获取每一年每个月的消费总额
function getWeek(time){if(""==time){return;}$.ajax({url: "路径",data: {time:time},dataType: "json",success: function(data){$(".zongjije").text(data.moneyzonge);//获取每一年每个月的消费总额var mlist = eval('data.json2');var yuan = "元 ";var nianfen=[];//年份var mouthArry=[];//月份var moneyNum=[];//金额$.each(mlist,function(idx,obj){mouthArry.push(obj.merchants+"-"+obj.archivesname);moneyNum.push(obj.consummoney);nianfen.push(obj.merchants);});//指定图标的配置和数据var option = {title:{text:'财务汇总'},tooltip:{trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend:{data:['用户来源']},xAxis:{data:mouthArry},yAxis:{},series:[{name:'消费总额',type:'bar',//type改成bar为柱状图，改成line为曲线图label: {normal: {show: true,position: 'top'}},itemStyle: {normal: {// 随机显示color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}// 定制显示（按顺序）/* color: function(params) { var colorList = ['#FFC0CB','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; return colorList[params.dataIndex] } */},},data:moneyNum}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartmain'));//使用制定的配置项和数据显示图表myChart.setOption(option);}});
}

JS实现柱状图、折线图相关推荐

柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...

JS实现柱状图、折线图

效果图：

JSP页面：

JS：

JS实现柱状图、折线图相关推荐

最新文章

热门文章