数据查询统计图设置默认颜色，设置拖动x轴组件,重置使x轴组件变为默认，放大上限为1%，频率修改实时修改

industry-admin/src/views/source/dataQuery/index.vue

@@ -15,12 +15,12 @@
                         </el-col>
                         <el-col v-if="chartForm.trendType == 0" :span="4">
                             <el-form-item label="更新频率" prop="frequencyValue">
-                                <el-input v-model="chartForm.frequencyValue"></el-input>
+                                <el-input v-model="chartForm.frequencyValue" @change="changeFrequency"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col v-if="chartForm.trendType == 0" :span="1" :xl="2">
                             <el-form-item prop="frequencyType">
-                                <el-select v-model="chartForm.frequencyType">
+                                <el-select v-model="chartForm.frequencyType" @change="changeFrequencyType">
                                     <el-option v-for="timeType in timeTypeList" :key="timeType.value"
                                         :label="timeType.label" :value="timeType.value">
                                     </el-option>
@@ -73,6 +73,7 @@
                         <el-form-item>
                             <el-button type="primary" plain icon="el-icon-search" size="mini"
                                 @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"
                                 @click="exportData">导出</el-button>
                         </el-form-item>
@@ -221,12 +222,30 @@ export default {
                 containLabel: true
             },
             //缩放组件
-            dataZoom: [{
-                type: 'inside', // 放大和缩小
-                orient: 'vertical',
-            }, {
-                type: 'inside',
-            }],
+            // dataZoom: [{
+            //     type: 'inside', // 放大和缩小
+            //     orient: 'vertical',
+            // }, {
+            //     type: 'inside',
+            // }],
+            dataZoom: [
+                {
+                    show: true,
+                    //拖动时，实时刷新数据
+                    realtime: true,
+                    textStyle: {
+                        color: '#99ffff'
+                    },
+                    start: 0,
+                    end: 100,
+                    //缩小最小值1%比例
+                    minSpan: 1
+                },
+                {
+                    type: 'inside',
+                    realtime: true
+                }
+            ],
             //x轴
             xAxis: {
                 type: 'category',
@@ -283,6 +302,20 @@ export default {
             this.chartForm.idList = arr
             this.chartForm.itemListTitile = b
         },
+        /** 频率更改事件 */
+        changeFrequency() {
+            if (this.chart && this.state) {
+                this.stopTimer()
+                this.startTimer()
+            }
+        },
+        /** 频率类型改变事件 */
+        changeFrequencyType() {
+            if (this.chart && this.state) {
+                this.stopTimer()
+                this.startTimer()
+            }
+        },
         /** 选择数据项事件 */
         chooseItemEvent() {
             this.$refs.chooseItem.selectedItemList = this.itemList
@@ -348,6 +381,12 @@ export default {
                 this.initChart()
             }
         },
+        /** 重置统计图，这里只重置统计图的缩放组件 */
+        resetQuery() {
+            if (this.chart) {
+                this.chart.setOption({ dataZoom: this.dataZoom })
+            }
+        },
         /** 通过数据项id，开始结束时间获取相应的数据 */
         getItemListValue(callback) {
             if (this.chooseStartTime == this.chooseEndTime) {
@@ -373,7 +412,8 @@ export default {
                 let legendData = []
                 let xAxisData = []
                 let seriesData = []
-                for (let a of data) {
+                for (let n in data) {
+                    let a = data[n]
                     legendData.push(a.describe ? a.describe : a.itemReadName)
                     let b = {
                         name: a.unit ? ((a.describe ? a.describe : a.itemReadName) + '(' + a.unit + ')') :
@@ -384,7 +424,7 @@ export default {
                         symbolSize: 5,
                         showSymbol: false,
                         itemStyle: {
-                            color: this.getColor()
+                            color: this.getColor(n)
                         },
                         lineStyle: {
                             normal: {
@@ -442,7 +482,12 @@ export default {
             })
         },
         /** 生成颜色方法 */
-        getColor() {
+        getColor(i) {
+            const arr = ['#ff33cc', '#ff3333', '#99ffff', '#66ff33', '#FFFF00',
+                '#00FFFF', '#A0522D', '#F0FFFF', '#FF6EB4', '#33ccff']
+            if (i <= 10) {
+                return arr[i]
+            }
             const r = this.colorRandom(128, 255)
             const g = this.colorRandom(0, 63)
             const b = this.colorRandom(128, 255)