echart图表

<template>
  <!-- <div id="main" style="width: 600px;height:400px;"></div> -->
  <!-- 故障次数echarts图表 -->
  <div ref="FailureChart" style="height: 300px">
    <!-- <el-card class="trend-card" shadow="hover">
      <vab-chart
        class="trend-echart"
        :init-options="initOptions"
        :option="option"
        theme="vab-echarts-theme"
      />
    </el-card> -->
  </div>
</template>
<script>
  import * as echarts from 'echarts' //引入echarts
  import { singledeviceQuerysingledevicefault } from '@/api/ss/singleDevice'
  export default {
    // props: {
    //   getRadio: {
    //     type: Number,
    //     default: 1,
    //   },
    // },
    data() {
      return {
        querForm: {
          pageNo: 1,
          pageSize: 10,
        },
        // 近12月份
        monthArr: [],
        // 显示的数据
        seriesData: [],
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        // 图表
        radioType: 1,
        name: '故障次数',
        color: '#1890FF',
      }
    },
    created() {
      this.getData()
      this.getBeforeMonth()
    },
    mounted() {
      this.getCharts()
    },
    methods: {
      // 获取前12月份
      getBeforeMonth() {
        var data = new Date()
        data.setMonth(data.getMonth() + 1, 1) //获取到当前月份,设置月份
        for (var i = 0; i < 12; i++) {
          data.setMonth(data.getMonth() - 1) //每次循环一次 月份值减1
          var m = data.getMonth() + 1
          m = m < 10 ? '0' + m : m
          this.monthArr.unshift(data.getFullYear() + '-' + m)
        }
      },
      // 获取全部数据
      async getData() {
        const { code, result } = await singledeviceQuerysingledevicefault(
          this.querForm
        )
        //先声明一个空数组来存放获取到的柱状条的数据
        if (code === 0) {
          // this.seriesData = result
          this.monthArr.forEach((element) => {
            let count1 = 0
            let count2 = 0
            let count3 = 0
            let count4 = 0
            for (const iterator of result) {
              if (element === iterator.occurrenceTime) {
                count1++
                count2 =
                  count2 + iterator.downTime === null ||
                  iterator.downTime === undefined
                    ? 0
                    : iterator.downTime
                count3 =
                  count3 + iterator.costTotal === null ||
                  iterator.costTotal === undefined
                    ? 0
                    : iterator.costTotal
                count4 =
                  count4 + iterator.repairTime === null ||
                  iterator.repairTime === undefined
                    ? 0
                    : iterator.repairTime
              }
            }
            this.list1.push(count1 + '')
            this.list2.push(count2 + '')
            this.list3.push(count3 + '')
            this.list4.push(count4 + '')
          })
          if (this.radioType === 1) {
            this.seriesData = this.list1
            this.name = '故障次数'
            this.color = '#1890FF'
          } else if (this.radioType === 2) {
            this.seriesData = this.list2
            this.name = '停机时长'
            this.color = '#36CBCB'
          } else if (this.radioType === 3) {
            this.seriesData = this.list3
            this.name = '总维修费用'
            this.color = '#4ECB73'
          } else {
            this.seriesData = this.list4
            this.name = '维修用时'
            this.color = '#FBD437'
          }
        } else {
          this.seriesData = []
        }
        this.getCharts()
      },
      // 接收改变的值
      getId(val) {
        this.radioType = val
        if (val === 1) {
          this.seriesData = this.list1
          this.name = '故障次数'
          this.color = '#1890FF'
        } else if (val === 2) {
          this.seriesData = this.list2
          this.name = '停机时长'
          this.color = '#36CBCB'
        } else if (val === 3) {
          this.seriesData = this.list3
          this.name = '总维修费用'
          this.color = '#4ECB73'
        } else {
          this.seriesData = this.list4
          this.name = '维修用时'
          this.color = '#FBD437'
        }
        this.getCharts()
      },
      // 图表显示
      getCharts() {
        // 基于准备好的dom，初始化echarts实例
        //在使用echarts发现需要及时对新建的myChart实例进行销毁
        let myChart = echarts.getInstanceByDom(this.$refs.FailureChart)
        console.log(myChart);
        if (myChart === null || myChart === undefined) {
          myChart = echarts.init(this.$refs.FailureChart)
        }
        // 绘制图表
        myChart.setOption({
          // color: [
          //   '#1890FF',
          //   '#36CBCB',
          //   '#4ECB73',
          //   '#FBD437',
          //   '#F2637B',
          //   '#975FE5',
          // ],
          // 每次显示的颜色
          color: [this.color],
          title: { left: 'center', text: '近12月数据编号趋势对比' },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            // top: '4%',
            left: '2%',
            right: '2.5%',
            bottom: '15%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: this.monthArr, // 横坐标的值
              boundaryGap: false, // x轴坐标是否居中
              axisTick: { //显示横坐标的小齿
                show: false,
                lineStyle: {
                  color: '#333',
                },
              },
              // 显示分割区域
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#eeeeee'],
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位（次）',
              //如果x轴设置 splitLine，y轴线就不需要设置axisLine
              // axisLine: {
              //   show: false,
              //   lineStyle: {
              //     color: '#cccccc',
              //   },
              // },
            },
          ],
          series: [
            {
              // 每次显示的名字
              name: this.name,
              type: 'line',
              // 从接口获取的数据 是一个数组 如['1','3','5',.....]
              data: this.seriesData,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {},
              areaStyle: {
                opacity: 0.8,
              },
            },
          ],
        })
      },
    },
  }
</script>