表单组件化
This commit is contained in:
parent
a1b3533204
commit
73523009fb
|
|
@ -0,0 +1,244 @@
|
||||||
|
<template >
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
||||||
|
<a-radio-button value="year">
|
||||||
|
按年份
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="month">
|
||||||
|
按月份
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="day">
|
||||||
|
按本月
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="week">
|
||||||
|
按本周
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="day7">
|
||||||
|
最近7天
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="day30">
|
||||||
|
最近30天
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<p v-if='interval' style="margin: 0 10px;">(数据每 {{interval}} 分钟刷新一次)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :id="id" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
||||||
|
<div class="loading-box" v-else style="width: 95%;height: 500px;margin: 20px auto 0;display: flex;align-items: center;justify-content: center;">
|
||||||
|
<a-icon type="loading" spin style="font-size: 50px;color: #122ed1;margin-left: 10px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
// import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
// 从父组件中获取数据，id是echarts专属id，同个页面需要传不同id，actions是请求数据的接口，type是图表类型 bar条形图 line折线图，title是图表标题
|
||||||
|
export default {
|
||||||
|
name: 'MyStatistics',
|
||||||
|
props: {
|
||||||
|
id:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
actions:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
type:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
title:{
|
||||||
|
type:String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShowCustomChart: false,
|
||||||
|
interval:null,
|
||||||
|
options:{
|
||||||
|
year:{
|
||||||
|
cycle: 'year',
|
||||||
|
span: 0,
|
||||||
|
recently:false,
|
||||||
|
},
|
||||||
|
month:{
|
||||||
|
cycle:'month',
|
||||||
|
span: 0,
|
||||||
|
recently:false,
|
||||||
|
},
|
||||||
|
day:{
|
||||||
|
cycle: 'day',
|
||||||
|
span: 0,
|
||||||
|
recently:false,
|
||||||
|
},
|
||||||
|
week:{
|
||||||
|
cycle: 'week',
|
||||||
|
span: 0,
|
||||||
|
recently:false,
|
||||||
|
},
|
||||||
|
day7:{
|
||||||
|
cycle: 'day',
|
||||||
|
span: 7,
|
||||||
|
recently:true,
|
||||||
|
},
|
||||||
|
day30:{
|
||||||
|
cycle: 'day',
|
||||||
|
span: 30,
|
||||||
|
recently:true,
|
||||||
|
},
|
||||||
|
//搜索区
|
||||||
|
searchFormData: {
|
||||||
|
cycle: 'day',
|
||||||
|
span: 7,
|
||||||
|
recently:true,
|
||||||
|
},
|
||||||
|
searchFormItems: [
|
||||||
|
{field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称',
|
||||||
|
options:[
|
||||||
|
{label: '按日', value: 'day'},
|
||||||
|
{label: '按周', value: 'week'},
|
||||||
|
{label: '按月', value:'month'},
|
||||||
|
]
|
||||||
|
}}},
|
||||||
|
{field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
|
||||||
|
{field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
|
||||||
|
{label: '是', value: true},
|
||||||
|
{label: '否', value: false}
|
||||||
|
]
|
||||||
|
}},
|
||||||
|
{
|
||||||
|
align: 'right', span: 4, itemRender: {
|
||||||
|
name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
|
||||||
|
{props: {type: 'reset', content: '重置'}}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.createChart('month')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//选中日期后，创建图表
|
||||||
|
onSearch(e) {
|
||||||
|
this.isShowCustomChart = false;
|
||||||
|
this.createChart(e.target.value);
|
||||||
|
},
|
||||||
|
createChart(name){
|
||||||
|
let searchData = this.options[name];
|
||||||
|
if(this.type == 'bar'){
|
||||||
|
this.$mk.post({
|
||||||
|
url: this.actions,
|
||||||
|
data: searchData
|
||||||
|
}).then(res => {
|
||||||
|
this.isShowCustomChart = true;
|
||||||
|
this.interval = res.data.interval;
|
||||||
|
setTimeout(() => {
|
||||||
|
let myChart = echarts.init(document.getElementById(this.id));
|
||||||
|
let option = {
|
||||||
|
title:{
|
||||||
|
text:this.title,
|
||||||
|
left: 'left',
|
||||||
|
textStyle:{
|
||||||
|
fontSize: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name:res.data.label[0],
|
||||||
|
type: 'category',
|
||||||
|
data:res.data.items?res.data.items.map(item => item.name):[],
|
||||||
|
left: '0',
|
||||||
|
top: '60',
|
||||||
|
orient: 'vertical',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 15,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name:res.data.label[1],
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data:res.data.items?res.data.items.map(item => item.data[0]):[],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30px' // 设置为类目宽度的50%
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip:{
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myChart.setOption(option)
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}else if(this.type == 'line'){
|
||||||
|
this.$mk.post({
|
||||||
|
url: this.actions,
|
||||||
|
data: searchData
|
||||||
|
}).then(res => {
|
||||||
|
this.isShowCustomChart = true;
|
||||||
|
this.interval = res.data.interval;
|
||||||
|
setTimeout(() => {
|
||||||
|
let myChart = echarts.init(document.getElementById(this.id));
|
||||||
|
let option = {
|
||||||
|
title:{
|
||||||
|
text: this.title,
|
||||||
|
left: 'left',
|
||||||
|
textStyle:{
|
||||||
|
fontSize: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data:res.data.items?res.data.items.map(item => item.name):[],
|
||||||
|
left: '0',
|
||||||
|
top: '60',
|
||||||
|
orient: 'vertical',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 15,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: res.data.label
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series:res.data.items? res.data.items.map((item) => {
|
||||||
|
return {
|
||||||
|
name:item.name,
|
||||||
|
data: item.data,
|
||||||
|
type: 'line',
|
||||||
|
}
|
||||||
|
}, ):{},
|
||||||
|
tooltip:{
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
myChart.setOption(option)
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -3,62 +3,16 @@
|
||||||
<a-tabs default-active-key="1" size="large">
|
<a-tabs default-active-key="1" size="large">
|
||||||
<a-tab-pane key="1" tab="客户" :forceRender="true">
|
<a-tab-pane key="1" tab="客户" :forceRender="true">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<!-- 搜索区 -->
|
<myStatistics id="mychart1" :actions="actions.CustomBalance" :type="'bar'" title='客户结余统计'></myStatistics>
|
||||||
<!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
|
<myStatistics id="mychart2" :actions="actions.CustomNumber" :type="'line'" title='客户交易次数统计'></myStatistics>
|
||||||
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
<myStatistics id="mychart3" :actions="actions.CustomTon" :type="'line'" title='客户交易吨数统计'></myStatistics>
|
||||||
<a-radio-button value="year">
|
|
||||||
按年份
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="month">
|
|
||||||
按月份
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day">
|
|
||||||
按本月
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="week">
|
|
||||||
按本周
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day7">
|
|
||||||
最近7天
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day30">
|
|
||||||
最近30天
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
<!-- <h3>客户结余统计</h3> -->
|
|
||||||
<div id="myChart" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
<div id="myChart2" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
<div id="myChart3" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="供应商" :forceRender="true">
|
<a-tab-pane key="2" tab="供应商" :forceRender="true">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<!-- 搜索区 -->
|
<myStatistics id="mychart4" :actions="actions.SupplierBalance" :type="'bar'" title='供应商结余统计'></myStatistics>
|
||||||
<!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
|
<myStatistics id="mychart5" :actions="actions.SupplierNumber" :type="'line'" title='供应商交易次数统计'></myStatistics>
|
||||||
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch1">
|
<myStatistics id="mychart6" :actions="actions.SupplierTon" :type="'line'" title='供应商交易吨数统计'></myStatistics>
|
||||||
<a-radio-button value="year">
|
|
||||||
按年份
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="month">
|
|
||||||
按月份
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day">
|
|
||||||
按本月
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="week">
|
|
||||||
按本周
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day7">
|
|
||||||
最近7天
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="day30">
|
|
||||||
最近30天
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
<!-- <h3>客户结余统计</h3> -->
|
|
||||||
<div id="myChart4" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
<div id="myChart5" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
<div id="myChart6" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
|
|
@ -66,13 +20,14 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
export default {
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShowCustomChart:false,
|
|
||||||
isShowCustomChart1:false,
|
|
||||||
actions:{
|
actions:{
|
||||||
CustomBalance: `${BASE_URL.BASE_URL}/Custom/v1/Custom/balance`, // 客户结余统计
|
CustomBalance: `${BASE_URL.BASE_URL}/Custom/v1/Custom/balance`, // 客户结余统计
|
||||||
CustomNumber: `${BASE_URL.BASE_URL}/Custom/v1/Custom/number`, // 客户交易次数统计
|
CustomNumber: `${BASE_URL.BASE_URL}/Custom/v1/Custom/number`, // 客户交易次数统计
|
||||||
|
|
@ -82,332 +37,10 @@ export default {
|
||||||
SupplierNumber: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/number`, // 供应商交易次数统计
|
SupplierNumber: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/number`, // 供应商交易次数统计
|
||||||
SupplierTon: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/ton`, // 供应商交易吨数统计
|
SupplierTon: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/ton`, // 供应商交易吨数统计
|
||||||
},
|
},
|
||||||
options:{
|
|
||||||
year:{
|
|
||||||
cycle: 'year',
|
|
||||||
span: 0,
|
|
||||||
recently:false,
|
|
||||||
},
|
|
||||||
month:{
|
|
||||||
cycle:'month',
|
|
||||||
span: 0,
|
|
||||||
recently:false,
|
|
||||||
},
|
|
||||||
day:{
|
|
||||||
cycle: 'day',
|
|
||||||
span: 0,
|
|
||||||
recently:false,
|
|
||||||
},
|
|
||||||
week:{
|
|
||||||
cycle: 'week',
|
|
||||||
span: 0,
|
|
||||||
recently:false,
|
|
||||||
},
|
|
||||||
day7:{
|
|
||||||
cycle: 'day',
|
|
||||||
span: 7,
|
|
||||||
recently:true,
|
|
||||||
},
|
|
||||||
day30:{
|
|
||||||
cycle: 'day',
|
|
||||||
span: 30,
|
|
||||||
recently:true,
|
|
||||||
},
|
|
||||||
//搜索区
|
|
||||||
searchFormData: {
|
|
||||||
cycle: 'day',
|
|
||||||
span: 7,
|
|
||||||
recently:true,
|
|
||||||
},
|
|
||||||
searchFormItems: [
|
|
||||||
{field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称',
|
|
||||||
options:[
|
|
||||||
{label: '按日', value: 'day'},
|
|
||||||
{label: '按周', value: 'week'},
|
|
||||||
{label: '按月', value:'month'},
|
|
||||||
]
|
|
||||||
}}},
|
|
||||||
{field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
|
|
||||||
{field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
|
|
||||||
{label: '是', value: true},
|
|
||||||
{label: '否', value: false}
|
|
||||||
]
|
|
||||||
}},
|
|
||||||
{
|
|
||||||
align: 'right', span: 4, itemRender: {
|
|
||||||
name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
|
|
||||||
{props: {type: 'reset', content: '重置'}}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.createChart('month');
|
|
||||||
this.createChart1('month');
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
createChart(name){
|
|
||||||
this.isShowCustomChart = true;
|
|
||||||
let searchData = this.options[name];
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.CustomBalance,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
console.log(res)
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '客户结余统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
name:res.data.label[0],
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.items.map(item => item.name)
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name:res.data.label[1],
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data:res.data.items?res.data.items.map(item => item.data[0]):[],
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '30px' // 设置为类目宽度的50%
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.CustomNumber,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart2'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '客户交易次数统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.label
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series:res.data.items? res.data.items.map((item) => {
|
|
||||||
return {
|
|
||||||
name:item.name,
|
|
||||||
data: item.data,
|
|
||||||
type: 'line',
|
|
||||||
}
|
|
||||||
}, ):{},
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.CustomTon,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart3'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '客户交易吨数统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.label
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series:res.data.items?res.data.items.map((item) => {
|
|
||||||
return {
|
|
||||||
name:item.name,
|
|
||||||
data: item.data,
|
|
||||||
type: 'line',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
):{},
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
createChart1(name){
|
|
||||||
this.isShowCustomChart1 = true;
|
|
||||||
let searchData = this.options[name];
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.SupplierBalance,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
console.log(res)
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart4'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '供应商结余统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
name:res.data.label[0],
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.items.map(item => item.name)
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name:res.data.label[1],
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data:res.data.items?res.data.items.map(item => item.data[0]):[],
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '30px' // 设置为类目宽度的50%
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.SupplierNumber,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart5'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '供应商交易次数统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.label
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series:res.data.items? res.data.items.map((item) => {
|
|
||||||
return {
|
|
||||||
name:item.name,
|
|
||||||
data: item.data,
|
|
||||||
type: 'line',
|
|
||||||
}
|
|
||||||
}, ):{},
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
this.$mk.post({
|
|
||||||
url: this.actions.SupplierTon,
|
|
||||||
data: searchData
|
|
||||||
}).then(res => {
|
|
||||||
let myChart = echarts.init(document.getElementById('myChart6'));
|
|
||||||
let option = {
|
|
||||||
title:{
|
|
||||||
text: '供应商交易吨数统计',
|
|
||||||
left: 'left',
|
|
||||||
textStyle:{
|
|
||||||
fontSize: 20,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: res.data.label
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series:res.data.items?res.data.items.map((item) => {
|
|
||||||
return {
|
|
||||||
name:item.name,
|
|
||||||
data: item.data,
|
|
||||||
type: 'line',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
):{},
|
|
||||||
tooltip:{
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
myChart.setOption(option)
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
onSearch(e) {
|
|
||||||
this.isShowCustomChart = false;
|
|
||||||
this.createChart(e.target.value);
|
|
||||||
},
|
|
||||||
onSearch1(e) {
|
|
||||||
this.isShowCustomChart1 = false;
|
|
||||||
this.createChart1(e.target.value);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue