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

* EChart API 및 그래프 option set

https://echarts.apache.org/en/option.html#title

ECharts Documentation

* vue-echarts 설정

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

1. install vue-echarts 
2. import echart module -> 모든 ECharts extensions 사용을 위해 import 'echarts-gl' 추가
3. ECharts component 등록 -> 'v-chart'

ecomfe/vue-echarts

 

---

Line Graph example

 

• fixed data
• tooltip, legend, toolbox, markPoint, markLine 옵션 사용 (각 option 별 setting은 위 링크 참고하여 추가)
• markPoint - max
• markLine - max, avg (주석 참고)
• tooltip - saveAsImage(.png save)

 

 

 

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

<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
  width: 800px;
  height: 500px;
}
</style>

<script>
import Vue from 'vue'
import ECharts from 'vue-echarts'
import 'echarts-gl'


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:'Iteration',
        },
        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'},
                        //markLine custom
                        //max markline에 circle symbol + line
                        [{
                            symbol: 'none',
                            //line position
                            x: '90%', 
                            yAxis: 'max'
                        }, {
                            symbol: 'circle', //해당 data symbol
                            label: {
                                position: 'start', //line  start지점에
                                formatter: 'max' //표시할 name
                            },
                            type: 'max',
                            name: 'max_line'
                        }]
                    ]
                }
            }
        ]
      }
    }
  }
}
</script>

---

Scatter Graph example

• fixed data
• 축에 대한 splitLine  -> dashed
• x축 label 표시가 1간격으로 안되는 문제-> splitNumber 이용
• tooltip : item value
• markPoint : max
• 각 option별 style 적용

 

 

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

<style>
.echarts {
  width: 800px;
  height: 500px;
}
</style>

<script>
import Vue from 'vue'
import ECharts from 'vue-echarts'
import 'echarts-gl'

var data = [[1, 8.04],[2, 6.95],[3, 7.58],[4, 8.81],[5, 8.33],
[6, 9.96],[7, 7.24],[8, 4.26],[9, 10.84],[10, 4.82],]

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      option: {
        tooltip: {
            trigger: 'item',
        },
        xAxis: {
          type: 'value',
          name: 'trial#',
          splitLine: {
            lineStyle: {
                type: 'dashed'
            }
          },
          splitNumber: 10,
          nameTextStyle:{
              fontSize : 16
          }
        },
        yAxis: {
            type:'value',
            name:'accuracy',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            nameTextStyle:{
              fontSize : 16
            }
        },
        series: [{
            symbolSize: 15,
            data: data,
            markPoint: {
                symbol:'pin',
                data: [
                    {type: 'max', name: 'max'},
                ],
                itemStyle:{
                    color:'#3A1079'
                },
            },
            type: 'scatter'
        }]
      }
    }
  }
}
</script>

---