Skip to content

Instantly share code, notes, and snippets.

@iErik
Created May 15, 2020 14:08
Show Gist options
  • Save iErik/7e7e077087fbf6d983d918cd5b08af32 to your computer and use it in GitHub Desktop.
Save iErik/7e7e077087fbf6d983d918cd5b08af32 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment