js曲线图统计图表插件_jQuery天气统计图表控件
2015-12-07 12:40:29  By: dwtedx

一个简单的js脚本代码、使用了tooltip的统计图插件、主要实现了气温变化折线图的效果、另外还使用了tip功能、当鼠标放到统计图上面的时候会显示相应位置的详细天气情况、非常不错的实例、可以很方便的融入到自己项目里面去、另外最下面有Demo的下载地址、以下为效果图

js统计图表


引入JS文件

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/echarts-all.js" type="text/javascript"></script> 


JS代码

$(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);
});


简单的HTML代码

<center>
    <div id="con1" style=" width:1000px; height:800px; border:red solid 1px;"></div>
</center>


源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1qX4Wa4k 密码: bjy3

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+