|
@@ -1,156 +1,159 @@
|
|
|
<template>
|
|
|
- <!-- 历史数据 -->
|
|
|
- <div id="historyChart">
|
|
|
- <!-- 精度选择 -->
|
|
|
- <div class="query-area">
|
|
|
- <span>当下分精度下采集数量:{{ chartData.count }}</span>
|
|
|
- <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <!-- 图表 -->
|
|
|
- <div class="chart-area" ref="chart">
|
|
|
+ <!-- 历史数据 -->
|
|
|
+ <div id="historyChart">
|
|
|
+ <!-- 精度选择 -->
|
|
|
+ <div class="query-area">
|
|
|
+ <span>当下分精度下采集数量:{{ chartData.count }}</span>
|
|
|
+ <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!-- 图表 -->
|
|
|
+ <div class="chart-area" ref="chart">
|
|
|
|
|
|
- </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
|
|
|
|
import {
|
|
|
- getHistoryData
|
|
|
+ getHistoryData
|
|
|
} from '@/api/point/request'
|
|
|
import echarts from 'echarts'
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- lineChart: null,//折线表
|
|
|
- selectValue: '1',//下拉框默认值
|
|
|
- options: [//精度
|
|
|
- {value: '1', label: '天'},
|
|
|
- {value: '7', label: '周'},
|
|
|
- {value: '30', label: '月'},
|
|
|
- ],
|
|
|
- //数据表
|
|
|
- chartData: {
|
|
|
- count: 100,//总数
|
|
|
- data: [
|
|
|
- {date: '2019/02/01', value: 100},//横坐标标识 纵坐标值
|
|
|
- {date: '2019/02/02', value: 200},
|
|
|
- {date: '2019/02/03', value: 300},
|
|
|
- {date: '2019/02/04', value: 150},
|
|
|
- ]
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lineChart: null,//折线表
|
|
|
+ selectValue: '1',//下拉框默认值
|
|
|
+ options: [//精度
|
|
|
+ { value: '1min', label: '1分钟' },
|
|
|
+ { value: '5min', label: '5分钟' },
|
|
|
+ { value: '15min', label: '15分钟' },
|
|
|
+ { value: '30min', label: '30分钟' },
|
|
|
+ { value: '1hour', label: '1小时' },
|
|
|
+ { value: '1day', label: '1天' },
|
|
|
+ ],
|
|
|
+ //数据表
|
|
|
+ chartData: {
|
|
|
+ count: 100,//总数
|
|
|
+ data: [
|
|
|
+ { date: '2019/02/01', value: 100 },//横坐标标识 纵坐标值
|
|
|
+ { date: '2019/02/02', value: 200 },
|
|
|
+ { date: '2019/02/03', value: 300 },
|
|
|
+ { date: '2019/02/04', value: 150 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ tabFunNum: String//表号功能号
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //加载表格
|
|
|
+ loadTable() {
|
|
|
+ getHistoryData({ tabFunNum: this.tabFunNum }, res => {
|
|
|
+ // this.chartData = res;
|
|
|
+ //折线图参数
|
|
|
+ let lineChartOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ position: function (pt) {
|
|
|
+ return [pt[0], '10%'];
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- props:{
|
|
|
- tabFunNum: String//表号功能号
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //加载表格
|
|
|
- loadTable(){
|
|
|
- getHistoryData({tabFunNum:this.tabFunNum},res => {
|
|
|
- // this.chartData = res;
|
|
|
- //折线图参数
|
|
|
- let lineChartOption = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- position: function (pt) {
|
|
|
- return [pt[0], '10%'];
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: this.chartData.data.map(item => item.date)
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, '100%']
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- type: 'inside',
|
|
|
- start: 80,
|
|
|
- end: 100
|
|
|
- }, {
|
|
|
- start: 0,
|
|
|
- end: 10,
|
|
|
- handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|
|
- handleSize: '80%',
|
|
|
- handleStyle: {
|
|
|
- color: '#fff',
|
|
|
- shadowBlur: 3,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.6)',
|
|
|
- shadowOffsetX: 2,
|
|
|
- shadowOffsetY: 2
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name:'历史数据',
|
|
|
- type:'line',
|
|
|
- smooth:true,
|
|
|
- symbol: 'none',
|
|
|
- sampling: 'average',
|
|
|
- itemStyle: {
|
|
|
- color: 'rgb(182,194,154)'
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgb(182,194,154)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgb(138,151,123)'
|
|
|
- }])
|
|
|
- },
|
|
|
- data: this.chartData.data.map(item => item.value)
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- this.lineChart.setOption(lineChartOption);
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- init() {
|
|
|
- this.lineChart = echarts.init(this.$refs.chart);
|
|
|
- this.loadTable();
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters('layout', ['projectId', 'userId'])
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.chartData.data.map(item => item.date)
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, '100%']
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ type: 'inside',
|
|
|
+ start: 80,
|
|
|
+ end: 100
|
|
|
+ }, {
|
|
|
+ start: 0,
|
|
|
+ end: 10,
|
|
|
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|
|
+ handleSize: '80%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ shadowBlur: 3,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
|
|
|
+ shadowOffsetX: 2,
|
|
|
+ shadowOffsetY: 2
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '历史数据',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'average',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgb(182,194,154)'
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(182,194,154)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(138,151,123)'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ data: this.chartData.data.map(item => item.value)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.lineChart.setOption(lineChartOption);
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
- mounted() {
|
|
|
- //实例化
|
|
|
- this.init();
|
|
|
- let that = this;
|
|
|
- //图表大小随窗口变化
|
|
|
- window.onresize = () => {
|
|
|
- that.lineChart.resize();
|
|
|
- }
|
|
|
+ init() {
|
|
|
+ this.lineChart = echarts.init(this.$refs.chart);
|
|
|
+ this.loadTable();
|
|
|
},
|
|
|
- watch: {
|
|
|
- //切换时更新数据
|
|
|
- tabFunNum() {
|
|
|
- this.loadTable();
|
|
|
- }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['projectId', 'userId'])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //实例化
|
|
|
+ this.init();
|
|
|
+ let that = this;
|
|
|
+ //图表大小随窗口变化
|
|
|
+ window.onresize = () => {
|
|
|
+ that.lineChart.resize();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ //切换时更新数据
|
|
|
+ tabFunNum() {
|
|
|
+ this.loadTable();
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-#historyChart{
|
|
|
- height:100%;
|
|
|
- width:100%;
|
|
|
- padding:10px 5px;
|
|
|
+#historyChart {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 5px;
|
|
|
}
|
|
|
-.query-area{
|
|
|
- height:40px;
|
|
|
- line-height:40px;
|
|
|
+.query-area {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
}
|
|
|
-.chart-area{
|
|
|
- height:450px;
|
|
|
+.chart-area {
|
|
|
+ height: 450px;
|
|
|
}
|
|
|
</style>
|