Project_yhfu/src/views/bigdata/chart-deviceReportingEvents.vue

<!-- **************************************NO.5 林场*************************************** -->
<template>
  <div class="chart-container">
    <div id="forestfarm" style="width: 100%; height:23vh;">
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {getSbsbsjsl} from '@/api/bigdata.js'

  export default {
    name: 'forestfarm',
    data() {
      return {
        count: 0,
        data_num:[],
        data_reportor:[]
      }
    },
    mounted() {
      this.sjsbsbsl()

    },

    methods: {
      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
      sjsbsbsl() {
        let that = this
        getSbsbsjsl().then(resp => {
          console.log("设备上报事件数量", resp)
          that.data_num = resp.data.num;
          that.data_reportor = resp.data.reportor
          that.myEcharts()
        })
      },
      myEcharts() {

        let that = this
        var chartDom = document.getElementById('forestfarm');
        var myChart = echarts.init(chartDom);
        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
        var option;
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },

          xAxis: {
            type: 'category',
            data:that.data_reportor,
            axisLine: {
              lineStyle: {
                color: '#1cc6a1'

              }
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: 'Microsoft YaHei'
              }
            },
          },

          yAxis: {
            type: 'value',
            max: '500',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#19b1e8'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLabel: {}
          },

          series: [{
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#fccb05'
                }, {
                  offset: 1,
                  color: '#1689f5'
                }]),
                barBorderRadius: 12,
              },
            },
            data: that.data_num
          }]
        };

        var app = {
          currentIndex: -1,
        };
        setInterval(function () {
          var dataLen = option.series[0].data.length;

          // 取消之前高亮的图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
          });
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          //console.log(app.currentIndex);
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
          });


        }, 1000);
        option && myChart.setOption(option);
      },

    },


  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 10px;
    display: flex;
  }
</style>