pdf

src/views/core/analysis/balanceChart.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-13 09:02:25
- * @LastEditTime: 2023-09-20 09:29:40
+ * @LastEditTime: 2023-10-08 16:36:37
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div>
     <div style="margin: 20px">
-      <el-button v-for="(item, index) in dataArray" :key="index" @click="changeChart(index)">{{ item.name }}</el-button>
+      <el-button v-for="(item, index) in buttonList" :key="index" :class="[item.actived ? 'activeButton': 'normalButton']" @click="changeChart(index)">{{ item.name }}</el-button>
     </div>
     <div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
   </div>
@@ -43,7 +43,8 @@ export default {
     return {
       chart: null,
       dataArray: [],
-      xDatas: []
+      xDatas: [],
+      buttonList: []
     }
   },
   mounted() {
@@ -51,12 +52,34 @@ export default {
   methods: {
     changeChart(index) {
       this.setOptions(this.xDatas, this.dataArray[index])
+      this.buttonList.forEach((item, s) => {
+        if (index === s) {
+          // item.actived = true
+          this.$nextTick(() =>{
+            // item.actived = true
+            this.$set(item, 'actived', true)
+          })
+        } else {
+          // item.actived = false
+          this.$nextTick(() =>{
+            // item.actived = false
+            this.$set(item, 'actived', false)
+          })
+          // this.$set(item, 'actived', false)
+        }
+      })
+      console.log('看一下数22222据', this.dataArray)
     },
     initChart(xData, yData, lineName) {
       this.dataArray = yData
+      this.buttonList = this.dataArray.map((item, index) => {
+        return {
+          'name': item.name,
+          'actived': index === 0 ? true : false
+        }
+      })
+      console.log('看一下数据', this.dataArray)
       this.xDatas = xData
-      console.log(xData,yData);
-      console.log('zale', yData[0].eqData)
       this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
       this.setOptions(xData, yData[0], lineName)
     },
@@ -100,3 +123,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.activeButton {
+  background-color: rgb(93,159,255);
+}
+.normalButton {
+  background-color: none;
+}
+</style>