<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>
CRM项目前端使用Echarts制作线索统计饼状图------CRM项目
