vue和表格和饼状图的渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>换乘分析</title><meta name="renderer" content="webkit"><#include "/header.html"><style>table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}html, body {width: 100%;height: 100%;background-color: #ffffff;margin: 0 auto;padding: 0;border: 0;}th {text-align:center;vertical-align:middle}</style>
</head>
<body>
<div id="rrapp"><div class="grid-btn"><!--        查询--><div style="margin-bottom: 40px;"><div class="form-group col-sm-2" style="margin-right: 10px"><div class="input-bor" style="width: 225px; line-height: 26px">线路：<select class="select01"  style="width: 145px;" v-model="lineNumber" @change="lineNum"><option value="">请选择</option><option value="1号线">1号线</option><option value="2号线">2号线</option><option value="3号线">3号线</option><option value="4号线">4号线</option><option value="5号线">5号线</option><option value="6号线">6号线</option><option value="7号线">7号线</option><option value="8号线">8号线</option><option value="9号线">9号线</option><option value="10号线">10号线</option><option value="11号线">11号线</option></select></div></div><div class="form-group col-sm-2"><div class="input-bor" style="width: 225px; line-height: 26px">年份查询：<input class="" style="width: 145px;height: 22px;border: none;text-align: left;" id="dateYear" v-model="dateYear" class="select01" type="text" readonly placeholder="请选择" @click.stop="datePick"></div></div><div class="form-group col-sm-2" style="margin-left: 20px"><a class="btn btn-warning" @click.stop="clearall" style="display: inline;">重置</a></div></div></div><table id="jqGrid" class="table-bordered ly-jqgrid"><div style="margin: 0 0 10px 10px; font-size: 12px"><span>注: 人数单位为"万人"</span></div></table><div id="jqGridPager"></div><!--        echart图表--><div style="width: 100%; height: 600px; margin-top: 20px"><div id="echartBar" style="width: 100%; height: 375px"></div></div>
</div><script type="text/javascript" src="${request.contextPath}/statics/libs/echarts.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.raty.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/plugins/layui/lay/laydate/laydate.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/modules/klyyfx/ycysjkldb.js"></script></body>
</html>$(function () {$("#jqGrid").jqGrid('clearGridData');  //清空表格$("#jqGrid").jqGrid({url: '/gdjt/castAct/getListPage',datatype: "json",postData:{'page': '', // 每页'limit': '' // 每页条数据},colModel: [{ label: '序号', name: 'id', index: 'SSHY',align:'center', width: 6,formatter: function (value, option, rowItem) {return value - 19}},{ label: '线路名称', name: 'lineName', align:'center', width: 10},{ label: '统计时间', name: 'statTime', align:'center', width: 10},{ label: '日均客运总量（实际/预测）', name: '', align:'center', width: 10,formatter: function (value, option, rowItem) {// console.log(rowItem) // 每条数据展示return rowItem.sjrjkyzl + ' / ' + rowItem.ycrjkyzl}},{ label: '高峰小时最大断面流量（实际/预测）', name: '', align:'center', width: 16,formatter: function (value, option, rowItem) {return rowItem.sjgfxszddmll + ' / ' + rowItem.ycgfxszddmll}},{ label: '最小发车间隔（实际/预测）秒', name: '', align:'center', width: 10,formatter: function (value, option, rowItem) {return rowItem.sjzxfcjg + ' / ' + rowItem.yczxfcjg}},{ label: '运能运用率（实际/预测）%', name: '', align:'center', width: 10,formatter: function (value, option, rowItem) {return rowItem.sjynlyl + ' / ' + rowItem.ycynlyl}},{ label: '日平均运距（实际/预测）km', name: '', align:'center', width: 10,formatter: function (value, option, rowItem) {return rowItem.sjrpjyj + ' / ' + rowItem.ycrpjyj}},{ label: '日均周转量（实际/预测）km', name: '', align:'center', width: 10,formatter: function (value, option, rowItem) {return rowItem.sjrjzzl + ' / ' + rowItem.ycrjzzl}}],viewrecords: true, // 是否要显示总记录数信息height: 401, // 表格高度rowNum: 10, // 设置表格可以显示的记录数rowList : [10,30,50], // 可以改变表格可以显示的记录数rownumbers: false, // 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。rownumWidth: 60, // 如果rownumbers为true，则可以设置column的宽度autowidth:true, // 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth//multiselect: true, // 定义是否可以多选pager: "#jqGridPager",jsonReader : { // 跟服务器端返回的数据做对应root: "data.records", // 包含实际数据的数组page: "data.current", // 当前页total: "data.pages", // 总页数records: "data.records" // 查询出的记录数},prmNames : { // 传递给后端的数据page: 'page',rows: 'limit',order: "order"}})
})var vm = new Vue({el:'#rrapp',data:{page: 1,limit: 10,dateYear: new Date().getFullYear(), // 年份查询lineNumber: '' // 线路查询},mounted() {this.initPage() // 默认执行},created() {},methods: {initPage() {this.chartData()// this.getEcharts()this.query()this.getList()},// 年选择器datePick() {var _this = thislaydate.render({elem: '#dateYear',type: 'year',trigger: 'click',done: function(value, date){vm.dateYear = value_this.query()_this.getList()}})},// 查询query() {var _this = thisvar page = $("#jqGrid").jqGrid('getGridParam','page');$("#jqGrid").jqGrid("clearGridData").jqGrid('setGridParam',{postData:{'line': _this.lineNumber,'year': _this.dateYear},page:page}).trigger("reloadGrid");},// 路线查询lineNum () {vm.query()},// 重置clearall() {vm.page = 1vm.limit = 10vm.dateYear = new Date().getFullYear()vm.lineNumber = ''vm.query()vm.getList()},// 获取数据getList() {var _this = thisrequest('castAct/getListPage', {data: {page: _this.page,limit: _this.limit,year: _this.dateYear},success: function (res) {// console.log(res.records)_this.chartData (res.records)}})},// // 获取图表数据// getEcharts() {//     var _this = this//     request('castAct/getInfo'+this.dateYear, {//         success: function(res) {//             _this.chartData (res)//             // console.log('图表查询', res)//         }//     })// },// 图表数据chartData (res) {var objChart = {xAxis: [],year: '',colors: ['#88a21d','#0c7d22','#ad2b3d','#be75d0','#056025','#38ad8e','#9b0fbe','#26bf6b','#e1e95d','#4fb480','#54a5fa','#b80164',],legendName: ['日均客运总量/万人（实际）','日均客运总量/万人（预测）','高峰小时最大断面流量/万人（实际）','高峰小时最大断面流量/万人（预测）','最小发车间隔/s（实际）','最小发车间隔/s（预测）','运能利用率/%（实际）','运能利用率/%（预测）','日平均运距/km（实际）','日平均运距/km（预测）','日均周转量/km（实际）','日均周转量/km（预测）'],// legendName: ['sjrjkyzl','ycrjkyzl','sjgfxszddmll','ycgfxszddmll','sjzxfcjg','yczxfcjg','sjynlyl','ycynlyl','sjrpjyj','ycrpjyj','sjrjzzl','ycrjzzl'],sjrjkyzl: [], // 实际日均客运总量ycrjkyzl: [],sjgfxszddmll: [], // 实际高峰小时最大断面流量ycgfxszddmll: [],sjzxfcjg: [], // 实际最小发车间隔yczxfcjg: [],sjynlyl: [], // 实际运能运用率ycynlyl: [],sjrpjyj: [], // 实际日平均运距ycrpjyj: [],sjrjzzl: [], // 实际日平均周转量ycrjzzl: [],}var res = res || []res.map(function (item) {objChart.xAxis.push(item.month + '月')objChart.year = item.yearobjChart.sjrjkyzl.push(item.sjrjkyzl)objChart.ycrjkyzl.push(item.ycrjkyzl)objChart.sjgfxszddmll.push(item.sjgfxszddmll)objChart.ycgfxszddmll.push(item.ycgfxszddmll)objChart.sjzxfcjg.push(item.sjzxfcjg)objChart.yczxfcjg.push(item.yczxfcjg)objChart.sjynlyl.push(item.sjynlyl)objChart.ycynlyl.push(item.ycynlyl)objChart.sjrpjyj.push(item.sjrpjyj)objChart.ycrpjyj.push(item.ycrpjyj)objChart.sjrjzzl.push(item.sjrjzzl)objChart.ycrjzzl.push(item.ycrjzzl)})this.initChart('echartBar', objChart)// console.log(objChart.year)},// 图表展示initChart (id, configs) {configs = configs || {}var option = {title: {show: true,text: configs.year + '年轨道交通实际与预测的客流情况',x: 'center'},color: configs.colors, // 颜色tooltip: { // 提示框trigger: 'axis', // 触发方式axisPointer: {type: 'shadow' // 阴影显示器}},legend: { // 标题show: true, // 显示data: configs.legendName,bottom: "0%"},grid: { // 图表跟容器的间距show: true,// left: '3%',// right: '4%',bottom: '30%',// containLabel: true},xAxis: {type: 'category',data: configs.xAxis,axisTick: {show: false},// axisLabel:{ // x轴标题倾斜加超出隐藏//     interval: 0,//     rotate: 30,//     // formatter: function (value) { // 竖着排列//     //     return value.split('').join('\n')//     // }//     formatter: function(value) { // 标题超出隐藏//         var res = value;//         if(res.length > 5) {//             res = res.substring(0, 8) + "..";//         }//         return res;//     }// },},yAxis: {min: 0,show: true,splitLine: {show: true// lineStyle: { // 刻度线颜色//     color: '#4c9bfd'// }},axisLine: {show: false // 去除轴线},axisTick: {show: false //去除刻度线},type: 'value'},series: [{type: 'bar',barGap: '0%', // 清除个多个柱子之间的空隙name: configs.legendName[0],data: configs.sjrjkyzl},{type: 'bar',barGap: '0%',name: configs.legendName[1],data: configs.ycrjkyzl},{type: 'bar',barGap: '0%',name: configs.legendName[2],data: configs.sjgfxszddmll},{type: 'bar',barGap: '0%',name: configs.legendName[3],data: configs.ycgfxszddmll},{type: 'bar',barGap: '0%',name: configs.legendName[4],data: configs.sjzxfcjg},{type: 'bar',barGap: '0%',name: configs.legendName[5],data: configs.yczxfcjg},{type: 'bar',barGap: '0%',name: configs.legendName[6],data: configs.sjynlyl},{type: 'bar',barGap: '0%',name: configs.legendName[7],data: configs.ycynlyl},{type: 'bar',barGap: '0%',name: configs.legendName[8],data: configs.sjrpjyj},{type: 'bar',barGap: '0%',name: configs.legendName[9],data: configs.ycrpjyj},{type: 'bar',barGap: '0%',name: configs.legendName[10],data: configs.sjrjzzl},{type: 'bar',barGap: '0%',name: configs.legendName[11],data: configs.ycrjzzl}]}var myChart = echarts.getInstanceByDom(document.getElementById(id));if (myChart === undefined) {myChart = echarts.init(document.getElementById(id));}else{myChart.clear(myChart)}myChart.setOption(option, true);}}
})

vue和表格和饼状图的渲染相关推荐

AntV中的饼状图重复渲染问题解决
场景在使用AntV的饼状图时,在页面加载完之后js中会ajax请求一次后台数据, 有一个时间的选择框,选择时间后点击搜索会再次执行ajax请求一次. 效果如图: 可是最终导致的后果是饼状图重复渲染. ...
vue中如何画饼状图
废话不多说,直接上干货. 1.在自己的项目里面安装echarts npm install echarts --s 2.在template中为echarts准备一个容器dom <template& ...
C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）
一.思路: 1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格二.看代码: #region 生成饼图图例/// <s ...
Word中插入表格与柱状图饼状图技术经验分享
最近公司一个项目里要求自动生成报告功能,研究了1周多,主要实现方式是通过调用微软Office COM组件来实现操作word文档,生成段落,表格,及各种图表. 本人发现操作word地方也有几个坑人的地方 ...
Java使用Poi实现导出Word段落以及表格，XWPFParagraph和XWPFRun详解，生成目录,生成折线图、柱状图、饼状图
导出段落 public void exportSummarizeWord(HttpServletResponse response, Integer id) {Summarize summarize ...
在vue中使用antV-G2展示半径饼状图
介绍在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
springboot+mybatisplus+thymeleaf导入导出excel表格和制作饼状图，柱状图
这是我们的项目结构. 我们导入的依赖. application.yml配置文件. goods实体类 type实体类 1.导出前端代码: JavaScript代码: 通过这里跳转到后端导出的工具 ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...

vue和表格和饼状图的渲染

vue和表格和饼状图的渲染相关推荐

最新文章

热门文章