CRM项目前端使用echarts图表实现数量页面效果显示------CRM项目

<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside :width="isShowed ? '3.4%' : '17%'">
        <div class="menuTitle" @click="dashBoard()">{{ isShowed ? "" : title }}</div>
        <!-- 菜单 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#334157"
        class="el-menu-vertical-demo"
        :default-active="currentRouterPath"
        style="border-right: solid 0px;"
        :unique-opened="true"
        text-color="#fff"
        :collapse="isShowed"
        :collapse-transition="false"
        :router="true"
      >
      <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">
          <template #title>
            <el-icon><***ponent :is="menuPermission.icon"></***ponent></el-icon>
            <span> {{menuPermission.name}} </span>
          </template>
          <el-menu-item v-for="(subPermission) in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">
            <el-icon><***ponent :is="subPermission.icon"></***ponent></el-icon>
            {{subPermission.name}}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      </el-aside>
      <el-container class="rightContent">
        <!-- 右侧上 -->
        <el-header>
          <!-- 折叠 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>
          <!-- 打开 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>
          <!-- 用户信息的下拉菜单 -->
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的资料</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <!-- 右侧中 -->
        <el-main v-if="isRouterAlive">
          <router-view></router-view>
        </el-main>
        <!-- 右侧下 -->
        <el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer>
      </el-container>
    </el-container>
</template>

<script>
import { doGet } from "../http/httpRequest.js";
import { messageTip, removeToken, messageConfirm, later } from "../util/util.js";
export default {
    name : "dashboard",
    mounted(){
      // 挂载时获取用户名
      this.loadLoginName();
      this.loadCurrentRouter();
    },
    // 提供者生产者
    provide(){
      return {
        // 提供了一个函数,要求必须是箭头函数
        reload: () => {
          this.isRouterAlive = false;
          //提供一个函数 (页面局部刷新函数)
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
        }
      }
    },
    methods : {
      loadLoginName(){
        // 获取用户名
        doGet("/api/login/info",{}).then((resp) => {
          this.user = resp.data.data;
        });
      },
      dashBoard(){
        this.$router.push("/dashboard/");
      },
      // 左侧菜单左右展开与折叠
      showMenu(){
        // 取反即可
        this.isShowed = !this.isShowed;
      },
      loadCurrentRouter(){
        let arr = this.$route.path.split("/");
        this.currentRouterPath = "/"+arr[1]+"/"+arr[2];
      },
      // 退出登录
      logOut(){
        // 一样没有参数值,直接给个空的大括号就好
        doGet("/api/logOut",{}).then(resp => {
          if(resp.data.code === 200){
            messageTip('退出成功,即将返回首页',"su***ess");
            // 退出成功
            removeToken();
            later("/");
          }
          else{
            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {
              messageTip('退出成功,即将返回首页',"su***ess");
              // 后端不起作用,我们就把前端这里存的删了先
              removeToken();
              later("/");
            }).catch(() => {
              messageTip("已取消强制退出","warning");
            });
          }
        });
      }
    },
    data(){
      return {
        isShowed : false,
        // 登录的用户对象
        user : {},
        title : "@CRM管理系统",
        // 控制右侧子路由内容是否显示
        isRouterAlive : true,
        // 激活页面
        currentRouterPath : ''
      }
    }
}
</script>

<style scoped>
.el-dropdown{
  float: right;
  line-height: 225%;
}
.el-aside{
    background-color: black;
}
.menuTitle{
    color: white;
    text-align: center;
    height: 5%;
    line-height: 225%;
}
.el-header{
    background-color: azure;
    height: 5%;
    line-height: 225%;
}
.el-footer{
    background-color: aliceblue;
    height: 5%;
    line-height: 225%;
    text-align: center;
}
.rightContent{
    /* 高度设置为计算高度,屏幕高度的100% */
    height: calc(100vh);
}
.show{
  /* 聚焦事件 */
  cursor: pointer;
}
.el-icon {
  font-size: 1em;
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside :width="isShowed ? '3.4%' : '17%'">

        <div class="menuTitle" @click="dashBoard()">{{ isShowed ? "" : title }}</div>

        <!-- 菜单 -->

        <el-menu

        active-text-color="#ffd04b"

        background-color="#334157"

        class="el-menu-vertical-demo"

        :default-active="currentRouterPath"

        style="border-right: solid 0px;"

        :unique-opened="true"

        text-color="#fff"

        :collapse="isShowed"

        :collapse-transition="false"

        :router="true"

      >

      <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">

          <template #title>

            <el-icon><***ponent :is="menuPermission.icon"></***ponent></el-icon>

            <span> {{menuPermission.name}} </span>

          </template>

          <el-menu-item v-for="(subPermission) in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">

            <el-icon><***ponent :is="subPermission.icon"></***ponent></el-icon>

            {{subPermission.name}}

          </el-menu-item>

        </el-sub-menu>

      </el-menu>

      </el-aside>

      <el-container class="rightContent">

        <!-- 右侧上 -->

        <el-header>

          <!-- 折叠 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>

          <!-- 打开 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>

          <!-- 用户信息的下拉菜单 -->

          <el-dropdown :hide-on-click="false">

            <span class="el-dropdown-link">

              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>

            </span>

            <template #dropdown>

              <el-dropdown-menu>

                <el-dropdown-item>我的资料</el-dropdown-item>

                <el-dropdown-item>修改密码</el-dropdown-item>

                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>

              </el-dropdown-menu>

            </template>

          </el-dropdown>

        </el-header>

        <!-- 右侧中 -->

        <el-main v-if="isRouterAlive">

          <router-view></router-view>

        </el-main>

        <!-- 右侧下 -->

        <el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer>

      </el-container>

    </el-container>

</template>

<script>

import { doGet } from "../http/httpRequest.js";

import { messageTip, removeToken, messageConfirm, later } from "../util/util.js";

export default {

    name : "dashboard",

    mounted(){

      // 挂载时获取用户名

      this.loadLoginName();

      this.loadCurrentRouter();

    },

    // 提供者生产者

    provide(){

      return {

        // 提供了一个函数,要求必须是箭头函数

        reload: () => {

          this.isRouterAlive = false;

          //提供一个函数 (页面局部刷新函数)

          this.$nextTick(function(){

            this.isRouterAlive = true;

          })

        }

      }

    },

    methods : {

      loadLoginName(){

        // 获取用户名

        doGet("/api/login/info",{}).then((resp) => {

          this.user = resp.data.data;

        });

      },

      dashBoard(){

        this.$router.push("/dashboard/");

      },

      // 左侧菜单左右展开与折叠

      showMenu(){

        // 取反即可

        this.isShowed = !this.isShowed;

      },

      loadCurrentRouter(){

        let arr = this.$route.path.split("/");

        this.currentRouterPath = "/"+arr[1]+"/"+arr[2];

      },

      // 退出登录

      logOut(){

        // 一样没有参数值,直接给个空的大括号就好

        doGet("/api/logOut",{}).then(resp => {

          if(resp.data.code === 200){

            messageTip('退出成功,即将返回首页',"su***ess");

            // 退出成功

            removeToken();

            later("/");

          }

          else{

            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {

              messageTip('退出成功,即将返回首页',"su***ess");

              // 后端不起作用,我们就把前端这里存的删了先

              removeToken();

              later("/");

            }).catch(() => {

              messageTip("已取消强制退出","warning");

            });

          }

        });

      }

    },

    data(){

      return {

        isShowed : false,

        // 登录的用户对象

        user : {},

        title : "@CRM管理系统",

        // 控制右侧子路由内容是否显示

        isRouterAlive : true,

        // 激活页面

        currentRouterPath : ''

      }

    }

}

</script>

<style scoped>

.el-dropdown{

  float: right;

  line-height: 225%;

}

.el-aside{

    background-color: black;

}

.menuTitle{

    color: white;

    text-align: center;

    height: 5%;

    line-height: 225%;

}

.el-header{

    background-color: azure;

    height: 5%;

    line-height: 225%;

}

.el-footer{

    background-color: aliceblue;

    height: 5%;

    line-height: 225%;

    text-align: center;

}

.rightContent{

    /* 高度设置为计算高度,屏幕高度的100% */

    height: calc(100vh);

}

.show{

  /* 聚焦事件 */

  cursor: pointer;

}

.el-icon {

  font-size: 1em;

}

</style>

<template>
    <!-- 概览统计 -->
    <el-row>
        <el-col :span="6">
        <el-statistic :value="summaryData.effectiveActivityCount">
            <template #title>
            <div style="display: inline-flex; align-items: center">
                市场活动
            </div>
            </template>
            <template #suffix>/{{ summaryData.totalActivityCount }}</template>
        </el-statistic>
        </el-col>
        <el-col :span="6">
        <el-statistic title="线索总数" :value="summaryData.totalClueCount" />
        </el-col>
        <el-col :span="6">
        <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />
        </el-col>
        <el-col :span="6">
        <el-statistic :value="summaryData.su***essTranAmount">
            <template #title>
            <div style="display: inline-flex; align-items: center">
                交易总额
            </div>
            </template>
            <template #suffix>/{{ summaryData.totalTranAmount }}</template>
        </el-statistic>
        </el-col>
    </el-row>
    <!-- 销售漏斗图 -->
    <div id="saleFunnelChart" style="width: 600px;height:400px;">

    </div>
</template>

<script>
import { doGet } from '../http/httpRequest';
import { messageTip } from '../util/util';
import * as echarts from 'echarts';
export default {
    name : "StatisticView",
    mounted(){
        this.loadSummary();
        this.loadSaleFunnel();
    },
    data(){
        return {
            summaryData : {}
        }
    },
    methods : {
        loadSummary(){
            doGet("/api/summary/data",{}).then(resp => {
                if(resp.data.code === 200){
                    this.summaryData = resp.data.data;
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        },
        loadSaleFunnel(){
            // 先查询数据
            doGet("/api/summary/SaleFunnel",{}).then(resp => {
                if(resp.data.code === 200){
                    let saleFunnelData = resp.data.data;
                    // 获取了绑定用的Dom
                    var chartDom = document.getElementById('saleFunnelChart');
                    // 使用组件对dom进行初始化
                    var myChart = echarts.init(chartDom);
                    // 配置可选项
                    var option = {
                        title: {
                            // 主标题文本,支持换行
                            text: '销售漏斗图'
                        },
                        // 提示框组件
                        tooltip: {
                            // 鼠标放上去触发
                            trigger: 'item',
                            // 提示框浮层内容格式化器
                            formatter: '{a} <br/>{b} : {c}'
                        },
                        // 配置工具栏
                        toolbox: {
                            feature: {
                                // 是否不可编辑
                                dataView: { readOnly: true },
                                // 配置项还原
                                restore: {},
                                // 保存为图片
                                saveAsImage: {}
                            }
                        },
                        // 图例组件
                        legend: {
                            data: ['线索', '客户', '交易', '成交']
                        },
                        // 系列
                        series: [
                            {
                                // 系列名称
                                name: '销售漏斗数据统计',
                                // 我们的图表类型
                                type: 'funnel',
                                // 左侧距离
                                left: '10%',
                                // 上侧距离
                                top: 60,
                                // 下侧距离
                                bottom: 60,
                                width: '80%',
                                min: 0,
                                max: 100,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                    fontSize: 20
                                    }
                                },
                                // 数据源(数据内容)
                                // data: [
                                //     { value: 20, name: '成交' },
                                //     { value: 60, name: '交易' },
                                //     { value: 80, name: '客户' },
                                //     { value: 100, name: '线索' }
                                // ]
                                data : saleFunnelData
                            }
                        ]
                    };
                    // 把配置好的可选项设置到我们的图表中
                    option && myChart.setOption(option);
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        }
    }
}
</script>

<style scoped>
.el-row{
    text-align: center;
}
</style>

<template>

    <!-- 概览统计 -->

    <el-row>

        <el-col :span="6">

        <el-statistic :value="summaryData.effectiveActivityCount">

            <template #title>

            <div style="display: inline-flex; align-items: center">

                市场活动

            </div>

            </template>

            <template #suffix>/{{ summaryData.totalActivityCount }}</template>

        </el-statistic>

        </el-col>

        <el-col :span="6">

        <el-statistic title="线索总数" :value="summaryData.totalClueCount" />

        </el-col>

        <el-col :span="6">

        <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />

        </el-col>

        <el-col :span="6">

        <el-statistic :value="summaryData.su***essTranAmount">

            <template #title>

            <div style="display: inline-flex; align-items: center">

                交易总额

            </div>

            </template>

            <template #suffix>/{{ summaryData.totalTranAmount }}</template>

        </el-statistic>

        </el-col>

    </el-row>

    <!-- 销售漏斗图 -->

    <div id="saleFunnelChart" style="width: 600px;height:400px;">

    </div>

</template>

<script>

import { doGet } from '../http/httpRequest';

import { messageTip } from '../util/util';

import * as echarts from 'echarts';

export default {

    name : "StatisticView",

    mounted(){

        this.loadSummary();

        this.loadSaleFunnel();

    },

    data(){

        return {

            summaryData : {}

        }

    },

    methods : {

        loadSummary(){

            doGet("/api/summary/data",{}).then(resp => {

                if(resp.data.code === 200){

                    this.summaryData = resp.data.data;

                }

                else{

                    messageTip("网络异常","error");

                }

            });

        },

        loadSaleFunnel(){

            // 先查询数据

            doGet("/api/summary/SaleFunnel",{}).then(resp => {

                if(resp.data.code === 200){

                    let saleFunnelData = resp.data.data;

                    // 获取了绑定用的Dom

                    var chartDom = document.getElementById('saleFunnelChart');

                    // 使用组件对dom进行初始化

                    var myChart = echarts.init(chartDom);

                    // 配置可选项

                    var option = {

                        title: {

                            // 主标题文本,支持换行

                            text: '销售漏斗图'

                        },

                        // 提示框组件

                        tooltip: {

                            // 鼠标放上去触发

                            trigger: 'item',

                            // 提示框浮层内容格式化器

                            formatter: '{a} <br/>{b} : {c}'

                        },

                        // 配置工具栏

                        toolbox: {

                            feature: {

                                // 是否不可编辑

                                dataView: { readOnly: true },

                                // 配置项还原

                                restore: {},

                                // 保存为图片

                                saveAsImage: {}

                            }

                        },

                        // 图例组件

                        legend: {

                            data: ['线索', '客户', '交易', '成交']

                        },

                        // 系列

                        series: [

                            {

                                // 系列名称

                                name: '销售漏斗数据统计',

                                // 我们的图表类型

                                type: 'funnel',

                                // 左侧距离

                                left: '10%',

                                // 上侧距离

                                top: 60,

                                // 下侧距离

                                bottom: 60,

                                width: '80%',

                                min: 0,

                                max: 100,

                                minSize: '0%',

                                maxSize: '100%',

                                sort: 'descending',

                                gap: 2,

                                label: {

                                    show: true,

                                    position: 'inside'

                                },

                                labelLine: {

                                    length: 10,

                                    lineStyle: {

                                    width: 1,

                                    type: 'solid'

                                    }

                                },

                                itemStyle: {

                                    borderColor: '#fff',

                                    borderWidth: 1

                                },

                                emphasis: {

                                    label: {

                                    fontSize: 20

                                    }

                                },

                                // 数据源(数据内容)

                                // data: [

                                //     { value: 20, name: '成交' },

                                //     { value: 60, name: '交易' },

                                //     { value: 80, name: '客户' },

                                //     { value: 100, name: '线索' }

                                // ]

                                data : saleFunnelData

                            }

                        ]

                    };

                    // 把配置好的可选项设置到我们的图表中

                    option && myChart.setOption(option);

                }

                else{

                    messageTip("网络异常","error");

                }

            });

        }

    }

}

</script>

<style scoped>

.el-row{

    text-align: center;

}

</style>