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

<!-- **************************************NO.2 事件类型 分类*************************************** -->
<template>
  <div class="chart-container">
    <div id="event" style="width: 50%; height:21vh;">
    </div>
    <div id="event2" style="width: 50%; height:21vh;">
    </div>
  </div>
</template>

<script>
import {
  getEventSourceAndTypeStatistics
} from '@/api/bigdata'

import * as echarts from 'echarts'

export default {
  name: 'event',
  data() {
    return {
      year: 2022,
      optionData: [],
      option2Data: []
    }
  },
  mounted() {
    this.getEventSourceAndTypeStatistics()
  },

  methods: {
    // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
    //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
    getEventSourceAndTypeStatistics() {
      let that = this
      getEventSourceAndTypeStatistics({ day: that.year }).then(res => {
        this.optionData=res.data.source
        this.option2Data=res.data.type
        that.myEcharts()
        that.myEcharts2()
      })
    },
    myEcharts() {
      var chartDom = document.getElementById('event')
      var myChart = echarts.init(chartDom)
      var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
      var option

      option = {
        color: color,
        tooltip: {
          trigger: 'item',
          position: 'top'
        },
        series: [
          {
            name: '事件类型',
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,

            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.optionData
          }

        ]
      }
      option && myChart.setOption(option)
    },
    myEcharts2() {
      var chartDom = document.getElementById('event2')
      var myChart = echarts.init(chartDom)
      let dashedPic =
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC'
      let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#99ff00', '#E148EB', '#E148EB', '#E148EB', '#E148EB']
      var option
      let chartData = this.option2Data
      let arrName = []
      let arrValue = []
      let sum = 0
      let pieSeries = [],
        lineYAxis = []

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name)
        arrValue.push(v.value)
        sum = sum + v.value
      })

      // 图表option整理
      chartData.forEach((v, i) => {
        pieSeries.push({
          name: '沪昆线到达晚点情况',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
          center: ['35%', '60%'],
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: 20
          },
          data: [
            {
              value: v.value,
              name: v.name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  borderColor: color[i]
                }
              }
            },
            {
              value: sum - v.value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        pieSeries.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
          center: ['35%', '60%'],
          label: {
            show: false
          },
          itemStyle: {
            borderCap: 'round',
            borderJoin: 'round'
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: '#E3F0FF'
              }
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
                padding: [0, 0]
              }
            }
          }
        })
      })

      option = {
        color: color,
        grid: {
          top: '20%',
          bottom: '45%',
          left: '40%',
          containLabel: false
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(params) {
                let item = chartData[params]
                console.log(item)
                return (
                  '{circle|●}{name|' +
                  item.name +
                  '}{bd||}{percent|' +
                  item.percent +
                  '}'
                )
              },
              interval: 0,
              inside: true,
              textStyle: {
                color: '#333',
                fontSize: 10,
                rich: {
                  line: {
                    width: 170,
                    height: 5,
                    backgroundColor: { image: dashedPic }
                  },
                  name: {
                    color: '#fff',
                    fontSize: 10
                  },
                  bd: {
                    color: '#72afff',
                    padding: [0, 5],
                    fontSize: 10
                  },
                  percent: {
                    color: '#5cdad0',
                    fontSize: 10
                  },
                  value: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 500,
                    padding: [0, 0, 0, 10]
                  },
                  unit: {
                    fontSize: 14
                  }
                }
              },
              show: true
            },
            data: lineYAxis
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        series: pieSeries
      }

      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>