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.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}
{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>