ECharts2绘制支持IE6,7,8的可缩放折线图

最新推荐文章于 2021-08-12 18:07:19 发布

Jinx_Q

最新推荐文章于 2021-08-12 18:07:19 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： canvas echarts

知识本就需要传播，如果你需要请自行转走。

本文链接：https://blog.csdn.net/medivhq/article/details/68946067

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

原理都是canvas，但是IE6,7不支持canvas，其使用了excanvas支持了IE中的vml标签；代码如下：
js文件可以在bootcdn上找，本文用到了：

<script src="https://cdn.bootcss.com/echarts/2.2.3/echarts-all.js"></script>

引入即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echart.js绘制可缩放折线图</title>
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="picturePlace" style="height: 400px;"></div>
<script src="../js/echarts-all.js" ></script>
<script>
    /* example/www2/js/dist/echarts-all.js  下载的官方示例的原js文件地址 */
    var myChart = echarts.init(document.getElementById('picturePlace'));
    var _data = [{"date":1491032492000,"nums":1,"sort":"2017-04-01 15:20"},{"date":1491032668000,"nums":0,"sort":"2017-04-01 15:22"},{"date":1491032848000,"nums":2,"sort":"2017-04-01 15:23"},{"date":1491032910000,"nums":71,"sort":"2017-04-01 15:24"},{"date":1491033088000,"nums":3,"sort":"2017-04-01 15:25"},{"date":1491033151000,"nums":59,"sort":"2017-04-01 15:26"},{"date":1491033269000,"nums":59,"sort":"2017-04-01 15:27"},{"date":1491033388000,"nums":59,"sort":"2017-04-01 15:28"},{"date":1491033522000,"nums":59,"sort":"2017-04-01 15:29"},{"date":1491033634000,"nums":58,"sort":"2017-04-01 16:0"},{"date":1491033753000,"nums":59,"sort":"2017-04-01 16:1"},{"date":1491033869000,"nums":59,"sort":"2017-04-01 16:2"},{"date":1491033987000,"nums":59,"sort":"2017-04-01 16:3"},{"date":1491034108000,"nums":59,"sort":"2017-04-01 16:4"},{"date":1491034228000,"nums":59,"sort":"2017-04-01 16:5"},{"date":1491034349000,"nums":58,"sort":"2017-04-01 16:6"},{"date":1491034468000,"nums":62,"sort":"2017-04-01 16:7"},{"date":1491034587000,"nums":56,"sort":"2017-04-01 16:8"},{"date":1491034707000,"nums":59,"sort":"2017-04-01 16:9"},{"date":1491034828000,"nums":59,"sort":"2017-04-01 16:10"},{"date":1491034948000,"nums":62,"sort":"2017-04-01 16:11"},{"date":1491035068000,"nums":58,"sort":"2017-04-01 16:12"},{"date":1491035190000,"nums":56,"sort":"2017-04-01 16:13"},{"date":1491035310000,"nums":59,"sort":"2017-04-01 16:14"},{"date":1491035427000,"nums":59,"sort":"2017-04-01 16:15"},{"date":1491035548000,"nums":58,"sort":"2017-04-01 16:16"},{"date":1491035668000,"nums":59,"sort":"2017-04-01 16:17"},{"date":1491035788000,"nums":59,"sort":"2017-04-01 16:18"},{"date":1491035909000,"nums":59,"sort":"2017-04-01 16:19"},{"date":1491036033000,"nums":32,"sort":"2017-04-01 16:20"}];
    var dataArray = [];
    var now = new Date();
    for(var i in _data){
        dataArray.push([now.setTime(_data[i].date),_data[i].nums]);
    }
    console.log(_data)
    var option = {
        title : {
            text : '车流量折线图',
            subtext : ''
        },
        tooltip : {
            trigger : 'item',
            formatter : function(params) {
                var date = new Date(params.value[0]);
                data = date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
                        + date.getDate() + ' ' + date.getHours() + ':'
                        + date.getMinutes();
                return data + '<br/>车流量：' + params.value[1];
            }
        },
        toolbox : {
            show : true,
            feature : {
                mark : {
                    show : false
                },
                dataView : {
                    show : false,
                    readOnly : false
                },
                restore : {
                    show : false
                },
                saveAsImage : {
                    show : true
                }
            }
        },
        dataZoom : {
            show : true,
            start : 0
        },
        legend : {
            data : [ '图例' ]
        },
        grid : {
            y2 : 80
        },
        xAxis : [ {
            type : 'time'
            //splitNumber : 5
        } ],
        yAxis : [ {
            type : 'value'
        } ],
        series : [ {
            name : '图例',
            type : 'line',
            showAllSymbol : true,
            symbolSize : 3,//气泡大小
            data : dataArray
        } ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

示例图：
这里写图片描述

Jinx_Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts2绘制支持IE6,7,8的可缩放折线图

原理都是canvas，但是IE6,7不支持canvas，其使用了excanvas支持了IE中的vml标签；代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echart.js绘制可缩放折线图</title> <!--[if lt IE 9]> <script src="
复制链接

扫一扫