|
|
@@ -91,20 +91,10 @@
|
|
|
<el-row>
|
|
|
<el-col :span="8">
|
|
|
<TitleInfo :content="titleList[0]"></TitleInfo>
|
|
|
- <div ref="echartDom" style="height: 40vh"></div>
|
|
|
+ <div ref="echartDomOne" style="height: 40vh"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="16">
|
|
|
- <byTable
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="250"
|
|
|
- :source="sourceList.scatterData"
|
|
|
- :pagination="sourceList.scatterPagination"
|
|
|
- :config="scatterConfig"
|
|
|
- :loading="scatterLoading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
- </byTable>
|
|
|
+ <div ref="echartDomTwo" style="height: 40vh"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -113,7 +103,7 @@
|
|
|
<el-row>
|
|
|
<el-col :span="12" class="bck" v-loading="salesLoading">
|
|
|
<TitleInfo :content="titleList[1]"></TitleInfo>
|
|
|
- <div ref="echartDomOne" style="height: 30vh"></div>
|
|
|
+ <div ref="echartDomOne22" style="height: 30vh"></div>
|
|
|
<div style="margin-top: 10px">
|
|
|
<byTable
|
|
|
:hideSearch="true"
|
|
|
@@ -131,7 +121,7 @@
|
|
|
<el-col :span="12" style="padding-left: 10px">
|
|
|
<div class="bck" v-loading="salesmanSalesLoading">
|
|
|
<TitleInfo :content="titleList[2]"></TitleInfo>
|
|
|
- <div ref="echartDomTwo" style="height: 30vh"></div>
|
|
|
+ <!-- <div ref="echartDomTwo" style="height: 30vh"></div> -->
|
|
|
<div style="margin-top: 10px">
|
|
|
<byTable
|
|
|
:hideSearch="true"
|
|
|
@@ -256,7 +246,6 @@ const allData = reactive({
|
|
|
salesStatisticsData: {},
|
|
|
});
|
|
|
//图表
|
|
|
-const echartDom = ref(null);
|
|
|
const echartDomOne = ref(null);
|
|
|
const echartDomTwo = ref(null);
|
|
|
const echartDomThree = ref(null);
|
|
|
@@ -277,7 +266,7 @@ const optionOne = reactive({
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: 'Area Mode',
|
|
|
+ name: '111',
|
|
|
type: 'pie',
|
|
|
radius: [20, 140],
|
|
|
center: ['50%', '50%'],
|
|
|
@@ -300,57 +289,35 @@ const optionOne = reactive({
|
|
|
show: false,
|
|
|
},
|
|
|
data: [
|
|
|
- { value: 1048, name: "Search Engine" },
|
|
|
- { value: 735, name: "Direct" },
|
|
|
- { value: 580, name: "Email" },
|
|
|
- { value: 484, name: "Union Ads" },
|
|
|
- { value: 300, name: "Video Ads" },
|
|
|
+ { value: 1048, name: "中国" },
|
|
|
+ { value: 735, name: "美国" },
|
|
|
+ { value: 580, name: "韩国" },
|
|
|
+ { value: 484, name: "德国" },
|
|
|
+ { value: 300, name: "xxx" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
});
|
|
|
const optionTwo = reactive({
|
|
|
- data: {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- },
|
|
|
+ data:{
|
|
|
+ legend: {},
|
|
|
+ tooltip: {},
|
|
|
+ dataset: {
|
|
|
+ source: [
|
|
|
+ ['product', '订单量', '交易金额'],
|
|
|
+ ['Matcha Latte', 43.3, 85.8],
|
|
|
+ ['Milk Tea', 83.1, 73.4],
|
|
|
+ ['Cheese Cocoa', 86.4, 65.2],
|
|
|
+ ['Walnut Brownie', 72.4, 53.9]
|
|
|
+ ]
|
|
|
},
|
|
|
- grid: {
|
|
|
- left: "1%",
|
|
|
- right: "1%",
|
|
|
- bottom: "1%",
|
|
|
- top: "10%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "名称",
|
|
|
- type: "bar",
|
|
|
- barWidth: "25%",
|
|
|
- data: [10, 52, 200, 334, 390, 330, 220],
|
|
|
- itemStyle: {
|
|
|
- color: "#0084FF",
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
+ xAxis: { type: 'category' },
|
|
|
+ yAxis: {},
|
|
|
+ // Declare several bar series, each will be mapped
|
|
|
+ // to a column of dataset.source by default.
|
|
|
+ series: [{ type: 'bar' }, { type: 'bar' }]
|
|
|
+ }
|
|
|
});
|
|
|
const scatterConfig = computed(() => {
|
|
|
return [
|
|
|
@@ -513,59 +480,60 @@ const getData = () => {
|
|
|
// value: x.amount,
|
|
|
// name: x.countryName,
|
|
|
// }));
|
|
|
- myChart.setOption(optionOne.data);
|
|
|
+ myChartOne.setOption(optionOne.data);
|
|
|
setTimeout(() => {
|
|
|
scatterLoading.value = false;
|
|
|
}, 200);
|
|
|
- });
|
|
|
-
|
|
|
- proxy.post("/contract/customSalesStatistics", queryForm).then((res) => {
|
|
|
- sourceList.value.salesData = res;
|
|
|
- const option = { ...optionTwo };
|
|
|
- // option.data.xAxis[0].data = res.map((x) => x.corporationName);
|
|
|
- // option.data.series[0].data = res.map((x) => x.amount);
|
|
|
- // option.data.series[0].name = "销售额（￥）";
|
|
|
- myChartOne.setOption(option.data);
|
|
|
- setTimeout(() => {
|
|
|
- salesLoading.value = false;
|
|
|
- }, 200);
|
|
|
- });
|
|
|
-
|
|
|
- proxy.post("/contract/salesmanSalesStatistics", queryForm).then((res) => {
|
|
|
- sourceList.value.salesmanSalesData = res;
|
|
|
- const option = { ...optionTwo };
|
|
|
- option.data.xAxis[0].data = res.map((x) => x.userName);
|
|
|
- option.data.series[0].data = res.map((x) => x.amount);
|
|
|
- option.data.series[0].name = "销售额（￥）";
|
|
|
- myChartTwo.setOption(option.data);
|
|
|
+ myChartTwo.setOption(optionTwo.data);
|
|
|
setTimeout(() => {
|
|
|
salesmanSalesLoading.value = false;
|
|
|
}, 200);
|
|
|
});
|
|
|
|
|
|
- proxy.post("/contract/productSalesStatistics", queryForm).then((res) => {
|
|
|
- sourceList.value.productSalesVolumeData = res;
|
|
|
- const option = { ...optionTwo };
|
|
|
- option.data.xAxis[0].data = res.map((x) => x.productName);
|
|
|
- option.data.series[0].data = res.map((x) => x.amount);
|
|
|
- option.data.series[0].name = "销售额（￥）";
|
|
|
- myChartThree.setOption(option.data);
|
|
|
- setTimeout(() => {
|
|
|
- productSalesLoading.value = false;
|
|
|
- }, 200);
|
|
|
- });
|
|
|
+ // proxy.post("/contract/customSalesStatistics", queryForm).then((res) => {
|
|
|
+ // sourceList.value.salesData = res;
|
|
|
+ // const option = { ...optionTwo };
|
|
|
+ // // option.data.xAxis[0].data = res.map((x) => x.corporationName);
|
|
|
+ // // option.data.series[0].data = res.map((x) => x.amount);
|
|
|
+ // // option.data.series[0].name = "销售额（￥）";
|
|
|
+
|
|
|
+ // });
|
|
|
|
|
|
- proxy.post("/contract/salesVolumeStatistics", queryForm).then((res) => {
|
|
|
- sourceList.value.productSalesVolumeOneData = res;
|
|
|
- const option = { ...optionTwo };
|
|
|
- option.data.xAxis[0].data = res.map((x) => x.productName);
|
|
|
- option.data.series[0].data = res.map((x) => x.quantity);
|
|
|
- option.data.series[0].name = "销售量（个）";
|
|
|
- myChartFour.setOption(option.data);
|
|
|
- setTimeout(() => {
|
|
|
- productSalesOneLoading.value = false;
|
|
|
- }, 200);
|
|
|
- });
|
|
|
+ // proxy.post("/contract/salesmanSalesStatistics", queryForm).then((res) => {
|
|
|
+ // sourceList.value.salesmanSalesData = res;
|
|
|
+ // const option = { ...optionTwo };
|
|
|
+ // option.data.xAxis[0].data = res.map((x) => x.userName);
|
|
|
+ // option.data.series[0].data = res.map((x) => x.amount);
|
|
|
+ // option.data.series[0].name = "销售额（￥）";
|
|
|
+ // myChartTwo.setOption(option.data);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // salesmanSalesLoading.value = false;
|
|
|
+ // }, 200);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // proxy.post("/contract/productSalesStatistics", queryForm).then((res) => {
|
|
|
+ // sourceList.value.productSalesVolumeData = res;
|
|
|
+ // const option = { ...optionTwo };
|
|
|
+ // option.data.xAxis[0].data = res.map((x) => x.productName);
|
|
|
+ // option.data.series[0].data = res.map((x) => x.amount);
|
|
|
+ // option.data.series[0].name = "销售额（￥）";
|
|
|
+ // myChartThree.setOption(option.data);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // productSalesLoading.value = false;
|
|
|
+ // }, 200);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // proxy.post("/contract/salesVolumeStatistics", queryForm).then((res) => {
|
|
|
+ // sourceList.value.productSalesVolumeOneData = res;
|
|
|
+ // const option = { ...optionTwo };
|
|
|
+ // option.data.xAxis[0].data = res.map((x) => x.productName);
|
|
|
+ // option.data.series[0].data = res.map((x) => x.quantity);
|
|
|
+ // option.data.series[0].name = "销售量（个）";
|
|
|
+ // myChartFour.setOption(option.data);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // productSalesOneLoading.value = false;
|
|
|
+ // }, 200);
|
|
|
+ // });
|
|
|
};
|
|
|
|
|
|
const onQuery = () => {
|
|
|
@@ -585,10 +553,6 @@ const onReset = () => {
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- myChart = echarts.init(echartDom.value);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
// 客户分类柱状图
|
|
|
myChartOne = echarts.init(echartDomOne.value);
|
|
|
window.addEventListener("resize", () => {
|
cz