echart.js绘制可缩放折线图

来源：互联网发布：淘宝美工风格有哪些编辑：程序博客网时间：2024/05/18 01:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>echart.js绘制可缩放折线图</title>    <script src="../js/esl.js"></script>    <script>        var json = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60], ["2000-07-25", 44], ["2000-07-26", 127], ["2000-07-27", 114], ["2000-07-28", 86], ["2000-07-29", 73], ["2000-07-30", 52]];    </script></head><body><div id="picturePlace" style="height: 400px;"></div><script type="text/javascript">    // 路径配置    require.config({        paths: {            'echarts': '../js/echarts.min',//js文件路径        }    });    require(            [                'echarts',            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('picturePlace'));                myChart.setOption(option = {                    title: {                        text: '车流量'//左上角标题                    },                    tooltip: {                        trigger: 'axis'                    },                    xAxis: {                        data: json.map(function (item) {                            return item[0];//x轴数据，取数组的第一个元素                        })                    },                    yAxis: {                        splitLine: {                            show: false                        }                    },                    toolbox: {                        left: 'center',                        feature: {                            dataZoom: {                                yAxisIndex: 'none'                            },                            restore: {},                            saveAsImage: {}                        }                    },                    dataZoom: [{                        startValue: '2014-06-01'                    }, {                        type: 'inside'                    }],                    visualMap: {//右上方显示块                        top: 10,                        right: 10,                        pieces: [{                            gt: 0,                            lte: 50,                            color: '#096'                        }, {                            gt: 50,                            lte: 150,                            color: '#ffde33'                        }, {                            gt: 100,                            lte: 250,                            color: '#ff9933'                        }, {                            gt: 150,                            lte: 350,                            color: '#cc0033'                        }, {                            gt: 200,                            lte: 450,                            color: '#660099'                        }, {                            gt: 300,                            color: '#7e0023'                        }],                        outOfRange: {                            color: '#999'                        }                    },                    series: {                        name: '车流量',                        type: 'line',                        data: json.map(function (item) {                            return item[1];//x轴数据，取数组的第二个元素                        }),                        markLine: {                            silent: true,                            data: [{                                yAxis: 50                            }, {                                yAxis: 150                            }, {                                yAxis: 250                            }, {                                yAxis: 350                            }, {                                yAxis: 450                            }]                        }                    }                });            }    );</script></body></html>
效果图如下：
这里写图片描述
代码下载地址：https://github.com/Jinx009/WebTestFils 自行找注释找到相应的代码文件
CSDN下载地址：http://download.csdn.net/detail/wow4464/9775067
0 0