折线图

雯雯木今天给大家分享下折线图的制作，缓解下作为程序员的疲劳，先给大家上个效果图;

 

body里的内容：

     <div id="con1" style=" width:640px; height:490px; color:#03F;"></div>

js代码：

 <script type="text/javascript" src="js/echarts-all.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                var imgsrc = new Array("详细信息0","详细信息1", "详细信息2", "详细信息3", "详细信息4", "详细信息5", "详细信息6", "详细信息7","详细信息8","详细信息9","详细信息10","详细信息11", "详细信息12", "详细信息13", "详细信息14", "详细信息15", "详细信息16", "详细信息17","详细信息18","详细信息19","详细信息20","详细信息21", "详细信息22", "详细信息23"); //详细信息数组
                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 += "   <p>   " + imgsrc[imgindex] + "  </p>  ";
                            return txt;
                        }


                    },
                    
                    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: ['00', '01', '02', '03', '04', '05', '06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'] //横坐标
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
name:'金额（元）',
                            axisLabel: {
                            formatter: '{value} ' //纵坐标单位
                            }

                        }
                    ],
                    series: [
                        {
                            name: '最高金额',
                            type: 'line',
smooth:true,
symbol:'emptyCircle', //图标形状
                            symbolSize:4,  //图标尺寸
/**/
itemStyle : {
   normal : {
                            color:'#049dd5',
lineStyle:{
   color:'#049dd5',
width:3,
type:'solid'
}
 }
 },
/**/
                            data: [3400, 1200,
                                {
                                    value: 5600,
                                    tooltip: {
                                        trigger: 'axis',
                                        formatter: function(params, ticket, callback) {


                                            var thistxt = "222";
                                            return thistxt;
                                        }
                                    }
                                },
                                2200, 5500, 3200, 1600,1800,7900,3900,2222,3333,1111,4444,5555,6666,5555,4444,3333,2222,1111,7777,8888,9999
                            ],
                           
                           
                        }
                    ]
                };
                chart1.setOption(option);
            });
        </script>

js库大家可以去官网下载，上面还有很多详细的讲解

http://echarts.baidu.com/index.html