xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/echarts.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/jquery.min.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                background: #360;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
                margin: 0;
            }
            .chart {
                height: 450px;
            }
            .by-dispatch-action {
                padding: 5px;
            }
        </style>

        <div class="by-dispatch-action">
            by dispatchAction:
            <button id="change-start-value">Change Start Value</button>
            <button id="change-end-value">Change Start Value</button>
            <button id="first-focus">First Focus</button>
        </div>

        <div id="main">
            <div class="chart" id="chart"></div>
        </div>

        <script>


        $.getJSON('./data/ec-star.json', function (data) {

            $('#first-focus').on('click', firstFocus);
            $('#change-start-value').on('click', changeStartValue);
            $('#change-end-value').on('click', changeEndValue);

            var myChart = echarts.init(document.getElementById('chart'));

            var minStartValue = '2013-06-06';
            var maxEndValue = '2017-10-17';

            var currStartValue = '2017-01-01';
            var currEndValue = maxEndValue;

            var option = {
                animationDurationUpdate: 3000,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    type: 'time',
                    boundaryGap: false,
                    axisLabel:{
                        textStyle:{
                            fontSize:14
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle:{
                            color:'#f7f7f7'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: 'Github Star',
                    nameGap: 30,
                    nameTextStyle: {
                        fontSize: 20
                    },
                    axisLabel: {
                        fontSize: 15
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color:'#f7f7f7'
                        }
                    }
                }],
                grid: {
                    top: 120,
                    left: 30,
                    right: 30,
                    bottom: 50,
                    containLabel: true
                },
                dataZoom: [{
                    id: 'dz',
                    type: 'inside',
                    xAxisIndex: 0,
                    startValue: currStartValue,
                    endValue: currEndValue,
                    minValueSpan: 3600 * 24 * 1000 * 10
                }, {
                    type: 'slider',
                    xAxisIndex: 0,
                    startValue: currStartValue,
                    endValue: currEndValue,
                    height: 20,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '90%',
                    minSpanValue: 3600 * 24 * 1000 * 10
                }],
                visualMap: {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 23000
                },
                series: [{
                    type: 'line',
                    name: 'Star',
                    lineStyle: {
                        normal: {
                            width: 4
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    showSymbol: false,
                    symbol: 'circle',
                    hoverAnimation: false,
                    symbolSize: 15,
                    sampling: 'average',
                    // smooth: true,
                    // symbol: 'none',
                    data: data
                }]
            };

            myChart.setOption(option);

            $(window).resize(function() {
                myChart.resize();
            })

            // Control -------------------------

            function changeStartValue(phase) {
                currStartValue = '2014-09-01';
                myChart.dispatchAction({
                    type: 'dataZoom',
                    id: 'dz',
                    startValue: currStartValue
                });
            }

            function changeEndValue(phase) {
                currEndValue = '2017-02-05';
                myChart.dispatchAction({
                    type: 'dataZoom',
                    id: 'dz',
                    endValue: currEndValue
                });
            }

            function firstFocus(phase) {
                currStartValue = minStartValue;
                currEndValue = '2013-11-06';
                myChart.dispatchAction({
                    type: 'dataZoom',
                    id: 'dz',
                    startValue: currStartValue,
                    endValue: currEndValue
                });
            }
        });

        </script>
    </body>
</html>