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 id="chartdiv" ref="chartdiv"></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';
export default {
props: {
setData: {
type: Array,
default: [],
}
},
data() {
return {
};
},
methods: {
chartCreate: function (data) {
let chartWarp = this.$refs["chartdiv"]; // 차트 상위 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, {
valueField: "value",
categoryField: "category"
}));
// series.labels.template.setAll({
// forceHidden: false,
// fill: "#333",
// // // fontSize: 15,
// // fontWeight: "bold",
// textAlign: "center",
// text: "{category}\n{valuePercentTotal.formatNumber('#.#')}%",
// radius: -60
// });
// series.ticks.template.set("forceHidden", true);
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll(data);
// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
let legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
}
},
watch: {
'setData': function (newData) {
console.log('newData - ', newData)
this.chartCreate(newData)
}
},
computed: {
},
components: {
},
mounted() {
}
}
</script>