//初始化echarts實(shí)例
    var goodsstock = echarts.init(document.getElementById('goodsstock'));
    goodsstock.showLoading({
        text: '正在努力的讀取數(shù)據(jù)中...',    //loading話術(shù)
    });
    //商品銷(xiāo)售統(tǒng)計(jì)
    var option = {
            title:{
                text:'進(jìn)銷(xiāo)存統(tǒng)計(jì)'
            },
            tooltip : {
                trigger: 'axis'   //放在折線點(diǎn)的時(shí)候顯示出相應(yīng)x和y坐標(biāo)相應(yīng)的數(shù)據(jù)信息
            },
            legend:{
                data:['入庫(kù)數(shù)量']
            },
            grid: {  
                left: '3%',  
                right: '4%',  
                bottom: '3%',  
                containLabel: true  
            }, //整個(gè)圖表的跟父容器的間距
            xAxis: [{
                
            }],
            yAxis : {},
            series : [{
                name : '入庫(kù)數(shù)量',
                type : 'line',
                itemStyle : {  
                    normal : {  
                        color:'#47b34f',  
                        lineStyle:{  
                            color:'#47b34f'  
                        }  
                    }//設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色
                },
            }]
      };
   
        $.ajax({
            type : "post",
            async : false, //同步執(zhí)行
            url : contextpath + '/count/goodsstock',
            dataType : "json", //返回?cái)?shù)據(jù)形式為json
            success : function(result) {
                if(result){
                    //初始化option.xAxis[0]中的data
                    option.xAxis[0].data=[];
                    for(var i=0;i<result.length;i++){
                      option.xAxis[0].data.push(result[i].goods_name);
                    }
                    //初始化option.series[0]中的data
                    option.series[0].data=[];
                    for(var i=0;i<result.length;i++){
                      option.series[0].data.push(result[i].count);
                    }
                    goodsstock.hideLoading();    //隱藏加載動(dòng)畫(huà)
                    goodsstock.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("圖表請(qǐng)求數(shù)據(jù)失敗啦!");
            }
        })

• 幾個(gè)重點(diǎn)

• 1》放在折線點(diǎn)的時(shí)候顯示出相應(yīng)x和y坐標(biāo)相應(yīng)的數(shù)據(jù)信息

tooltip : { trigger: 'axis' },加入這個(gè)屬性就可以顯示

![QQ截圖20170823171315.png](http://upload-images.jianshu.io/upload_images/2869463-a075146f786619f4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 

• 2》修改圖表的跟父容器的間距

grid: {  
  left: '3%',  
  right: '4%',  
  bottom: '3%',  
  containLabel: true    
 }

• 3》設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色

 itemStyle : {  
                    normal : {  
                        color:'#47b34f',  
                        lineStyle:{  
                            color:'#47b34f'  
                        }  
                    }
                },