echarts温度折线统计图

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

分类：统计图 > 折线图难易：中级

查看演示下载资源下载积分： 20 积分

生成折线图区域，记得加上高度和宽度

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

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