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

<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: 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.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: 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>

转载请说明出处内容投诉
CSS教程_站长资源网 » CRM项目前端使用Echarts制作线索统计饼状图------CRM项目

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买