echars折现走势图

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<style>
    .selbox{
        width:100%;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
    }
    #sel{
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 4px;
    }
</style>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<div class="selbox">
    <select name="" id="sel">
        <option value="1">查询近一个月</option>
        <option value="2">查询近三个月</option>
        <option value="3">查询近半年</option>
    </select>
</div>
<!-- ECharts单文件引入 -->
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
//            echarts: 'http://echarts.baidu.com/build/dist'
            echarts: '../echarts-2.2.7/build/dist'
        }
    });
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/bar'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                $.when(
                        $.ajax({
                            url: '1.json',
                            data: {}
                        })
                ).then(function (data) {
                    console.log(data)
                    var timeArr = [];
                    var priceArr = [];
                    var name = data[0].quoteName;
                    var subtext = new Date(data[0].quoteDate);
                    var year = subtext.getFullYear();
                    $.each(data, function () {
                        var date = new Date(this.quoteDate);
                        var year = date.getFullYear();
//                        console.log(date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate())
                        timeArr.unshift((date.getMonth() + 1) + "/" + date.getDate());
                        priceArr.unshift(this.marketPrice);
                    });
                    console.log(timeArr);
                    console.log(priceArr);
                    echars(name,year,timeArr,priceArr)
                    function echars(name,year,timeArr,priceArr){
                    option = {
//                    backgroundColor:'#000',
                        title: {
                            x: 'left',
                            text: name+'sadasd车价变化',
                            subtext: year + "年",
                            subtextStyle: {
                                color: '#000',          // 副标题文字颜色
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['车价']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {
                                    show: false,
                                    title: {
                                        mark: '辅助线开关',
                                        markUndo: '删除辅助线',
                                        markClear: '清空辅助线'
                                    },
                                    lineStyle: {
                                        width: 2,
                                        color: '#1e90ff',
                                        type: 'dashed'
                                    }
                                },
                                dataZoom: {
                                    show: true,
                                    title: {
                                        dataZoom: '区域缩放',
                                        dataZoomReset: '区域缩放后退'
                                    }
                                },
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: timeArr
//                            data:[1231231,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                            }
                        ],
                        yAxis: [
                            {
//                            min:200000,
//                            max:500000,
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} 元'
                                }

                            }
                        ],
                        /*   yAxis: {
                         min:200000,
                         max:400000,
                         axisLabel:{
                         formatter: function (value) {
                         var texts = [];
                         if(value==200000){
                         texts.push('200000');
                         }
                         else if (value <=300000) {
                         texts.push('好');
                         }
                         else if (value<= 400000) {
                         texts.push('很好');
                         }
                         else if(value<= 500000){
                         texts.push('非常好');
                         }
                         else{
                         texts.push('完美');
                         }
                         return texts;

                         }
                         }
                         },*/
                        calculable: false,
                        series: [
                            {
                                name: '车价',
                                type: 'line',
                                data: priceArr,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
//                        {
//                            name: '最低气温',
//                            type: 'line',
//                            data: [1, -2, 2, 5, 3, 2, 0],
//                            markPoint: {
//                                data: [
//                                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
//                                ]
//                            },
//                            markLine: {
//                                data: [
//                                    {type: 'average', name: '平均值'}
//                                ]
//                            }
//                        }
                        ]
                    };
                    }
                    // 为echarts对象加载数据
                    myChart.setOption(option);


                    $("#sel").change(function () {
                        var val=$("#sel").val();
                        var url='1.json';
                        if(val==1){

                        }else if(val==2){

                        }else if(val==3){

                        }
                        myChart.clear();
                        $.when(
                                $.ajax({
                                    url: url,
                                    data: {}
                                })
                        ).then(function (data) {
                            var timeArr = [];
                            var priceArr = [];
                            var name = data[0].quoteName;
                            var subtext = new Date(data[0].quoteDate);
                            var year = subtext.getFullYear();
                            $.each(data, function () {
                                var date = new Date(this.quoteDate);
                                var year = date.getFullYear();
                                timeArr.unshift((date.getMonth() + 1) + "/" + date.getDate());
                                priceArr.unshift(this.marketPrice);
                            });
                            echars(name,year,timeArr,priceArr);
                            myChart.setOption(option);
                        })

                    })
                });

            }
    );

</script>
<script>

</script>
</body>
猜你喜欢
