菜单 搜索
首页 前端知识 【前端】Vue Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图

【前端】Vue Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图

2024-03-24 22:03:32 前端知识 前端哥 452 462 我要收藏

文章目录

    • 目标
    • 代码
      • 数据改写为动态
      • Echarts引入与html结构
      • 折线图：orderData
      • 柱状图：userData
      • 饼状图：videoData
    • 总效果
    • 总代码:Home.vue

参考视频： VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

案例链接
【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16）https://blog.csdn.net/karshey/article/details/127640658
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19）https://blog.csdn.net/karshey/article/details/127652862
【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22）https://blog.csdn.net/karshey/article/details/127674643
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25）https://blog.csdn.net/karshey/article/details/127735159
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30）https://blog.csdn.net/karshey/article/details/127737979
【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35）https://blog.csdn.net/karshey/article/details/127756733
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38）https://blog.csdn.net/karshey/article/details/127787418
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42）https://blog.csdn.net/karshey/article/details/127777962
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44）https://blog.csdn.net/karshey/article/details/127795302
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46）https://blog.csdn.net/karshey/article/details/127849502
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48）https://blog.csdn.net/karshey/article/details/127865621
【前端】Vue+Element UI案例：通用后台管理系统-项目总结https://blog.csdn.net/karshey/article/details/127867638

上一篇：【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战

目标

在这里插入图片描述

  • 左边：把代码中写死的数据改成mock模拟的数据
  • 右边三个图：折线图，柱状图，饼状图

代码

数据改写为动态

上一篇中我们在mockData中有一个tableData，就是它了！
在这里插入图片描述

export default {
    data() {
        return {
            TableData:[],
            TableLabel,
            CountData
        }
    },
    mounted(){
        getData().then((data)=>{
            console.log(data);
            this.TableData=data.data.getStatisticalData.data.tableData
        })
    }
}

效果：
在这里插入图片描述

Echarts引入与html结构

文档：echarts文档

安装：

npm i echarts@5.1.2

引入：

import * as echarts from 'echarts'

html结构：

  • 三个图标都是卡片，所以都在el-card里
  • 用ref引入echarts图表，且里面一定要有height或width，否则不显示
  • 注意向左的间距
  • 柱状图和饼状图的横向排列：flex+space between
<!-- echarts图表 -->
<div style="margin-left:20px">
   <!-- 折线图 -->
   <el-card style="height:280px">
       <div ref="echarts1" style="height:280px"></div>
   </el-card>
   <div class="graph">
       <!-- 柱状图 -->
       <el-card style="height:260px">
           <div ref="echarts2" style="height:260px"></div>
       </el-card>
       <!-- 饼状图 -->
       <el-card style="height:260px">
           <div ref="echarts3" style="height:260px"></div>
       </el-card>
   </div>
</div>

css：

.graph {
    display: flex;
    // 两个靠边
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        width: 49%;
    }
}

效果：就是这样~
在这里插入图片描述

折线图：orderData

文档中模板的代码如下：虽然模板的代码是柱状图，而我们这里要做的事折线图，但我们可以通过模板来了解配置与其对应的效果。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

效果如下 ：
在这里插入图片描述
配置关系如下：具体可以看文档。
在这里插入图片描述
而series对应的是鼠标悬浮在柱上时的显示：
在这里插入图片描述

接下来写折线图。

观察一下数据：红框内的是x轴，也就是xAxis，series.name，1013这样的每一个数据都是series.data。
在这里插入图片描述

已经配置好的属性：

const order = {
    legend: {
        // 图例文字颜色
        textStyle: {
            color: "#333",
        },
    },
    grid: {
        left: "20%",
    },
    // 提示框
    tooltip: {
        trigger: "axis",
    },
    xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
            lineStyle: {
                color: "#17b3a3",
            },
        },
        axisLabel: {
            interval: 0,
            color: "#333",
        },
    },
    yAxis: [
        {
            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#17b3a3",
                },
            },
        },
    ],
    color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
    series: [],
}

export default order

我们这里必须配置（自己配置）的属性有：legend、xAxis、yAxis、series。

mounted() {
   getData().then((data) => {
       console.log(data);
       this.TableData = data.data.getStatisticalData.data.tableData

       // echarts图表

       // 折线图

       // 基于准备好的dom，初始化echarts实例
       const echarts1 = echarts.init(this.$refs.echarts1)
       var echarts1Option = {}
       // ES6解构语法
       var { orderData, userData, videoData } = data.data.getStatisticalData.data

       // 获取x轴:要求是一个对象
       const xAxis = Object.keys(orderData.data[0])
       const xAxisData = {
           data: xAxis
       }

       // 配置
       echarts1Option.legend = xAxisData
       echarts1Option.xAxis = xAxisData
       echarts1Option.yAxis = {}
       echarts1Option.series = []

       // 配置series
       xAxis.forEach(key => {
           echarts1Option.series.push({
               name: key,
               type: 'line',
               // key对应的orderData的所有值
               data: orderData.data.map(item => item[key])
           })
       })

       // 使用刚指定的配置项和数据显示图表。
       echarts1.setOption(echarts1Option);
   })
}

效果：
在这里插入图片描述

柱状图：userData

接下来的操作就很类似了。

基础代码：

// 柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
var echarts2Option = user
echarts2.setOption(echarts2Option);

已经配置好的属性：

const user = {
    legend: {
        // 图例文字颜色
        textStyle: {
            color: "#333",
        },
    },
    grid: {
        left: "20%",
    },
    // 提示框
    tooltip: {
        trigger: "axis",
    },
    xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
            lineStyle: {
                color: "#17b3a3",
            },
        },
        axisLabel: {
            interval: 0,
            color: "#333",
        },
    },
    yAxis: [
        {
            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#17b3a3",
                },
            },
        },
    ],
    color: ["#2ec7c9", "#b6a2de"],
    series: [],
}

export default user

user缺什么，我们这里就配置什么：xAxis.data、series.

显然xAxis.data是date的value：series会有两个，分别是new和active。
在这里插入图片描述

// 柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
var echarts2Option = user

// 配置
echarts2Option.xAxis.data = userData.map(item => item.date)
echarts2Option.series = [
    {
        name: '新增用户',
        data: userData.map(item => item.new),
        // 类型:bar是柱状图 
        type:'bar'
    }
    ,
    {
        name: '活跃用户',
        data: userData.map(item => item.active),
        type:'bar'
    }
]

echarts2.setOption(echarts2Option);

效果：
在这里插入图片描述

饼状图：videoData

配置：

const video = {
    tooltip: {
        trigger: "item",
    },
    color: [
        "#0f78f4",
        "#dd536b",
        "#9462e5",
        "#a6a6a6",
        "#e1bb22",
        "#39c362",
        "#3ed1cf",
    ],
    series: [],
}

export default video

我们只需要自己配series。

// 饼状图
const echarts3 = echarts.init(this.$refs.echarts3)
var echarts3Option = video
echarts3Option.series = {
    data: videoData,
    type: 'pie'
}
echarts3.setOption(echarts3Option);

效果：
在这里插入图片描述

总效果

在这里插入图片描述

总代码:Home.vue

本篇新建的文件和文件夹如红框所示，代码已放在文中。
有更改的问价如橙框所示，代码如下。
在这里插入图片描述

<template>
    <el-row>
        <el-col :span="8">
            <!-- user卡片 -->
            <el-card>
                <div class="user">
                    <img src="../assets/images/user.png" alt="">
                    <div class="userInfo">
                        <p div class="name">Admin</p>
                        <p div class="access">超级管理员</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>上次登录时间：<span>2021-7-19</span></p>
                    <p>上次登陆地点：<span>武汉</span></p>
                </div>
            </el-card>
            <!-- table卡片 -->
            <el-card style="margin-top: 20px;">
                <el-table :data="TableData" style="width: 100%">
                    <!-- 这里的val,key对应的是对象里的 -->
                    <el-table-column v-for="(value, key) in TableLabel" :prop="key" :label="value">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num">
                <el-card v-for="item in CountData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ backgroundColor: item.color }"></i>
                    <div class="details">
                        <p class="price">{{ priceFormate(item.value) }}</p>
                        <p class="desc">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <!-- echarts图表 -->
            <div style="margin-left:20px">
                <!-- 折线图 -->
                <el-card style="height:280px">
                    <div ref="echarts1" style="height:280px"></div>
                </el-card>
                <div class="graph">
                    <!-- 柱状图 -->
                    <el-card style="height:280px">
                        <div ref="echarts2" style="height:280px"></div>
                    </el-card>
                    <!-- 饼状图 -->
                    <el-card style="height:320px">
                        <div ref="echarts3" style="height:320px"></div>
                    </el-card>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import TableLabel from '../data/TableLabel'
import CountData from '../data/CountData'
import { getData } from '../api/index'
import * as echarts from 'echarts'

// echarts的配置数据
import order from '../data/echartsData/order'
import user from '../data/echartsData/user'
import video from '../data/echartsData/video'

export default {
    data() {
        return {
            TableData: [],
            TableLabel,
            CountData
        }
    },
    methods: {
        priceFormate(price) {
            return "￥" + price
        }
    },
    mounted() {
        getData().then((data) => {
            console.log(data);
            this.TableData = data.data.getStatisticalData.data.tableData

            // echarts图表

            // 折线图

            // 基于准备好的dom，初始化echarts实例
            const echarts1 = echarts.init(this.$refs.echarts1)
            var echarts1Option = order
            // ES6解构语法
            var { orderData, userData, videoData } = data.data.getStatisticalData.data

            // 获取x轴:要求是一个对象
            const xAxis = Object.keys(orderData.data[0])
            const xAxisData = {
                data: xAxis
            }

            // 配置
            echarts1Option.legend = xAxisData
            echarts1Option.xAxis = xAxisData
            echarts1Option.yAxis = {}
            echarts1Option.series = []

            // 配置series
            xAxis.forEach(key => {
                echarts1Option.series.push({
                    name: key,
                    type: 'line',
                    // key对应的orderData的所有值
                    data: orderData.data.map(item => item[key])
                })
            })

            // 使用刚指定的配置项和数据显示图表。
            echarts1.setOption(echarts1Option);

            // 柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            var echarts2Option = user

            // 配置
            echarts2Option.xAxis.data = userData.map(item => item.date)
            echarts2Option.series = [
                {
                    name: '新增用户',
                    data: userData.map(item => item.new),
                    // 类型:bar是柱状图 
                    type: 'bar'
                }
                ,
                {
                    name: '活跃用户',
                    data: userData.map(item => item.active),
                    type: 'bar'
                }
            ]

            echarts2.setOption(echarts2Option);

            // 饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            var echarts3Option = video
            echarts3Option.series = {
                data: videoData,
                type: 'pie'
            }
            echarts3.setOption(echarts3Option);
        })
    }
}
</script>

<style lang="less" scoped>
.user {
    // 垂直居中
    display: flex;
    align-items: center;

    // 外边距:分割线距离loginInfo的距离
    margin-bottom: 20px;
    // 内边距:分割线距离User的距离
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.loginInfo {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

.num {
    display: flex;
    // 要换行
    flex-wrap: wrap;
    // 从头到尾均匀排列
    justify-content: space-between;
    margin-left: 20px;

    .el-card {
        width: 32%;
        margin-bottom: 20px;

        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }

        .details {
            // 竖着排且居中
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-left: 15px;

            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}

.graph {
    display: flex;
    // 两个靠边
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        width: 49%;
    }
}
</style>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4090.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

CSS3渲染器CSS3DRenderer.js和CSS3模型

2024-04-15 21:04:28

transform-origin属性详解

2024-04-15 21:04:23

HTML5 CSS3实现小米商城 （完整版）

2024-04-15 21:04:07

Sass功能

2024-04-15 21:04:07

css flex布局 —— 项目属性 align-self

2024-04-15 21:04:00

Vue3后台管理系统（十三）全屏组件

2024-04-15 21:04:56

css改变图片颜色

2024-03-24 23:03:07

CSS样式：渐变色圆角边框

2024-04-15 21:04:44

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）

2024-04-15 21:04:20

在css3中如何添加圆角边框、盒子阴影以及文字阴影

2024-04-15 21:04:20

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！