[vue.js] vue2-echarts사용하기

vue에 그래프를 그릴 수 있는 방법은 다양하게 있다. 그 중 chart.js를 사용하려 했는데 책임님께서 데이터가 많아지면 로딩이 오래걸린다고 하셔서 추천받은 EChart를 설치해보았다.

---

현재 vue2를 사용하고 있기 때문에 vue2에 맞는 EChart를 설치해줄 것이다.

아래 명령어로 npm을 이용하여 vue2-echarts를 설치해준다.

npm install vue2-echarts

공식 홈페이지를 보니 vue2에서 vue-echarts를 사용하기 위해서는  @vue/composition-api를 설치해야 한다고 한다. 아래 명령어를 통해 설치해주자.

npm i -D @vue/composition-api

 

그 다음 vue파일을 하나 생성해주고 아래 소스를 집어넣어 실행시켜보면  아래와 같이 그래프가 잘 나올것이다!

<template>
  <v-chart class="chart" :options="option" />
</template>

<style >
.chart {
	width: 100%;
}
</style>

<script>
import ECharts from 'vue2-echarts/src/ECharts/ECharts.vue'

export default {
	components: {
		'v-chart': ECharts
	},
	data () {
		return {
			option: {
				title: {
					text: 'Report Graph',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['data1', 'data2']
				},
				toolbox: {
					show: true,
					feature: {
						restore: {
							title: 'restore'
						},
						saveAsimage: {
							title: 'Save As picture',
						}
					}
				},
				xAxis: {
					type: 'value',
					name: 'Interation',
				},
				yAxis: {
					type: 'value',
					name: 'value',
				},
				series: [
					{
						name: 'data1',
						type: 'line',
						data: [[0,0], [1,2], [2,3], [3,5], [4,6], [5,7]],
						markPoint: {
							data: [
								{type: 'max', name: 'max'},
							]
						},
						markLine: {
							data: [
								{type: 'average', name: 'avg'}
							]
						}
					},
					{
						name: 'data2',
						type: 'line',
						data: [[0,1], [1,3], [2,11], [3,7], [4,8], [5,9]],
						markPoint: {
							data: [
								{type: 'max', name: 'max'},
							]
						},
						markLine: {
							data: [
								{type: 'average', name: 'avg'},
								[{
									symbol: 'none',
									x: '90%',
									yAxis: 'max'
								}, {
									symbol: 'circle',
									label: {
										position: 'start',
										formatter: 'max'
									},
									type: 'max',
									name: 'max_line'
								}]
							]
						}
					}
				]
			}
		}
	}
}
</script>

그래프가 잘 출력된다.

---

참고링크

https://github.com/ecomfe/vue-echarts

GitHub - ecomfe/vue-echarts: Apache ECharts component for Vue.js.

https://kdeon.tistory.com/2

[Vue.js] vue-echarts를 사용해 chart 그리기

 

https://www.npmjs.com/package/vue2-echarts?activeTab=readme 

vue2-echarts