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 * as echarts from 'echarts';
  import {getSjlylxtj} from '@/api/bigdata'

  export default {
    name: 'event',
    data() {
      return {
        count: 0,
        data_sjlylxtj_source:[],
        data_sjlylxtj_type:[]
      }
    },
    mounted() {
      this.sjlylxtj()
    },

    methods: {

      sjlylxtj() {
        let that = this
        getSjlylxtj().then(resp => {
          that.data_sjlylxtj_source = resp.data.source
          that.data_sjlylxtj_type = resp.data.type
          that.myEcharts()
          that.myEcharts2()
        })
      },
      // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
      //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT

      myEcharts() {
        let that = this
        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: that.data_sjlylxtj_type
            },

          ]
        };

        option && myChart.setOption(option);

      },
      myEcharts2() {
        let that = this
        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', '#E148EB'];
        var option;
        let chartData = that.data_sjlylxtj_source
        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>