echarts温度折线统计图

echarts是百度一款统计图插件,本文通过echarts来制作未来一周内天气温度变化,折线图是一款非常不错的展示气温统计图,鼠标悬浮在节点上,tooltip的效果让你看的更详细。

JS代码

<script type="text/javascript"> 
    $(document).ready(function() { 
        var imgsrc = new Array("Image/1.png", "Image/2.png", "Image/1.png", "Image/2.png", "Image/1.png", "Image/2.png", "Image/1.png"); //图片路径数组 
        var chart1 = echarts.init(document.getElementById("con1")); //显示区域的id 
 
        option = { 
            title: { 
                text: '未来一周气温变化' //标题 
            }, 
            tooltip: { 
                trigger: 'axis', 
                padding: 10, 
                formatter: function(params, ticket, callback) { 
                    console.log(params[0].dataIndex); 
                    var imgindex = params[0].dataIndex; 
                    var txt = params[0].name + ":" + params[0].value + "<br/>"; 
                    txt += "<img src=" + imgsrc[imgindex] + " width=\"140\" >"; //添加对应的图片 
                    return txt; 
                } 
 
            }, 
            //   legend: { 
            //        data:['最高气温','最低气温'] 
            //    }, 
            toolbox: { 
                show: false, 
                feature: { 
                    mark: {show: true}, 
                    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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] //横坐标 
                } 
            ], 
            yAxis: [ 
                { 
                    type: 'value', 
                    scale: true, 
                    axisLabel: { 
                        formatter: '{value} °C' //纵坐标单位 
                    } 
                } 
            ], 
            series: [ 
                { 
                    name: '最高气温', 
                    type: 'line', 
                    data: [34, 12, 
                        { 
                            value: 56, 
                            tooltip: { 
                                trigger: 'axis', 
                                formatter: function(params, ticket, callback) { 
 
                                    var thistxt = "222"; 
                                    return thistxt; 
                                } 
                            } 
                        }, 
                        22, 55, 32, 10 
                    ], 
                    markPoint: { 
                        data: [ 
                            {type: 'max', name: '最大值'}, 
                            {type: 'min', name: '最小值'} 
                        ] 
                    }, 
                    markLine: { 
                        data: [ 
                            {type: 'average', name: '平均值'} 
                        ] 
                    } 
                } 
            ] 
        }; 
        chart1.setOption(option); 
    }); 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录