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 id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
<div style="width: 100%; height: inherit;" ref="chartdivWrap">
<div
ref="chartdiv"
id="chartdiv"
style="width: 100%; height: 100%; background: #ffffff"
></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: {
chartDataName: {
type: Array,
default: [],
},
chartData: {
type: Array,
default: [],
},
},
data() {
return {
charts: {},
};
},
methods: {
createChart: function () {
console.log("createChart");
/* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
this.charts["chartdiv"].dispose();
} */
let chartWarp = this.$refs["chartdivWrap"];
chartWarp.innerHTML = "";
let div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
chartWarp.appendChild(div);
let root = am5.Root.new(div);
this.charts["chartdiv"] = root;
/* Chart code */
//amChart 로고 삭제
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, {
endAngle: 270
})
);
// 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",
endAngle: 270
})
);
series.states.create("hidden", {
endAngle: -90
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
category: "Lithuania",
value: 501.9
}, {
category: "Czechia",
value: 301.9
}, {
category: "Ireland",
value: 201.1
}, {
category: "Germany",
value: 165.8
}, {
category: "Australia",
value: 139.9
}, {
category: "Austria",
value: 128.3
}, {
category: "UK",
value: 99
}]);
series.appear(1000, 100);
},
},
watch: {
// 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
// "chartData": function(newValue, oldValue){
// console.log('chartdiv watch: ', newValue, oldValue);
// // 차트 생성 함수
// this.createChart();
// }
},
mounted() {
this.createChart();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#chartdiv {
height: 50rem;
padding-top: 2rem;
}
</style>