js曲线图统计图表插件_jQuery天气统计图表控件

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

引入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