yudao-dev/src/views/core/analysis/balanceChart.vue

<!--
 * @Author: zhp
 * @Date: 2023-09-13 09:02:25
 * @LastEditTime: 2023-11-10 10:48:09
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div>
    <div style="margin: 20px">
      <el-button v-for="(item, index) in buttonList" :key="index" :class="[item.actived ? 'activeButton': 'normalButton']" @click="changeChart(index)">{{ item.name }}</el-button>
    </div>
    <div id="chart" ref="chartDiv" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    // autoResize: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      chart: null,
      dataArray: [],
      xDatas: [],
      buttonList: []
    }
  },
  mounted() {
    // this.initChart()
  },
  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
      this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
      // this.chart = echarts.init(document.getElementById('chart'), 'macarons')
      // this.setOptions(xData, yData[0], lineName)
    },
    setOptions(xData, dataList, lineName) {
      // let seriesData = []
        // lineName.forEach((item,index) => {
        //   seriesData.push({
        //     name: item,
        //     data: yData[index],
        //     type: 'line',
        //   })
        // })
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: xData
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:lineName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '设备CT',
            data: dataList.eqData,
            type: 'line',
          },
          {
            name: '产线CT',
            data: dataList.plData,
            type: 'line',
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.activeButton {
  background-color: rgb(93,159,255);
}
.normalButton {
  background-color: none;
}
</style>