vue和表格和饼状图的渲染

最新推荐文章于 2022-07-11 20:04:13 发布
最新推荐文章于 2022-07-11 20:04:13 发布
阅读量297 收藏 1
点赞数
分类专栏： js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43353869/article/details/109857729
版权
js 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue.js
17 篇文章 1 订阅
订阅专栏 
<!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 = this
            laydate.render({
                elem: '#dateYear',
                type: 'year',
                trigger: 'click',
                done: function(value, date){
                    vm.dateYear = value
                    _this.query()
                    _this.getList()
                }
            })
        },

        // 查询
        query() {
            var _this = this
            var 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 = 1
            vm.limit = 10
            vm.dateYear = new Date().getFullYear()
            vm.lineNumber = ''
            vm.query()
            vm.getList()
        },

        // 获取数据
        getList() {
            var _this = this
            request('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.year
                objChart.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);
        }
    }
})
hardwork come on
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue中使用Highcharts（图形报表库）
郭宝的博客
02-01 1041
效果图： 图像 具体步骤： 1、首先通过npm安装highcharts 依赖 npm install highcharts --save 2、创建图标容器 <div ref="chartContainer" style="width: 500px;height: 300px" /> 3、然后在.vue文件中局部引入 HighCharts import HighCharts from 'highcharts'; 4、然后编写图表配置项 // 图表配置..
table vue 背景图片_vue.js怎么渲染背景图
weixin_39865277的博客
12-21 303
本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。vue.js渲染背景图的方法：带参数传值本地美食美食美食美食图片美食价格{{i.name}} // 渲染本地图片{{i.price}}export default {name: "foot",data: function () {return {footlist: [] //初始化列表}},mounted() {var a...
vue中使用动态echart图表
weixin_34192993的博客
09-14 1288
&lt;template&gt; &lt;div class="block"&gt; &lt;div class="title"&gt;展会实时人流里统计&lt;/div&gt; &lt;div :class="className" :id="id" :style="{height:height,width:width}&quo
vue + eCharts 实现图表展示
weixin_30682415的博客
04-11 675
一、首先安装 eCharts 依赖 npm install echarts -S 二、main.js 引入 eCharts 依赖 　　2.1）在 main.js 中引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 　　2.2）HTML.vue export default ...
CSS3 - vue中纯css实现柱状图表效果
xing.org1^
07-05 226
背景 以前我们制作柱状图都用echarts或者其他同类型的图表插件 这次是个移动端的需求，而且这个图表需要动画 使用echarts就会显得过重，而且动画达不到我想要的效果(主要是我自己愚蠢想不到好的动画办法)。 先来看下效果图： 几个柱状图分数不满时： 几个满分柱图： 还有完整的元素组合动画效果： ps：圆环+进度的效果制作，见下篇(圆环动画效果-3)。 从最后一张图中可以看出这个需求，柱...
vue2.0 自定义 饼状图 (Echarts)组件的方法
08-27
Vue 2.0 自定义饼状图 (Echarts) 组件的方法 在 Vue 2.0 中，创建自定义饼状图 (Echarts) 组件可以实现灵活的数据可视化。下面，我们将创建一个自定义的饼状图组件，使用 Echarts 库来绘制饼状图。 组件结构 首先...
Vue.js实现表格渲染的方法
10-18
今天小编就为大家分享一篇对Vue.js实现表格渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+iview动态渲染表格详解
10-17
以下将详细介绍如何使用Vue和iView来动态渲染表格。 首先，我们需要了解Vue的基础知识，Vue是一个轻量级的JavaScript框架，它使用MVVM（Model-View-ViewModel）模式，允许开发者通过声明式的方式绑定数据到视图。而...
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: ...
详解vue 数组和对象渲染问题
10-17
在Vue.js中，数组和对象的渲染问题是开发者经常会遇到的挑战。Vue的响应式系统依赖于数据劫持来实现视图与数据的双向绑定。当数组或对象的属性发生变化时，视图通常会自动更新以反映这些变化。然而，由于JavaScript...
vue + d3.js(v6) 绘制【柱状图/条形图】（含动画和交互）
朝阳39的博客
01-21 842
安装d3 npm install d3 .vue文件中 <template> <div></div> </template> <script> import * as d3 from 'd3'; export default { mounted() { // 数据——x轴的标签——城市 let labelList = ["成都", "武汉", ...
利用ComponentOne创建具有动画效果的图表
yw10260609的专栏
02-20 854
在ComponentOne的最新版本2012 V3中的C1 Chart控件提供了新的动画API，利用C1 Chart控件可以轻松地实现动画图表的旋转，缩放等复杂动画效果，接下来我已实例为大家展示ComponentOne控件集中的C1 Chart控件的应用。首先介绍创建动画图表的方法：C1Chart中有一个单PlotElementAnimation类，它只有两个属性：Storyboard和Symbo
vue 2个方法先后执行_2个超赞的 Vue 酷炫图表组件Vue-Chart
weixin_39624367的博客
11-20 581
这次给小伙伴们推荐的是2个基于vue.js创建的超炫酷实用的图表组件vue-chart。1、VueChartvue-chart 是一个基于 vue.js + chart.js 构建可复用的超漂亮 Vue 图表组件。安装$ npm i @seregpie/vue-chart -S使用组件 组件参数提供各种精美图表组件演示示例附上示例及仓库地址# 官网文档https://www.chartjs.or...
vue 图表_基于 Vue+AntV/G2可视化组件库Vue-G2
weixin_39918961的博客
11-20 541
前段时间有分享一个蚂蚁金服推出的数据可视化解决方案AntV。今天再给大家推荐一款Vue和Antv可视化组件库VueG2。AntV全新数据可视化解决方案vue-g2 阿里G2可视化图表的Vue封装。包含折线图、柱状图、直方图、饼图、环图、面积图、雷达图、液体填充图等多种图表类型。安装依赖$ npm i @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g2 -S引入/...
Vue实现可视化图表Echarts功能：
SunPeng的博客
07-11 432
Vue实现可视化图表Echarts功能：
Vue表单元素及生命周期和动画效果的笔记整理
weixin_49156206的博客
10-29 180
vue-day02 1.表单元素 1.input 单选，多选，下拉 下拉多选 文本域 提交 单选 <!-- radio:需要出现互斥情况，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 --> 性别:<input type="radio" v-model='sex' value="男">男 <input type="radio" v-model='sex' value="女">女 多选 <div id="ap
vue 使用echart图表 随屏幕放大缩小_常用的视频剪辑软件——VUE(二)
weixin_39576104的博客
12-13 175
大家好，我是爱剪辑的IT狗，上节课给大家讲了软件VUE的操作界面的所有功能。这篇给大家讲下vue的剪辑界面的功能。导演，我想要一个这样的模特分段模式假设我们选择的是分段模式(4段总共10秒)我准备拍个10秒短视频发朋友圈，当时开始前除了选择模式以外，还要选择画幅、滤镜(拍摄完之后也可以修改)、正常(快镜头或慢镜头)在确定好以上参数后，点击中间的拍摄按钮即可开始第一段视频的拍摄。点击拍摄在拍摄过程中...
vue 使用 echarts 制图
N years的博客
10-17 1676
本列主要实现vue使用echarts实现：动态数据+时间坐标轴 的折线图 一、使用npm安装添加在package.json文件中的依赖 package.json文件的依赖 "dependencies": { "vue": "^2.5.2",   "vue-resource": "^1.3.4", "vue-router": "^3.
vue中表格和折线图联动
最新发布
05-30
要实现表格和折线图的联动，可以使用Vue.js和Echarts库结合实现。 首先在Vue中使用Echarts，可以通过引入Echarts库和在Vue组件中创建Echarts实例来实现。然后，在表格中选中某一行数据时，可以通过绑定事件来触发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值