|
@@ -73,7 +73,6 @@
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain icon="el-icon-search" size="mini"
|
|
<el-button type="primary" plain icon="el-icon-search" size="mini"
|
|
@click="queryData">查询</el-button>
|
|
@click="queryData">查询</el-button>
|
|
- <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
<el-button type="primary" plain icon="el-icon-folder-opened" size="mini"
|
|
<el-button type="primary" plain icon="el-icon-folder-opened" size="mini"
|
|
@click="exportData">导出</el-button>
|
|
@click="exportData">导出</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -86,7 +85,7 @@
|
|
<ChooseItem ref="chooseItem" @receiveCheckedData="receiveCheckedData"></ChooseItem>
|
|
<ChooseItem ref="chooseItem" @receiveCheckedData="receiveCheckedData"></ChooseItem>
|
|
<!-- 统计图 -->
|
|
<!-- 统计图 -->
|
|
<div class="lineChartContant" v-on:mouseover="mouseOver()" v-on:mouseout="mouseOut()">
|
|
<div class="lineChartContant" v-on:mouseover="mouseOver()" v-on:mouseout="mouseOut()">
|
|
- <div id="lineChart" class="lineChart" />
|
|
|
|
|
|
+ <div ref="chart" class="lineChart" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -136,6 +135,8 @@ export default {
|
|
startTime: null,
|
|
startTime: null,
|
|
endTime: null
|
|
endTime: null
|
|
},
|
|
},
|
|
|
|
+ chooseStartTime: null,
|
|
|
|
+ chooseEndTime: null,
|
|
chartFormRules: {
|
|
chartFormRules: {
|
|
|
|
|
|
frequencyValue: [
|
|
frequencyValue: [
|
|
@@ -163,9 +164,8 @@ export default {
|
|
|
|
|
|
],
|
|
],
|
|
},
|
|
},
|
|
- chooseStartTime: null,
|
|
|
|
- chooseEndTime: null,
|
|
|
|
//charts
|
|
//charts
|
|
|
|
+ chart: null,
|
|
//背景颜色
|
|
//背景颜色
|
|
backgroundColor: '#394056',
|
|
backgroundColor: '#394056',
|
|
//统计图标题
|
|
//统计图标题
|
|
@@ -285,9 +285,8 @@ export default {
|
|
/** 查询数据 */
|
|
/** 查询数据 */
|
|
queryData() {
|
|
queryData() {
|
|
//每次查询的时候,将统计图初清空,定时器清空
|
|
//每次查询的时候,将统计图初清空,定时器清空
|
|
- clearInterval(this.timer)
|
|
|
|
- this.timer = null
|
|
|
|
- this.chart = null
|
|
|
|
|
|
+ this.stopTimer()
|
|
|
|
+ this.destroyChart()
|
|
if (this.chartForm.idList.length == 0) {
|
|
if (this.chartForm.idList.length == 0) {
|
|
this.$message({
|
|
this.$message({
|
|
message: '请选择数据项',
|
|
message: '请选择数据项',
|
|
@@ -343,14 +342,6 @@ export default {
|
|
this.initChart()
|
|
this.initChart()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- /** 重置 */
|
|
|
|
- resetQuery() {
|
|
|
|
- this.$refs['chartForm'].resetFields();
|
|
|
|
- this.state = false
|
|
|
|
- clearInterval(this.timer)
|
|
|
|
- this.timer = null
|
|
|
|
- this.chart = null
|
|
|
|
- },
|
|
|
|
/** 通过数据项id,开始结束时间获取相应的数据 */
|
|
/** 通过数据项id,开始结束时间获取相应的数据 */
|
|
getItemListValue(callback) {
|
|
getItemListValue(callback) {
|
|
if (this.chooseStartTime == this.chooseEndTime) {
|
|
if (this.chooseStartTime == this.chooseEndTime) {
|
|
@@ -372,7 +363,7 @@ export default {
|
|
const loading = showLoading(this, "加载中,请稍候···")
|
|
const loading = showLoading(this, "加载中,请稍候···")
|
|
this.getItemListValue((res) => {
|
|
this.getItemListValue((res) => {
|
|
let data = res.data
|
|
let data = res.data
|
|
- this.chart = echarts.init(document.getElementById('lineChart'))
|
|
|
|
|
|
+ this.chart = echarts.init(this.$refs.chart)
|
|
let legendData = []
|
|
let legendData = []
|
|
let seriesData = []
|
|
let seriesData = []
|
|
for (let a of data) {
|
|
for (let a of data) {
|
|
@@ -385,6 +376,9 @@ export default {
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
symbolSize: 5,
|
|
showSymbol: false,
|
|
showSymbol: false,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: this.getColor()
|
|
|
|
+ },
|
|
lineStyle: {
|
|
lineStyle: {
|
|
normal: {
|
|
normal: {
|
|
width: 1
|
|
width: 1
|
|
@@ -399,7 +393,7 @@ export default {
|
|
let b = '<div style="display:inline;">'
|
|
let b = '<div style="display:inline;">'
|
|
for (let a of params) {
|
|
for (let a of params) {
|
|
b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span style="color:' + a.color + '">'
|
|
b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span style="color:' + a.color + '">'
|
|
- + a.seriesName + ': ' + a.data + '</span></div>'
|
|
|
|
|
|
+ + a.name + ' ' + a.seriesName + ': ' + a.data + '</span></div>'
|
|
}
|
|
}
|
|
b += '</div>'
|
|
b += '</div>'
|
|
return b
|
|
return b
|
|
@@ -425,6 +419,17 @@ export default {
|
|
loading.close()
|
|
loading.close()
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ /** 生成颜色方法 */
|
|
|
|
+ getColor() {
|
|
|
|
+ const r = this.colorRandom(128, 255)
|
|
|
|
+ const g = this.colorRandom(0, 63)
|
|
|
|
+ const b = this.colorRandom(128, 255)
|
|
|
|
+ return "rgb(" + r + ", " + g + ", " + b + ")"
|
|
|
|
+ },
|
|
|
|
+ /** 颜色数字随机方法 */
|
|
|
|
+ colorRandom(minValue, maxValue) {
|
|
|
|
+ return Math.floor((Math.random() * (maxValue - minValue)) + minValue)
|
|
|
|
+ },
|
|
/** 鼠标移入事件 */
|
|
/** 鼠标移入事件 */
|
|
mouseOver() {
|
|
mouseOver() {
|
|
if (this.state) {
|
|
if (this.state) {
|
|
@@ -437,6 +442,14 @@ export default {
|
|
this.startTimer()
|
|
this.startTimer()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ /** 清除统计图 */
|
|
|
|
+ destroyChart() {
|
|
|
|
+ if (!this.chart) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.chart.dispose()
|
|
|
|
+ this.chart = null
|
|
|
|
+ },
|
|
/** 清除定时器 */
|
|
/** 清除定时器 */
|
|
stopTimer() {
|
|
stopTimer() {
|
|
clearInterval(this.timer)
|
|
clearInterval(this.timer)
|