Echarts

devui 테마 스타일의 Echarts 차트예요. devui 테마와 기본적인 대응 이벤트를 감싸 놨어요.

출처: 문서

본문

사용 예시 -- 선 그래프

:::demo

<template>
  <d-chart :option="option" style="width: 100%;height: 400px"></d-chart>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const option = reactive({
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'line',
					snap: true
				}
			},
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}
			]
		});

    return {
      option,
    };
  },
});
</script>

:::

사용 예시 -- 코드 활동량 그래프

:::demo

<template>
	<div style="width: 100%;overflow: auto">
  	<d-chart :option="option" style="width: 820px;height: 200px"></d-chart>
	</div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const getVirtualData = (year) => {
			const date = +new Date(year + '-01-01').getTime();
			const end = +new Date(year + '-12-31').getTime();
			const dayTime = 3600 * 24 * 1000;
			const data = [];
			for (let time = date; time <= end; time += dayTime) {
				data.push([
					new Date(time).toISOString().split('T')[0],
					Math.floor(Math.random() * 20)
				]);
			}
			console.log(data)
			return data;
		}

		const option = ref({
			tooltip: {
				trigger: 'item',
				formatter: (param) => {
					console.log(param)
					return`<b>${param.value[0]}</b> <br/> ${param.value[1]}次提交`
				}
			},
			visualMap: {
				show: false,
				min: 0,
				max: 30,
				inRange: {
					color: ['#f5f5f5', '#beccfa', '#7693f5', '#526ecc', '#344899']
				}
			},
			calendar: {
				top: 'top',
				right: 20,
				left: 40,
				range: ['2022-01-01', '2022-12-31'],
				cellSize: 15,
				splitLine: {
					show: false
				},
				yearLabel: {
					show: false,
				},
				monthLabel: {
					nameMap: ['1月', '2月', '3月', '4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					position: 'end'
				},
				dayLabel: {
					firstDay: 1,
					fontSize: 10,
					nameMap: ['日', '一', ' ', ' ', '四', ' ', ' ']
				},
				itemStyle: {
					borderWidth: 4,
					borderRadius: 4,
					borderColor: '#fff'
				}
			},
			series: [
				{
					type: 'heatmap',
					coordinateSystem: 'calendar',
					data: getVirtualData('2022'),
					itemStyle: {
						borderRadius: 4
					}
				}
			]
		})

    return {
      option,
    };
  },
});
</script>

:::

DChart 파라미터

DChart 이벤트

더 알아보기 (Learn more)

echarts의 원본 option을 그대로 d-chart에 넘기면 devui 테마가 입혀진 차트가 그려져요. chartReady 이벤트로 echarts 인스턴스를 받아 세부 제어도 할 수 있어요.