diff --git a/supervise-report-ui/src/views/reportCenter/goodsOnWay.vue b/supervise-report-ui/src/views/reportCenter/goodsOnWay.vue index 0d252811..ac6057ec 100644 --- a/supervise-report-ui/src/views/reportCenter/goodsOnWay.vue +++ b/supervise-report-ui/src/views/reportCenter/goodsOnWay.vue @@ -254,11 +254,10 @@ if (resp.success) { console.log('1111', resp.data) const data = resp.data - _this.listGoodsOnWays = data.listGoodsOnWays - _this.listArrivedEarlyWarning = data.listArrivedEarlyWarning - _this.analysisChartData = data.analysisChartData - this.drawLine() - this.tableLoading = false + _this.listGoodsOnWays = data.listGoodsOnWays + _this.listArrivedEarlyWarning = data.listArrivedEarlyWarning + this.drawLine(data.analysisChartData) + this.tableLoading = false } else { // 根据resp.code进行异常情况处理 @@ -271,12 +270,48 @@ }) }, // 饼状图图初始化 - drawLine() { - // 基于准备好的dom，初始化echarts实例 - var myChart = echarts.init(document.getElementById('main')); - // 绘制图表 - console.log('option', this.analysisChartData) - myChart.setOption(this.analysisChartData); + drawLine(obj) { + // 基于准备好的dom，初始化echarts实例 + var myChart = echarts.init(document.getElementById('main')); + // 绘制图表 + console.log('option', obj) + myChart.setOption({ + legend: { + top: 'bottom' + }, + toolbox: { + show: true, + feature: { + mark: { + show: true + }, + // 数据图标 + dataView: { + show: false, + readOnly: false + }, + // 刷新图标 + restore: { + show: false + }, + // 下载图标 + saveAsImage: { + show: false + } + } + }, + series: [{ + name: 'Nightingale Chart', + type: 'pie', + radius: [30, 150], + center: ['50%', '50%'], + roseType: 'area', + itemStyle: { + borderRadius: 8 + }, + data: obj + }] + }) }, dosearch() { diff --git a/supervise-report-ui/src/views/reportCenter/salesReport.vue b/supervise-report-ui/src/views/reportCenter/salesReport.vue index dd4445a9..59fd4dd1 100644 --- a/supervise-report-ui/src/views/reportCenter/salesReport.vue +++ b/supervise-report-ui/src/views/reportCenter/salesReport.vue @@ -178,11 +178,12 @@ } ], queryParams: { - customerSid: '', + customerSid: '11', date: "", - type: '' // 类别key + type: "" // 类别key }, - nowDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), + + nowDate: this.getDate(), // 柱状图 option: { legend: {}, @@ -224,6 +225,13 @@ this.loadList() }, methods: { + getDate(){ + var tempDate = new Date() // 获取今天的日期 + tempDate.setDate(tempDate.getDate() - 1) // 今天的前N天的日期，N自定义 + var endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate() + console.log(endDate) + return endDate + }, // 搜索条件效果 clicksearchShow() { this.isSearchShow = !this.isSearchShow @@ -247,18 +255,17 @@ } }, loadList() { - console.log('2222222') this.tableLoading = true + let _this = this req.initData(_this.queryParams).then((resp) => { if (resp.success) { console.log('1111', resp.data) const data = resp.data - _this.dataList = data.financialData - _this.listSalesChannelData = data.listSalesChannelData - _this.financialAnalysisChartData = data.financialAnalysisChartData - _this.drawLine() - this.tableLoading = false + _this.dataList = data.financialData + _this.listSalesChannelData = data.listSalesChannelData + _this.drawLine(data.financialAnalysisChartData) + this.tableLoading = false } else { // 根据resp.code进行异常情况处理 _this.dataList = [] @@ -269,14 +276,33 @@ _this.tableLoading = false }) }, - // 柱状图初始化 - drawLine() { - // 基于准备好的dom，初始化echarts实例 - var myChart = echarts.init(document.getElementById('main')); - // 绘制图表 - console.log('option', this.financialAnalysisChartData) - myChart.setOption(this.financialAnalysisChartData); - }, + // 柱状图初始化 + drawLine(obj) { + // 基于准备好的dom，初始化echarts实例 + var myChart = echarts.init(document.getElementById('main')); + // 绘制图表 + console.log('option', obj) + myChart.setOption({ + legend: {}, + tooltip: {}, + dataset: { + // 提供一份数据。 + source: obj + }, + // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 + xAxis: { + type: 'category' + }, + // 声明一个 Y 轴，数值轴。 + yAxis: {}, + // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 + series: [{ + type: 'bar' + }, { + type: 'bar' + }] + }) + }, dosearch() { diff --git a/supervise-report-ui/src/views/reportCenter/thresholdAnalysis.vue b/supervise-report-ui/src/views/reportCenter/thresholdAnalysis.vue index 1150a7b0..483d8c1b 100644 --- a/supervise-report-ui/src/views/reportCenter/thresholdAnalysis.vue +++ b/supervise-report-ui/src/views/reportCenter/thresholdAnalysis.vue @@ -247,6 +247,123 @@ this.loadList() }, methods: { + initChart(obj) { + var _legend = [] + var _xdata = obj.date + var _series = obj.series + + var _ss = [] + for (var i in _series) { + let objNum = _series[i]; + let _key; + let _value; + Object.keys(objNum).forEach(key => { + _key = key; + _value = objNum[key]; + }) + + _legend.push( + _key + ) + + if (i == 6) + // 百分比 + _ss.push({ + name: _key, + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function(value) { + return value + ' %'; + } + }, + data: _value + }) + else + // 货值 + _ss.push({ + name: _key, + type: 'bar', + tooltip: { + valueFormatter: function(value) { + return value + ' 万元'; + } + }, + data: _value + }) + + } + + var myChart = echarts.init(document.getElementById('main')); + // 绘制图表 + myChart.setOption({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + toolbox: { + feature: { + dataView: { + // 数据视图 + show: false, + readOnly: false + }, + magicType: { + // 切换图形 + show: false, + type: ['line', 'bar'] + }, + // 还原 + restore: { + show: false + }, + // 下载 + saveAsImage: { + show: false + } + + } + }, + legend: { + data: _legend + }, + xAxis: [{ + type: 'category', + data: _xdata, + axisPointer: { + type: 'shadow' + } + }], + yAxis: [{ + type: 'value', + name: '人民币', + min: 0, + max: 10000, + interval: 1000, + axisLabel: { + formatter: '{value} 万元' + } + }, + { + type: 'value', + name: '百分比', + min: 0, + max: 100, + interval: 10, + axisLabel: { + formatter: '{value} %' + } + } + ], + series: _ss + }); + + }, // 搜索条件效果 clicksearchShow() { this.isSearchShow = !this.isSearchShow @@ -279,11 +396,8 @@ if (resp.success) { console.log('11111',resp.data) const data = resp.data - _this.queryParams.total = data.total - _this.thresholdAnalysisTable = data.thresholdAnalysisTable - _this.analysisChartData = data.analysisChartData - _this. drawLine() - _this.tableLoading = false + _this.tableLoading = false + this.initChart(resp.data) } else { // 根据resp.code进行异常情况处理 _this.thresholdAnalysisTable = []