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

<!-- **************************************NO.16 摄像头*************************************** -->
<template>
  <div class="chart-container">
    <!-- <div id="camera1" style="width: 100%; height:25vh; ">
        </div> -->
    <div id="camera2" style="width: 100%; height:55vh; ">
    </div>
    <!-- <div id="camera3" style="width: 100%; height:30vh; ">
        </div> -->
  </div>
</template>

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

  export default {
    name: 'camera',
    data() {
      return {
        source: []
      }
    },
    mounted() {
      // this.myEcharts1();
      // this.myEcharts2();
      // this.myEcharts3();
      this.getSbfb()
    },

    methods: {
      getSbfb() {
        let that = this
        selectDeviceType().then(res => {

          res.data.forEach(item=> {
            const param = Object.assign({})
            param.name = item.deviceName
            param.数量=item.deviceCount
            this.source.push(param)
          })
          console.log(this.source)
          that.myEcharts2()
        })
      },

      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
      myEcharts1() {
        var chartDom = document.getElementById('camera1');
        var myChart = echarts.init(chartDom);
        var option;
        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
        option = {
          dataset: {
            dimensions: ['name', '摄像头'],
            source: [{
              name: '双辽市',
              '摄像头': 50
            },
              {
                name: '梨树县',
                '摄像头': 40
              },
              {
                name: '伊通县',
                '摄像头': 30
              },
              {
                name: '铁东区',
                '摄像头': 20
              },
              {
                name: '铁西区',
                '摄像头': 30
              }
            ]
          },
          tooltip: {
            trigger: 'item',
            position: function (point, params, dom, rect, size) {
              const x = point[0];
              const y = point[1];
              const viewWidth = size.viewSize[0];
              const viewHeight = size.viewSize[1];
              const boxWidth = size.contentSize[0];
              const boxHeight = size.contentSize[1];
              let posX = 0;
              let posY = 0;
              if (x < boxWidth) {
                // 左边放不开
                posX = 5;
              } else {
                // 左边放的下
                posX = x - boxWidth;
              }
              if (y < boxHeight) {
                // 上边放不开
                posY = 5;
              } else {
                // 上边放得下
                posY = y - boxHeight;
              }
              return [posX, posY];
            },
          },
          angleAxis: {
            max(value) {
              return value.max * 1.1;
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            startAngle: 270
          },
          radiusAxis: {
            type: 'category',
            minorTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
          },
          polar: {
            radius: ['40%', '90%'],
          },
          // angleAxis:{
          //     clockwise:false
          // },
          series: [{
            type: 'bar',
            coordinateSystem: 'polar',
            itemStyle: {
              color(params) {
                const idx = params.dataIndex;
                return dfColor[idx];
              },
            },
            barWidth: 5,
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: 'RGBA(0, 69, 117, 0.5)',
            },
          }],
        };
        option && myChart.setOption(option);
      },

      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
      myEcharts2() {
        var chartDom = document.getElementById('camera2');
        var myChart = echarts.init(chartDom);
        var option;
        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
        option = {
          dataset: {
            source: this.source,
          },
          tooltip: {
            trigger: 'item',

          },
          grid: {
            top: "0%",
            left: "6%",
            // right: "4%",
            bottom: "5%",
            width: '75%',
            containLabel: true,
          },
          xAxis: {
            show: false,
            type: "value",
          },
          yAxis: {
            type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#5deaff',
                fontSize: '12'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
          },

          series: [{

            type: "bar",
            animationCurve: "easeOutBack",
            barWidth: 8,
            label: {
              show: true,
              position: "right",
              offset: [0, 0],
              color: "#88dfd5",
              // fontSize: "12",
              style: {
                fill: "#fff"
              },
            },
            backgroundBar: {
              show: true,
              style: {
                fill: "rgba(97,152,255,0.30)",
              },
            },
            barStyle: {
              stroke: "rgba(41,244,236,1)",
            },
            gradient: {
              color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
            },
            itemStyle: {
              label: {
                show: true
              },
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "rgba(41,244,236,0)"
              },
                {
                  offset: 1,
                  color: "rgba(41,244,236,1)"
                },

              ]),
              borderColor: "#a2f9f7",
              shadowBlur: 16,
              shadowColor: "#a2f9f7",
            },
          },],
        };
        option && myChart.setOption(option);
      },
      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
      myEcharts3() {
        var chartDom = document.getElementById('camera3');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          color: ['#3D91F7', '#61BE67'],
          tooltip: {},
          legend: {
            show: true,
            icon: "circle",
            bottom: 30,
            center: 0,
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 21,
            orient: "horizontal",
            data: ['a', 'b'],
            textStyle: {
              color: '#8C8C8C'
            },
          },

          radar: {
            // shape: 'circle',
            radius: '80%',
            triggerEvent: true,
            name: {
              textStyle: {
                color: '#fff',
                fontSize: '10',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            nameGap: '2',
            indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
              name: '型号1',
              max: 6500
            },
              {
                name: '型号2',
                max: 16000
              },
              {
                name: '型号3',
                max: 30000
              },
              {
                name: '型号4',
                max: 38000
              },
              {
                name: '型号5',
                max: 52000
              },
              {
                name: '型号6',
                max: 25000
              },
              {
                name: '型号7',
                max: 25000
              }
            ],
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
                  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
                  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
                ].reverse()
              }
            },
            // axisLabel:{//展示刻度
            //     show: true
            // },
            axisLine: { //指向外圈文本的分隔线样式
              lineStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: [
                  'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
                  'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
                  'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
                ].reverse()
              }
            },

          },

          series: [{
            name: '型号统计',
            type: 'radar',
            //areaStyle: {normal: {}},
            areaStyle: {
              normal: {
                color: 'rgba(252,211,3, 0.3)'
              }
            },
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: 'rgba(252,211,3, 1)',
                width: 1
              }
            },
            data: [{
              value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
              name: '型号统计',


            }]
          }]
        };
        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;
    flex-direction: column;
  }
</style>