index.vue

<template>
  <div style="width: 100%">
    <div class="division">
      <div  style=" width: 500px;height: calc(50vh - 84px)">
        <div id="myChartone" style="text-align:center;width:80%;height:80%;margin:auto;padding-top:30px;"></div>
      </div>
      <div id="myChartfour" style=" width: 1000px;height: calc(50vh - 84px)"></div>
    </div>
    <div class="division">
      <div style=" width: 500px;height: calc(50vh - 84px)">
        <div id="myCharttwo" style="text-align:center;width:80%;height:80%;margin:auto;padding-top:30px;"></div>
      </div>
      <div id="myChartthree" style=" width: 1000px;height: calc(50vh - 84px)"></div>
    </div>
  </div>
</template>

<script>
  import {getStatistics  } from "@/api/system/alarm";
  import * as echarts from 'echarts';
    export default {
        name: "chartindex",
      data() {
        return {
          statistics:{}
        };
      },
      created() {
        this.getTong();
      },
      methods: {
        getTong() {
          getStatistics().then(response => {
            this.statistics = response.data;
            this.drawLine();
            this.drawLine2();
            this.drawLine3();
            this.drawLine4();
          });
        },
        drawLine() {
          console.log(this.statistics);
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
          // 绘制图表
          myChart1.setOption({
            color:['#ff0000',
              '#ff7744',
              '#ffaa33',
              '#bbbb00',
              '#ccff33'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '0',
              left: 'center'
            },
            series: [
              {
                name: '报警级别',
                type: 'pie',
                radius: ['40%', '80%'],
                avoidLabelOverlap: false,

                //itemStyle: {
                //  borderRadius: 50,
                 // borderColor: '#fff',
                 // borderWidth: 5
                // },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data:this.statistics.levelList
                // data: [
                //   { value: 1048, name: '高高报' },
                //   { value: 735, name: '高报' },
                //   { value: 580, name: '低报' },
                //   { value: 484, name: '低低报' },
                //   { value: 300, name: '开关量' }
                // ],
              }
            ]

          });
        },
        drawLine2() {
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myCharttwo"));
          // 绘制图表
          myChart1.setOption({
            color:['#109CF1','#ff0000'],
            angleAxis: {
              clockwise: false, // 刻度增长是否按顺时针，默认顺时针(true)。
              axisLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              min: 0,
              max: this.statistics.notProcessed+this.statistics.processed, //一圈的刻度值
              startAngle: 0 //初始角度
            },
            radiusAxis: {
              type: 'category',
              data: ['1', '2', '3', '4'], // 极坐标径向轴中的类目，这边有几个数，
              // 就代表径向轴分了几份，和series中的data对应，这样就可以撑开圆环
              z: 10,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
            },
            polar: {
            },
            series: [{
              type: 'bar',
              data: [0, 0, 0, this.statistics.processed],
              coordinateSystem: 'polar',
              name: '已处理',
              roundCap: true,
              stack: 'a',
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 3
              },
            }, {
              type: 'bar',
              data: [0, 0, 0, this.statistics.notProcessed], // 前面的0，累计还是0，这样径向轴上的对应的分区总数就是0，不会显示圆环
              coordinateSystem: 'polar',
              name: '未处理',
              stack: 'a',
              roundCap: true,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 3
              },
            }
            ],
            legend: {
              show: true,
              top: '90%',
              // data: ['待整改', '已整改']
            }

          });
        },
        drawLine3() {
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myChartthree"));
          // 绘制图表
          myChart1.setOption({
            title: {
              text: '每天设备报警数量（30天）'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['报警设备']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data:this.statistics.dateLabel
            //   data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '10', '12', '13', '14',
            //     '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
             },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '报警设备数量',
                type: 'line',
                stack: 'Total',
                data:this.statistics.dateNum
              //   data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 147,
              //     230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 147, 260]
               }
            ]

          });
        },
        drawLine4() {
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myChartfour"));
          // 绘制图表
          myChart1.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              dimensions: ['product', '2015', '2016', '2017', '2018'],
              source: [
                { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7, 2018: 90.7 },
                { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 , 2018: 90.7},
                { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5, 2018: 90.7 },
                { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 , 2018: 90.7}
              ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            // title: {
            //   text: '不同类型设备报警数量（30天）',
            // },
            // tooltip: {
            //   trigger: 'axis',
            //   axisPointer: {
            //     type: 'shadow'
            //   }
            // },
            // grid: {
            //   left: '3%',
            //   right: '4%',
            //   bottom: '3%',
            //   containLabel: true
            // },
            // xAxis: [
            //   {
            //     type: 'category',
            //     //data: ['液位', '压力', '温度', '有毒气体', '可燃气体'],
            //     data:this.statistics.typeLabel,
            //     axisTick: {
            //       alignWithLabel: true
            //     }
            //   }
            // ],
            // yAxis: [
            //   {
            //     type: 'value'
            //   }
            // ],
            // series: [
            //   {
            //     name: '报警设备数',
            //     type: 'bar',
            //     barWidth: '60%',
            //     //data: [10, 52, 200, 334, 390, 330, 220]
            //     data: this.statistics.typeNum
            //   }
            // ]
          });
        },
      },
    }
</script>

<style scoped>
  .division{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }
</style>