File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="chart-wrap">
<div class="content"></div>
</div>
</template>
<script>
import * as am5 from '@amcharts/amcharts5';
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
const App = {
props: {
chartData: {
type: Array,
default: [],
},
category: {
type: String
},
value: {
type: String
},
colors: {
type: Array,
default: ['#f46b75', '#ffcd70', '#74d4c0', '#6ccff6', '#b084cc', '#e6e9ec', '#4b6584', '#f7a1a6', '#bfeee8', '#f3e08a', '#95a5a6']
}
},
data() {
return {
};
},
methods: {
chartCreate: function (data, value, category, colors) {
let chartWarp = this.$parent.$refs["pieChartdiv"]; // 차트 상위 div ref 매칭
chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
div.style.width = "100%"; // 차트를 담을 div의 넓이
div.style.height = "100%"; // 차트를 담을 div의 높이
chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기
this.charts = root; // 차트 정보 전역에 담기
// root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
let chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
let series = chart.series.push(am5percent.PieSeries.new(root, {
name: "Series",
valueField: value,
categoryField: category,
}));
// Set colors
series.set("colors", am5.ColorSet.new(root, {
colors: colors.map(color => am5.color(color))
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll(data);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
},
},
watch: {
'chartData': function (newData) {
this.chartCreate(newData, this.value, this.category, this.colors)
}
},
computed: {
},
components: {
},
mounted() {
}
}
export default App;
</script>