eChart Sample 1

by Mike Rawling

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main2" style="height: 500px; border: 1px solid rgb(204, 204, 204); padding: 10px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);"></div>
<div id="main" style="height: 500px; border: 1px solid rgb(204, 204, 204); padding: 10px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);"></div>

JavaScript

// (참조) eChart, HighCharts
// http://cho2.tistory.com/entry/EChart-%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Echart-%EC%A0%95%EB%A6%AC
// # EChart 차트 라이브러리. E-chart 정리
// https://github.com/ecomfe/echarts/blob/master/test/custom.html
//   customize 예제
//-------------------------------------------- [샘플]
// http://jsfiddle.net/xavipolo/bbusyrc6/
//   일반 jsfiddle.net
// http://blog.hkwon.me/draw-korean-map-chart-with-geojson/
//   # GeoJSON으로 대한민국 시군구읍면동 맵차트 그리기
//   echarts 예제
//--------------------------------------------
// jsfiddle 용 JS 를 찾는 경우
// https://cdnjs.com/
// https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js
//-------------------------------------------- [공식]
// https://ecomfe.github.io/echarts-doc/public/en/api.html
(function() {
var myChart = echarts.init(document.getElementById('main'));

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: '라인 진행 차트'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: true
        }
    },
    series: [{
        name:...