Vue.js) highcharts 사용하기

https://github.com/smithalan92/vue3-highcharts

smithalan92/vue3-highcharts

 

패키지는 해당 페이지에서 참고하고

 

사이트에서는 global, local component방법이있는데 필자는 local component방식으로 했다.

차트 모양은 는 반원 방식으로 하였다.

http://www.w3big.com/try/try.php?filename=highcharts_pie_semicircle_donut 

Try it Yourself - pie_semicircle_donut

 

<template>
	<VueHighcharts :options="chartOptions" class="half__circle"/>
</template>

<script>

import VueHighcharts from 'vue3-highcharts';

export default {
  name: "Hellow",
  components: {
    VueHighcharts,
  }
  ,
  props: {
  }
  ,
  data() {
    return {
      chartOptions: {
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            dataLabels: {
              enabled: false,
            },
            startAngle: -90,
            endAngle: 90,

          }
        },
        colors: ['#d7d7d7', '#76CAFF', '#6F8593', '#2F4858'],
        series: [{
          type: 'pie',
          name: '',
          innerSize: '45%',
          data: [
            ['1', 10.0],
            ['2', 20.0],
            ['3', 30.0],
            ['4', 40.0],

          ]
        }]
      }

    }
  }
  ..........
  </script>
  <style scope>
  .half__circle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  width: calc(100% - 40px);
  height: 50vh;
}
  </style>

 

공식 API 문서

https://api.highcharts.com/highcharts/annotations.animation

Highcharts API Option: annotations.animation