285 lines
8.5 KiB
Vue
285 lines
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<el-radio v-model="salesVolume" label="1">销售额</el-radio>
|
|
<el-radio v-model="salesVolume" label="2">销售量</el-radio>
|
|
<el-select v-model="selectStateValue" style="width: 150px" size="small" multiple placeholder="选择省份" @change="getProductItemValue1">
|
|
<el-option
|
|
v-for="item in selectState"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-model="selectionTimeValue"
|
|
:picker-options="pickerOptions"
|
|
value-format="yyyy-MM"
|
|
type="monthrange"
|
|
align="right"
|
|
size="small"
|
|
style="width: 260px"
|
|
unlink-panels
|
|
range-separator="~"
|
|
start-placeholder="开始月份"
|
|
end-placeholder="结束月份"/>
|
|
<span style="margin-left: 50px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
|
<div id="myChart3" style="width: 1500px;height: 800px;text-align: center"/>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '本月',
|
|
onClick(picker) {
|
|
picker.$emit('pick', [new Date(), new Date()])
|
|
}
|
|
}, {
|
|
text: '今年至今',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date(new Date().getFullYear(), 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近六个月',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 6)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近一年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 12)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近两年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 24)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近三年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 36)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}]
|
|
},
|
|
salesVolume: '2',
|
|
TitlesDrawings: '',
|
|
yName: '',
|
|
salesVolume_check: 0,
|
|
selectStateValue: '',
|
|
selectStateValue_check: 0,
|
|
selectState: [],
|
|
legend: [],
|
|
saleData: [],
|
|
selectionTimeValue: '',
|
|
selectionTimeValue_check: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar',
|
|
'name',
|
|
'id'
|
|
])
|
|
},
|
|
watch: {
|
|
salesVolume() {
|
|
this.changeTitlesDrawings()
|
|
this.getProductItemValue1()
|
|
},
|
|
selectionTimeValue() {
|
|
this.getProductItemValue1()
|
|
}
|
|
},
|
|
created() {
|
|
this.changeTitlesDrawings()
|
|
this.getProvince()
|
|
},
|
|
methods: {
|
|
getProvince() {
|
|
var param = []
|
|
var Data = this.CreateData('11', '省份信息_查询数据', param)
|
|
this.ExecDatabase(Data).then(response => {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.selectState.push({
|
|
label: response.data[i].省份,
|
|
value: response.data[i].省份流水号
|
|
})
|
|
}
|
|
})
|
|
},
|
|
changeTitlesDrawings() {
|
|
if (this.salesVolume === '2') {
|
|
// 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
|
|
this.TitlesDrawings = '各省销售量趋势图'
|
|
this.yName = '销售量'
|
|
} else {
|
|
this.TitlesDrawings = '各省销售额趋势图'
|
|
this.yName = '销售额'
|
|
}
|
|
},
|
|
getProductItemValue1() {
|
|
if (this.selectionTimeValue) {
|
|
if (this.salesVolume === '2') {
|
|
this.salesVolume_check = 0
|
|
} else {
|
|
this.salesVolume_check = 1
|
|
}
|
|
console.log(this.selectStateValue, 2222)
|
|
if (this.selectStateValue && this.selectStateValue.length > 0) {
|
|
this.selectStateValue_check = 1
|
|
} else {
|
|
this.selectStateValue_check = 0
|
|
}
|
|
this.selectionTimeValue ? this.selectionTimeValue_check = 1 : (this.selectionTimeValue_check = 0, this.selectionTimeValue = '')
|
|
var param1 = []
|
|
param1[0] = ['省份_check', this.selectStateValue_check]
|
|
param1[1] = ['省份', this.selectStateValue]
|
|
param1[2] = ['开始时间', this.selectionTimeValue[0]]
|
|
param1[3] = ['结束时间', this.selectionTimeValue[1]]
|
|
var Data1 = this.CreateData('11', 'jy_区域销量分析_省份_查询', param1)
|
|
this.ExecDatabase(Data1).then(response => {
|
|
this.legend = []
|
|
if (response.data.length > 0) {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.legend.push(response.data[i].省份)
|
|
}
|
|
}
|
|
}).then(() => {
|
|
this.saleData = []
|
|
var param = []
|
|
param[0] = ['销售额_check', this.salesVolume_check]
|
|
param[1] = ['省份_check', this.selectStateValue_check]
|
|
param[2] = ['时间_check', this.selectionTimeValue_check]
|
|
param[3] = ['省份', this.selectStateValue]
|
|
param[4] = ['开始时间', this.selectionTimeValue[0]]
|
|
param[5] = ['结束时间', this.selectionTimeValue[1]]
|
|
var Data = this.CreateData('11', 'jy_区域销量分析_查询', param)
|
|
this.ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
for (let j = 0; j < this.legend.length; j++) {
|
|
this.xdata = []
|
|
this.ydata = []
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.xdata.push(response.data[i].签订日期月)
|
|
if (!this.downdate) {
|
|
this.downdate = 0
|
|
}
|
|
this.ydata.push(response.data[i][this.legend[j]])
|
|
}
|
|
var s_temp = {
|
|
name: this.legend[j],
|
|
type: 'line',
|
|
symbol: 'none',
|
|
markLine: {
|
|
// markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
|
|
lineStyle: {
|
|
normal: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
data: this.ydata
|
|
}
|
|
this.saleData.push(s_temp)
|
|
}
|
|
}
|
|
}).then(() => {
|
|
this.drawLine1()
|
|
})
|
|
})
|
|
} else {
|
|
this.$message.warning('请先选择日期')
|
|
}
|
|
},
|
|
drawLine1() {
|
|
this.myChart3 = echarts.init(document.getElementById('myChart3'))
|
|
// 绘制图表
|
|
this.myChart3.clear()
|
|
const _this = this
|
|
this.myChart3.setOption({
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: [{
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
formatter: function(value) {
|
|
return value.split(' ').join('\n')
|
|
}
|
|
},
|
|
name: '日期',
|
|
type: 'category',
|
|
data: this.xdata
|
|
}],
|
|
yAxis: [{
|
|
name: this.yName,
|
|
type: 'value',
|
|
max: function(value) {
|
|
return _this.update > value.max ? 1.2 * _this.update : 1.2 * value.max
|
|
// 这里写的是y轴的最大值为提取数据中最大值的1.2倍
|
|
}
|
|
}],
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
start: 0,
|
|
end: 100,
|
|
xAxisIndex: [0],
|
|
filterMode: 'none'
|
|
}, {
|
|
show: true,
|
|
type: 'slider',
|
|
top: '85%',
|
|
// orient: 'horizontal',
|
|
// backgroundColor: 'red',
|
|
// xAxisIndex: [0],
|
|
zoomLock: true,
|
|
start: 0,
|
|
end: 20
|
|
}],
|
|
series: this.saleData,
|
|
grid: {
|
|
left: '3%',
|
|
right: '6%',
|
|
bottom: '20%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: this.legend,
|
|
x: 'center',
|
|
y: 'bottom',
|
|
icon: 'roundRect',
|
|
itemHeight: 3,
|
|
itemWidth: 25
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|