GivenFeedbacks.vue

<template>
  <f-card class="chart-given-feedbacks">
    <f-card-title>
      <card-title :separator="false">
        <template v-slot:title>
          Quantidade de feedbacks dados por destino
        </template>
      </card-title>
    </f-card-title>
    <f-card-body>
      <div ref="chartDiv" class="chart-given-feedbacks__chartDiv" />
    </f-card-body>
  </f-card>
</template>

<script>
import { CardTitle } from '@/components/atoms'
import { core, charts } from '~/plugins/amcharts'

export default {
  name: 'ChartGivenFeedbacks',

  components: {
    CardTitle
  },

  data: () => ({
    chart: ''
  }),

  mounted() {
    const chart = core.create(this.$refs.chartDiv, charts.PieChart)
    chart.hiddenState.properties.opacity = 0
    chart.innerRadius = core.percent(70)

    chart.colors.list = [core.color('#687AF5'), core.color('#F69923')]
    chart.data = [
      {
        area: 'Outras Áreas',
        value: 18.33
      },
      {
        area: 'Externo',
        value: 18.33
      },
      {
        area: 'Outras BU',
        value: 18.33
      },
      {
        area: 'Minha Área',
        value: 45
      }
    ]

    chart.padding(10, 0, 0, 0)
    chart.logo.height = -15
    chart.strokeOpacity = 0

    const pieSeries = chart.series.push(new charts.PieSeries())
    const colorSet = new core.ColorSet()
    colorSet.list = ['#F69923', '#DF3A3B', '#17D359', '#687AF5'].map(color =>
      core.color(color)
    )

    pieSeries.startAngle = -40
    pieSeries.endAngle = 320
    pieSeries.dataFields.value = 'value'
    pieSeries.dataFields.category = 'area'
    pieSeries.slices.template.stroke = core.color('#fff')
    pieSeries.slices.template.strokeWidth = 5
    pieSeries.slices.template.strokeOpacity = 1
    pieSeries.ticks.template.disabled = true
    pieSeries.colors = colorSet

    // Animation
    pieSeries.hiddenState.properties.opacity = 1
    pieSeries.hiddenState.properties.endAngle = -90
    pieSeries.hiddenState.properties.startAngle = -90

    chart.cursor = new charts.XYCursor()
    chart.cursor.behavior = 'zoomY'
    this.chart = chart
  }
}
</script>

<style lang="scss">
.chart-given-feedbacks {
  padding: 10px 18px;
  height: 440px;
  overflow: hidden;

  &__chartDiv {
    width: 100%;
    height: 100%;
  }
}
</style>