vue结合echarts柱状图,渲染

最新推荐文章于 2023-06-13 17:40:54 发布
最新推荐文章于 2023-06-13 17:40:54 发布
阅读量557 收藏
点赞数
分类专栏： js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43353869/article/details/109857602
版权 
<!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
        }
        #rrapp .main>div{
            float: left;
        }
    </style>
</head>
<body>
    <div id="rrapp">
        <div class="grid-btn">
<!--            查询-->
            <div class="form-group col-sm-2" style="margin-right: 10px; margin-left: 3%;">
                <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">
                <div class="input-bor" style="width: 225px;  line-height: 27px">
                    线路：
                    <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" style="margin-left: 20px">
                <a class="btn btn-warning" @click.stop="clearall" style="display: inline;">重置</a>
            </div>
        </div>

        <div class="main">
            <!--            表格-->
            <div class="layui-form-item" style="margin: 5% 0 2.5% 5%;">
                <table class="gridtable">
                    <tr align="center">
                        <th>时间（月）</th>
                        <th>地铁换乘线路人数（万人）</th>
                        <th>地铁公交换乘人数（万人）</th>
                    </tr>
                    <tr align="center" v-for="item in list" key="item.id">
                        <td>{{item.year}}年{{item.month}}月</td>
                        <td>{{item.transferMetroNum}}</td>
                        <td>{{item.transferBusNum}}</td>
                    </tr>
                </table>
            </div>

            <!--            echart图表-->
            <div style="width: 55%; height: 420px; padding: 20px 0 20px 20px">
                <div id="echartBar" style="width: 100%; height: 375px"></div>
            </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/hcfx.js"></script>

</body>
</html>


var vm = new Vue({
    el:'#rrapp',
    data:{
        dateYear: new Date().getFullYear(), // 年份查询
        lineNumber: 1, // 线路查询
        list: '', // 表格数据,
        // chartsList: '' // 图表数据
    },
    mounted() {
        this.initPage()

    },
    created() {
    },
    methods: {
        initPage() {
            this.chartData()
            this.getList()
        },

        // 月选择器
        datePick() {
            var _this = this
            laydate.render({
                elem: '#dateYear',
                type: 'year',
                trigger: 'click',
                done: function(value, date){
                    vm.dateYear = value
                    _this.getList()
                }
            })
        },

        // 获取首页数据
        getList() {
            var _this = this
            request('transfer/getList', {
                data: {
                    line : _this.lineNumber,
                    year: _this.dateYear
                },
                success: function(res) {
                    _this.list = res
                    _this.chartData (res)
                    // console.log('首页数据' ,_this.list,)
                }
            })
        },

        // 重置
        clearall() {
            vm.dateYear = new Date().getFullYear()
            vm.lineNumber = 1
            vm.getList()
        },

        // 路线查询
        lineNum () {
            vm.getList()
        },

        // 图表数据
        chartData (res) {
            console.log(res,"res11232322");
            var objChart = {
                xAxis: [],
                year: '',
                colors: ['#2296e7','#0c7d22'],
                legendName: ['轨网地铁换乘客流占比(%)','轨网公交换乘客流占比(%)'],
                data1: [], // 地铁换乘人数占比
                data2: [], // 公交换乘人数占比
            }
            res = res || []
            res.map(function (item) {
                objChart.xAxis.push(item.month + '月')
                objChart.year = item.year
                objChart.data1.push(parseFloat((item.transferMetroNum / (item.transferMetroNum + item.transferBusNum) * 100).toFixed(1)))
                objChart.data2.push(parseFloat((item.transferBusNum / (item.transferMetroNum + item.transferBusNum) * 100).toFixed(1)))

            })

            this.initChart('echartBar', objChart)
            // console.log(objChart.data1)
            // console.log(objChart.data2)
            // 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: '20%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: configs.xAxis,
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    min: 0, // 最小值
                    max: 100, // 最大值
                    show: true,
                    axisLabel:{
                        formatter:'{value} %'
                    },
                    splitLine: {
                        show: true
                        // lineStyle: { // 刻度线颜色
                        //     color: '#4c9bfd'
                        // }
                    },
                    axisLine: {
                        show: false // 去除轴线
                    },
                    axisTick: {
                        show: false //去除刻度线
                    },
                    type: 'value'
                },
                // series: {
                //     type: 'bar',
                //     name: configs.legendName,
                //     barWidth: 15,
                //     label: {
                //         show: true,
                //         position: 'top',
                //         fontWeight: 28,
                //         color: '#000000',
                //         formatter: '{c}'
                //     },
                //     data: configs.data
                // }
                series: [
                    {
                        type: 'bar',
                        barGap: '0%', // 清除个多个柱子之间的空隙
                        name: configs.legendName[0],
                        data: configs.data1
                    },
                    {
                        type: 'bar',
                        barGap: '0%',
                        name: configs.legendName[1],
                        data: configs.data2
                    },
                ]
            }
            var myChart = echarts.getInstanceByDom(document.getElementById(id));
            if (myChart === undefined) {
                myChart = echarts.init(document.getElementById(id));
            }else{
                myChart.clear(myChart)
            }
            myChart.setOption(option, true);
        }
    }
})
echarts实现柱状图不同颜色 && 柱状图横向纵向展示
天干地支甲
07-22 2355
```javascript series: [ { name: '', type: 'bar', // color:'#50cfe4', //data: [987342,524214,504344,325424,245324,242102] .
vue项目Echarts柱状图动态渲染效果
weixin_44537264的博客
07-16 1435
html写法: <template> <div> <section ref="barChart" style="width: 50%; height: 500px;"></section> <section ref="echartsRef" style="width: 50%; height: 500px;"></section> </div> </template> js部分： &lt
Vue + Echarts 图表展示 及 动态渲染
01-07
准备工作 安装echarts依赖 npm install echarts --save-dev 引入 (main.js) import echarts from &#39;echarts&#39; Vue.prototype.$echarts = echarts; 开始撸代码 出入人员总数{{peopleSumTotal}} export default { // 接受父组件传来的参数【父传子props】 props: [peopleSumTotal], data() { return { peopleSumTotalArr:
Vue动态渲染组件（动态渲染两个柱状图组件）（包含柱状图渐变）
随便写写
08-12 1844
Vue动态渲染组件（动态渲染两个柱状图组件）（包含柱状图渐变）
vue集成ECharts(保姆级教程)
程序员筱聪的博客
03-05 782
注意 ：这里的 lineBox中的 ‘line’ 必须和第四步中id 的 ‘line’一致 option必须和你的第三步中的option一致。第四步：定义echarts图表对应的dom元素（必须），在你的vue页面 下。第二部：npm安装，注意要在你vue工程的目录下，使用下列命令。第五步：在你的mounted()方法你添加下列代码。第一步：打开ECharts官网，选择你需要的图表。第三步：复制你选择的图表官方给出的对应代码。
vue+echarts实现柱状图、曲线图、饼状图等
最新发布
qq_36462217的博客
06-13 1277
vue，echarts,图表
vue结合Echarts实现点击高亮效果的示例
08-27
Echarts提供了多种图表类型，如折线图、柱状图、散点图等。每种图表类型都有其自己的配置项，可以根据需要进行配置。Echarts还提供了丰富的交互功能，如点击、hover、drag等，可以根据需要进行自定义。 2. 点击高亮...
vue使用echarts实现水平柱形图实例
11-19
本文将通过一个具体实例来介绍如何使用Vue框架结合Echarts实现一个水平柱形图。此实例包括三个主要部分：`testData.js`、`dtuDistributionCurve.js` 和 Vue 组件文件。 #### `testData.js` 文件 该文件主要负责...
vue：echarts多条柱状图数据的渲染
ScumStudy的博客
03-15 2350
<template> <div> <div id="myChart" style="width: 100%; height: calc(100vh - 300px)"></div> </div> </template> <script> const labelOption = { show: true, verticalAlign: "middle", formatter: "{a}", };
【JavaScript源代码】vue echarts实现横向柱状图.docx
12-29
在本文中，我们将深入探讨如何使用 Vue.js 和 ECharts 框架来实现一个横向柱状图。Vue.js 是一个轻量级的前端框架，它提供了组件化开发的便利性，而 ECharts 是一个功能丰富的数据可视化库，适用于创建各种图表。 ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
在vue中使用Echarts利用watch做动态数据渲染操作
10-15
主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts并列柱状图绘制、且动态渲染数据
新人一枚，互相学习哦！
03-15 586
echarts并列柱状图绘制、且动态渲染数据
vue + echarts 3d柱形图
Cherry
06-10 1848
vue + echarts 3d柱形图
Vue——ElementUI+Echarts将数据以柱形图展示
weixin_56039103的博客
08-05 5749
定义方法RenderEcharts(obj)，用于生成柱状图，参数obj指我们用于生成柱形图的数据//柱状图 RenderEcharts(obj) {// console.log('单位主协办情况');});title : {text : '单位主协办数量分析' , subtext : '' } , tooltip : {data : [ '主办' , '协办' ] } , toolbox : {...
vue获取后台数据生成echarts柱状图
新人一枚，互相学习哦！
03-21 558
根据后端返回数据，动态生成柱状图
vue x轴文字纵向显示 - echart图表
你好！刘斩仙
09-13 654
介绍： 实现 如图所示： 代码如下： <template> <div class="ml20 mr20 mb20 colorFOp"> <div class="head tc mb20 ">测试案例</div> <div ref="test" class="testChart"></div> </div> </template> <script> import * as
vue简单数据可视化---结合echarts实现柱状图
代码哈士奇的博客
11-13 6969
vue简单数据可视化---结合echarts实现柱状图下载axios和echarts包 首先搭建vue项目 不会或者忘记的小伙伴移步这里 Vue项目搭建 本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷 下载axios和echarts包 npm install axios --save npm install echarts --save 下载完成即可 新建页面 About 和Home文件为创建项目自带不用管 配置路由 import Vue from "vue"
vue中echarts的使用，包含饼图、折线图、竖形柱状图
lucky_yaya_chen的博客
01-20 564
UI图 代码实现： css样式，echart容器必须设置宽高 #bottomChart{ width: 100%; height: 34vh; } mounted() { this.nowDate = moment(new Date()).format('YYYY.MM.DD') this.nowTime = moment(new Date()).format('HH:mm:ss') //定义一套绿
SpringBoot结合Vue实现Echarts柱状图展示教程
- 使用Echarts与Vue结合展示柱状图，需要在Vue组件中引入Echarts，并在获取到后端传来的数据后，初始化Echarts图表实例，并配置相应的柱状图的参数和样式。 - 通过Vue的`v-data`等指令与Echarts提供的API进行交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值