CRM项目前端使用Echarts制作线索统计饼状图------CRM项目

最新推荐文章于 2024-05-09 11:32:07 发布

旧约Alatus

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量1k

点赞数 28

分类专栏： CRM项目前端 # VUE框架文章标签：前端 javascript vue.js vue 前端框架 ajax elementui

本文链接：https://blog.csdn.net/2201_75960169/article/details/136512599

版权

前端同时被 3 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

CRM项目

142 篇文章 0 订阅

订阅专栏

<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.successTranAmount">
            <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: 48%; height:350px; margin:10px; float: left;"></div>
    
    <div id="sourcePieChart" style="width: 48%; height:350px; margin:10px; float: left;"></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();
        this.loadSourcePieChart();
    },
    data(){
        return {
            summaryData : {}
        }
    },
    methods : {
        loadSummary(){
            doGet("/api/summary/data",{}).then(resp => {
                if(resp.data.code === 200){
                    this.summaryData = resp.data.data;
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        },
        loadSourcePieChart(){
            // 查询数据先
            doGet("/api/summary/sourcePie",{}).then(resp => {
                if(resp.data.code === 200){
                    let sourcePieData = resp.data.data;
                    // 获取了绑定用的Dom
                    var chartDom = document.getElementById('sourcePieChart');
                    // 使用组件对dom进行初始化
                    var myChart = echarts.init(chartDom);
                    // 配置可选项
                    let option = {
                        title: {
                            text: '线索来源统计',
                            left: 'center',
                            top: 'bottom'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        // 图例
                        legend: {
                            orient: 'horizontal',
                            left: 'center'
                        },
                        // 系列
                        series: [
                            {
                                name: '线索来源统计',
                                type: 'pie',
                                // 图的半径
                                radius: '60%',
                                data: sourcePieData,
                                emphasis: {
                                    itemStyle: {
                                        // 图形阴影模糊大小
                                        shadowBlur: 10,
                                        // 阴影水平方向上的偏移距离
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 把配置好的可选项设置到我们的图表中
                    option && myChart.setOption(option);
                }
                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: '销售漏斗图',
                            left: 'center',
                            top: 'bottom'
                        },
                        // 提示框组件
                        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.successTranAmount">

<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: 48%; height:350px; margin:10px; float: left;"></div>



<div id="sourcePieChart" style="width: 48%; height:350px; margin:10px; float: left;"></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();

this.loadSourcePieChart();

},

data(){

return {

summaryData : {}

}

},

methods : {

loadSummary(){

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

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

this.summaryData = resp.data.data;

}

else{

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

}

});

},

loadSourcePieChart(){

// 查询数据先

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

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

let sourcePieData = resp.data.data;

// 获取了绑定用的Dom

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

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

var myChart = echarts.init(chartDom);

// 配置可选项

let option = {

title: {

text: '线索来源统计',

left: 'center',

top: 'bottom'

},

tooltip: {

trigger: 'item'

},

// 图例

legend: {

orient: 'horizontal',

left: 'center'

},

// 系列

series: [

{

name: '线索来源统计',

type: 'pie',

// 图的半径

radius: '60%',

data: sourcePieData,

emphasis: {

itemStyle: {

// 图形阴影模糊大小

shadowBlur: 10,

// 阴影水平方向上的偏移距离

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

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

option && myChart.setOption(option);

}

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: '销售漏斗图',

left: 'center',

top: 'bottom'

},

// 提示框组件

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>