vue 使用echarts
需要echarts 相关插件 ：<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
html相关代码：
<!--仪表板展示-->
<section class="col-md-12" style="margin-top: 60px;">
<el-col :span="18">
<section class="col-md-6" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span>本年目标客户数 - 分销一组</span>
</el-col>
<el-col :span="24" style="padding-left:20px;">
<el-col :span="10" style="margin-top: 30px;">
<el-col :span="24">
<el-col :span="24">目标值</el-col>
<el-col :span="24" class="fxinfo">{{dashboardStatis.dashboard1.target}}</el-col>
</el-col>
<el-col :span="24">
<el-col :span="24">已完成</el-col>
<el-col :span="24" class="fxinfo" style="color: #8e74f1;">{{dashboardStatis.dashboard1.accomplish}}</el-col>
</el-col>
</el-col>
<el-col :span="14">
<div id="mychart1" class="echare1" style="border:none;height:333px;"></div>
</el-col>
</el-col>
</el-col>
</section>
<section class="col-md-6" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span>本年目标销售额 - 分销一组</span>
</el-col>
<el-col :span="24" style="padding-left:20px;">
<el-col :span="10" style="margin-top: 30px;">
<el-col :span="24">
<el-col :span="24">目标值</el-col>
<el-col :span="24" class="fxinfo">{{dashboardStatis.dashboard2.target}}</el-col>
</el-col>
<el-col :span="24">
<el-col :span="24">已完成</el-col>
<el-col :span="24" class="fxinfo" style="color: #8e74f1;">{{dashboardStatis.dashboard2.accomplish}}</el-col>
</el-col>
</el-col>
<el-col :span="14">
<div id="fxdashboard2" class="echare1" style="border:none;height:333px;"></div>
</el-col>
</el-col>
</el-col>
</section>
</el-col>
<el-col :span="6">
<section class="col-md-12" style="padding:0 5px;">
<el-col class="echare1">
<el-col :span="24" class="fxtital" style="margin-bottom: 10px;">
<span>今日工作提醒</span>
</el-col>
<el-card class="box-card" style="background: #8e75f1;margin-top:10px;">
<div class="text item" style="color:#fff;">
<el-col :span="24" class="cardtitle">你今日跟进记录</el-col>
<el-col :span="24" style="margin-bottom:20px;">
<el-col :span="16" class="cardlist">{{dashboardStatis.statistics.record?dashboardStatis.statistics.record:0}}条</el-col>
<el-col :span="8" style="margin-top: 9px;">
<a v-bind:href="[followurl]" class="carda">查看详情</a>
</el-col>
</el-col>
</div>
</el-card>
<el-card class="box-card" style="background: #67c23a;">
<div class="text item" style="color:#fff;">
<el-col :span="24" class="cardtitle">你今日新增客户</el-col>
<el-col :span="24" style="margin-bottom:20px;">
<el-col :span="16" class="cardlist">{{dashboardStatis.statistics.client?dashboardStatis.statistics.client:0}}个</el-col>
<el-col :span="8" style="margin-top: 9px;">
<a v-bind:href="[enterpriseurl]" class="carda">查看详情</a>
</el-col>
</el-col>
</div>
</el-card>
<el-card class="box-card" style="background: #f17575;">
<div class="text item" style="color:#fff;">
<el-col :span="24" class="cardtitle">你今日回访计划</el-col>
<el-col :span="24" style="margin-bottom:20px;">
<el-col :span="16" class="cardlist">{{dashboardStatis.statistics.visit?dashboardStatis.statistics.visit:0}}个</el-col>
<el-col :span="8" style="margin-top: 9px;">
<a v-bind:href="[returnVisit]" class="carda">查看详情</a>
</el-col>
</el-col>
</div>
</el-card>
</el-col>
</section>
</el-col>
</section>
<!--销售数据分析-->
<section class="col-md-12" style="margin-top: 20px;">
<el-col :span="24" style="border:1px solid #eee;padding-bottom: 10px;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">销售数据分析</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm" style="float:right;margin-right:40px;height: 35px;color:#fff;">
<el-form-item label="品牌：" prop="typeId">
<el-select v-model="select.brand" placeholder="请选择" clearable @change="changebrand">
<el-option v-for="item in crmbrand" :label="item.typename" :value="item.typename" style="width:120px;"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-col :span="24" class="shape">我的月销售额{{select.fxmonth}}月</el-col>
<el-col :span="24" style="margin-top:15px;">
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;">{{section.month.target?section.month.target:'0'}}万</el-col>
<el-col :span="24" class="carddetail">月目标销售额</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #d48164;">{{section.month.accomplish?section.month.accomplish:'0'}}万</el-col>
<el-col :span="24" class="carddetail">月完成销售额</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #8e74f1;">{{section.month.finishingRate?section.month.finishingRate:'0%'}}</el-col>
<el-col :span="24" class="carddetail">完成率</el-col>
</div>
</el-card>
</el-col>
</el-col>
</el-col>
<el-col :span="12">
<el-col :span="24" class="shape">我的年销售额{{select.fxyear}}年</el-col>
<el-col :span="24" style="margin-top:15px;">
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;">{{section.year.target?section.year.target:'0'}}万</el-col>
<el-col :span="24" class="carddetail">年目标销售额</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #d48164;">{{section.year.accomplish?section.year.accomplish:'0'}}万</el-col>
<el-col :span="24" class="carddetail">年完成销售额</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #8e74f1;">{{section.year.finishingRate?section.year.finishingRate:'0%'}}</el-col>
<el-col :span="24" class="carddetail">完成率</el-col>
</div>
</el-card>
</el-col>
</el-col>
</el-col>
</el-col>
</el-col>
</section>
<!--销售趋势分析-->
<section class="col-md-12" style="margin-top: 20px;">
<el-col class="col-md-6" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;padding-bottom: 20px;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">销售趋势分析</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择时间" clearable prop="typeId" style="float:right;">
<el-date-picker v-model="sale.saledata1" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
<el-date-picker v-model="sale.saledata2" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24" style="margin-top:15px;">
<div id="mychartsale" class="echare1" style="border:none;"></div>
</el-col>
</el-col>
</el-col>
</section>
<!--客户数据分析-->
<section class="col-md-12" style="margin-top: 20px;">
<el-col class="col-md-6" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;padding-bottom: 10px;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">客户数据分析</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="筛选时间：" prop="typeId">
<el-date-picker v-model="cusdatafx.time" type="month" placeholder="选择月" @change="changecilent" style="width:120px">
</el-date-picker>
</el-form-item>
</el-form>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="筛选条件：" prop="typeId">
<el-select v-model="cusdatafx.conditions" placeholder="请选择" clearable @change="changecilent">
<el-option v-for="item in crmbrand" :label="item.typename" :value="item.typename" style="width:120px"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="筛选类别：" prop="typeId">
<el-select v-model="cusdatafx.type" placeholder="请选择" clearable @change="changecilent">
<el-option v-for="item in crmbrand" :label="item.typename" :value="item.typename" style="width:120px"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-col :span="24" class="shape">自己</el-col>
<el-col :span="24" style="margin-top:15px;">
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;line-height: 90px;">{{clienData.my.cumulative?clienData.my.cumulative:0}}</el-col>
<el-col :span="24" class="carddetail">累计客户数</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #d48164;line-height: 90px;">{{clienData.my.followclient?clienData.my.followclient:0}}</el-col>
<el-col :span="24" class="carddetail">跟进客户数</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;line-height: 90px;">{{clienData.my.clienttotal?clienData.my.clienttotal:0}}</el-col>
<el-col :span="24" class="carddetail">跟进次数</el-col>
</div>
</el-card>
</el-col>
</el-col>
</el-col>
<el-col :span="12">
<el-col :span="24" class="shape">分销一组</el-col>
<el-col :span="24" style="margin-top:15px;">
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;line-height: 90px;">{{clienData.group.cumulative?clienData.group.cumulative:0}}</el-col>
<el-col :span="24" class="carddetail">累计客户数</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #d48164;line-height: 90px;">{{clienData.group.followclient?clienData.group.followclient:0}}</el-col>
<el-col :span="24" class="carddetail">跟进客户数</el-col>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card cardmonth" style="height:250px;">
<div class="text item">
<el-col :span="24" class="cardlist" style="color: #409eff;line-height: 90px;">{{clienData.group.clienttotal?clienData.group.clienttotal:0}}</el-col>
<el-col :span="24" class="carddetail">跟进次数</el-col>
</div>
</el-card>
</el-col>
</el-col>
</el-col>
</el-col>
</el-col>
</section>
<!--客户趋势分析-->
<section class="col-md-12" style="margin-top: 20px;">
<el-col class="col-md-6" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">客户趋势分析</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择时间" clearable prop="typeId" style="float:right;">
<el-date-picker v-model="clientTime.saledata1" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
<el-date-picker v-model="clientTime.saledata2" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
</el-form-item>
</el-form>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择组：" prop="typeId">
<el-select v-model="clientTime.group" placeholder="请选择" clearable @change="changeSale">
<el-option v-for="item in crmbrand" :label="item.typename" :value="item.typename" style="width:120px"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24" style="margin-top:15px;">
<div id="mychartcustomer" class="echare1" style="border:none;"></div>
</el-col>
</el-col>
</el-col>
</section>
<!--品牌合作机会分析-->
<section class="col-md-12" style="margin-top: 20px;">
<section class="col-md-7" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">品牌合作机会分析</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择时间" clearable prop="typeId" style="float:right;">
<el-date-picker v-model="brandTime.saledata1" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
<el-date-picker v-model="brandTime.saledata2" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24" style="padding:0;">
<div id="mychartbrand" class="echare1" style="border:none;height:329px;"></div>
</el-col>
</el-col>
</section>
<section class="col-md-5" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">销售漏斗</span>
<el-form :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择时间" clearable prop="typeId" style="float:right;">
<el-date-picker v-model="funneltime.time" type="month" clearable @change="changeSale" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:120px;">
</el-date-picker>
</el-form-item>
</el-form>
</el-col>
<section class="col-md-12" style="padding:0 5px;">
<div id="main1" class="echare1" style="border:none;height:329px;"></div>
</section>
</el-col>
</section>
</section>
<!--潜在品牌合作机会-->
<section class="col-md-12" style="margin-top: 20px;margin-bottom: 50px;">
<section class="col-md-12" style="padding:0 5px;">
<el-col :span="24" style="border:1px solid #eee;">
<el-col :span="24" class="fxtital">
<span style="padding-left:30px;color:#fff;">品牌合作机会分析</span>
</el-col>
<el-col :span="24" style="padding:15px 0 15px 0;">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="品牌机会名称">
<template scope="scope">
<a v-bind:href="[brandurl]" style="color: #008cee;cursor: pointer;" @click="handleEdit('brand',scope.row.brand_name)">{{scope.row.brand_name}}</span>
</template>
</el-table-column>
<el-table-column label="客户名称">
<template scope="scope">
<a v-bind:href="[enterurl]" style="color: #008cee;cursor: pointer;" @click="handleEdit('customer',scope.row.customer_name)">{{scope.row.customer_name}}</span>
</template>
</el-table-column>
<el-table-column prop="sales_stage" label="销售阶段"></el-table-column>
<el-table-column prop="estimated_amount" label="预计金额"></el-table-column>
<el-table-column prop="last_follow_up_date" :formatter="dateFormat" label="最后跟进时间"></el-table-column>
</el-table>
</el-col>
</el-col>
</section>
</section>
js相关代码：
methods:{
//获取当前页面的url路径
vueUrl :function(){
var url = location.href.split('/rhmcrm')[0];
if(url == "http://test.runhemei.com/maochao_test"){
url = "http://test.runhemei.com/maochao";
this.https = url;
return url;
}else{
this.https = url;
return url;
}
},
//调整页面路径以及参数添加
gourl : function(){
//获取当前日期
var data = this.time(1); //1表示年月日,2表数年月,3表数选择时间段年月
this.followurl = '../follow/follow.html?time='+data;
this.enterpriseurl = '../enterprise/enterprise.html?time='+data;
var fxtime = this.time(4);
this.select.fxmonth = fxtime;//分销月
var timesingle = this.time(2);
this.cusdatafx.time = timesingle; //客户数据分析时间默认
this.funneltime.time = timesingle; //销售漏斗时间默认
var period = this.time(3);
this.sale.saledata1 = period; //销售开始时间
this.sale.saledata2 = timesingle; //销售截止时间
this.brandTime.saledata1 = period; //品牌机会开始时间
this.brandTime.saledata2 = timesingle; //品牌机会截止时间
this.clientTime.saledata1 = period; //客户趋势开始时间
this.clientTime.saledata2 = timesingle; //客户趋势截止时间
var fxyeartime = this.time(5);
this.select.fxyear = fxyeartime;//分销月
this.timout(); //去掉加载
},
//获取当前日期
time : function(date) {
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
month = month<10?'0'+month:month;
//获取当前日
var day=myDate.getDate();
day=day<10?'0'+day:day;
if(date == 1){
return year+'-'+month+'-'+day;
}else if(date == 2){
return year+'-'+month;
}else if(date == 3){
var o = new Date(myDate.getTime()-180*24*60*60*1000);
var oyear = o.getFullYear();
var omonth = o.getMonth()+1;
omonth = omonth<10?'0'+omonth:omonth;
return oyear+'-'+omonth;
}else if(date == 4){
return '-'+month;
}else if(date == 5){
return '-'+year;
}
},
/**
* 请求仪表盘1、仪表盘2、工作统计的数据
* 请求后台接口进行对对象赋值
*/
dashboard : function(){
this.dashboardStatis.dashboard1 = {"target":500+'个',"accomplish":400+'个',"finishingRate":80};
this.dashboardStatis.dashboard2 = {"target":200+'万',"accomplish":154.65+'万',"finishingRate":77.3};
this.dashboardStatis.statistics = {"record":10,"client":5,"visit":''};
this.fxdashboard1();
this.fxdashboard2();
},
//分销仪表盘展示
fxdashboard1 : function(){
var myChart1= echarts.init(document.getElementById('mychart1'));
// 指定图表的配置项和数据
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
radius: '80%',
type:'gauge',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.09, 'lime'],
[0.82, '#1e90ff'],
[1, '#ff4500']
],
width: 3,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#000',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 15,
fontStyle: 'italic',
color: '#000',
shadowColor: '#000', //默认透明
shadowBlur: 10
}
},
detail : {formatter:'{value}%'},
data:[{value: this.dashboardStatis.dashboard1.finishingRate, name: '完成率'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
window.addEventListener("resize",function(){
myChart1.resize();
});
},
//分销仪表盘展示
fxdashboard2 : function(){
var fxdashboard2 = echarts.init(document.getElementById('fxdashboard2'));
// 指定图表的配置项和数据
optionshboard2 = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
radius: '80%',
type:'gauge',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.09, 'lime'],
[0.82, '#1e90ff'],
[1, '#ff4500']
],
width: 3,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#000',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 15,
fontStyle: 'italic',
color: '#000',
shadowColor: '#000', //默认透明
shadowBlur: 10
}
},
detail : {formatter:'{value}%'},
data:[{value: this.dashboardStatis.dashboard2.finishingRate, name: '完成率'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
fxdashboard2.setOption(optionshboard2);
window.addEventListener("resize",function(){
fxdashboard2.resize();
});
},
/**
* 监听品牌
* 请求后台接口进行对对象赋值
*/
changebrand:function(){
console.log("品牌数据");
this.departmentSale();
},
//本月部门销售数据分析
departmentSale : function(){
this.section.month.target = '100';
this.section.month.accomplish = '126';
this.section.month.finishingRate = '80%';
this.section.year.target = '100';
this.section.year.accomplish = '126';
this.section.year.finishingRate = '80%';
},
/**
* 销售趋势分析监听
* 请求后台接口数据
*/
changeSale:function(){
if(this.sale.saledata1!='' && this.sale.saledata2!=''){
console.log('时间监听');
}
this.saleAnalysis.amount = ['目标销售额','完成销售额','完成率'];
this.saleAnalysis.month = ['4月','5月','6月','7月','8月','9月','10月'];
this.saleAnalysis.series = [
{
name:'完成率',
type:'line',
stack: '总量',
yAxisIndex: 1,
data:[10,25,60,46,78,52,66],
itemStyle: {
normal: {
label: {
show: true,
positiong: 'top',
formatter: '{c}%'
}
}
}
},{
name:'目标销售额',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
},
{
name:'完成销售额',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
];
this.fxtrend();
},
//销售趋势分析折线图
fxtrend:function(){
var mychartsale= echarts.init(document.getElementById('mychartsale'));
// 指定图表的配置项和数据
option = {
tooltip : {
trigger: 'axis'
},
legend: {
y : 'bottom',
data:this.saleAnalysis.amount
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : this.saleAnalysis.month
}
],
yAxis : [
{
name: '金额',
type : 'value',
scale:true,
},{
name: '完成率',
type: 'value',
scale:true,
min: 0,
max: 100, // 计算最大值
interval: Math.ceil(100 / 5), // 平均分为5份
axisLabel: {
show: true,
formatter: '{value} %'
}
}
],
series : this.saleAnalysis.series
};
// 使用刚指定的配置项和数据显示图表。
mychartsale.setOption(option);
window.addEventListener("resize",function(){
mychartsale.resize();
});
},
//客户数据分析监听
changecilent : function(){
console.log('客户数据分析监听');
},
//客户数据分析
clienttrand : function(){
this.clienData.my.cumulative = 8;
this.clienData.my.followclient = 5;
this.clienData.my.clienttotal = 12;
this.clienData.group.cumulative = 58;
this.clienData.group.followclient = 35;
this.clienData.group.clienttotal = 42;
},
/**
* 客户趋势分析请求接口数据整合
* 请求后台接口
*/
custrend:function () {
this.custrand.detail = ['累计客户数','跟进客户数','跟进次数'];
this.custrand.time = ['2018-4','2018-5','2018-6','2018-7','2018-8','2018-9','2018-10'];
this.custrand.series = [
{
name:'累计客户数',
type:'line',
stack: '总量',
data:[10,25,60,46,78,52,66],
},
{
name:'跟进客户数',
type:'line',
stack: '总量',
data:[15, 10, 20, 30, 12, 13, 32]
},
{
name:'跟进次数',
type:'line',
stack: '总量',
data:[8, 9, 9, 9, 15, 13, 13]
}
];
this.customertrend();
},
//客户趋势分析
customertrend:function(){
var mychartcustomer= echarts.init(document.getElementById('mychartcustomer'));
// 指定图表的配置项和数据
option = {
tooltip : {
trigger: 'axis'
},
legend: {
y : 'bottom',
data:this.custrand.detail
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : this.custrand.time
}
],
yAxis : [
{
name: '数量',
type : 'value',
scale:true,
}
],
series : this.custrand.series
};
// 使用刚指定的配置项和数据显示图表。
mychartcustomer.setOption(option);
window.addEventListener("resize",function(){
mychartcustomer.resize();
});
},
/**
* 品牌合作机会分析
* 请求后台数据
*/
brandTrand : function(){
this.brantrand.detail = ['无意向','客户开发','意向客户','重点客户','筛选品牌','确认合作品牌','达成合作'];
this.brantrand.time = ['2018-4','2018-5','2018-6','2018-7','2018-8','2018-9','2018-10'];
this.brantrand.series = [
{
name:'无意向',
type:'line',
stack: '总量',
data:[10,25,60,46,78,52,66],
},{
name:'客户开发',
type:'line',
stack: '总量',
data:[1, 13, 5, 20, 40, 65, 15],
},
{
name:'意向客户',
type:'line',
stack: '总量',
data:[220, 18, 19, 23, 29, 33, 31]
},
{
name:'重点客户',
type:'line',
stack: '总量',
data:[32, 33, 30, 33, 39, 33, 32]
},
{
name:'筛选品牌',
type:'line',
stack: '总量',
data:[82, 93, 90, 93, 129, 133, 132]
},
{
name:'确认合作品牌',
type:'line',
stack: '总量',
data:[15, 10, 20, 30, 12, 13, 32]
},
{
name:'达成合作',
type:'line',
stack: '总量',
data:[8, 9, 9, 9, 15, 13, 13]
}
];
this.brandteamwork();
},
//品牌合作机会分析
brandteamwork : function(){
var mychartbrand= echarts.init(document.getElementById('mychartbrand'));
// 指定图表的配置项和数据
option = {
tooltip : {
trigger: 'axis'
},
legend: {
y : 'bottom',
data:this.brantrand.detail
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : this.brantrand.time
}
],
yAxis : [
{
name: '数量',
type : 'value',
scale:true,
}
],
series : this.brantrand.series
};
// 使用刚指定的配置项和数据显示图表。
mychartbrand.setOption(option);
window.addEventListener("resize",function(){
mychartbrand.resize();
});
},
/**
* 漏斗图展示
* 后台请求销售漏斗的数据
*/
funnelTrand : function(){
this.funnelld.detail = ['发现需求','确认需求','解决方案','商务谈判','招投标','赢单'];
this.funnelld.series = [
{value: 100, name: '发现需求'},
{value: 80, name: '确认需求'},
{value: 60, name: '解决方案'},
{value: 50, name: '商务谈判'},
{value: 40, name: '招投标'},
{value: 20, name: '赢单'}
];
this.funnel();
},
//漏斗展示
funnel : function(){
var myChart = echarts.init(document.getElementById('main1'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
y : 'bottom',
data: this.funnelld.detail
},
calculable: true,
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: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data: this.funnelld.series
}
]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
},
//表单数据
getData:function(url){
//请求页面表单数据
let para = {
pageSize: 10,
DESC : 'DESC'
};
this.$http.post(url,para,{emulateJSON: true}).then((res) => { //.then() 返回成功的数据
this.tableData = res.data.data.result;
this.pageSize = res.data.data.pageSize;
this.total = res.data.data.totalCount;
setTimeout(() => {
this.loading = false;
}, 2000);
})
.catch(function(res) {
console.log(res)
})
},
//日期格式转换
dateFormat:function(row, column) {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date.time).format("YYYY-MM-DD");
},
//表单页面跳转，获取点击的参数
handleEdit : function(name,data){
if(name == 'brand'){
this.brandurl = '../brand/brand.html?brand='+data;
}else{
this.enterurl = '../enterprise/enterprise.html?name='+data;
}
},
timout : function(){
setTimeout(() => {
this.loading = false;
}, 1500);
}
}页面展示：