echart动态加载数据之折线图

    //初始化echarts实例
    var goodsstock = echarts.init(document.getElementById('goodsstock'));
    goodsstock.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });
    //商品销售统计
    var option = {
            title:{
                text:'进销存统计'
            },
            tooltip : {
                trigger: 'axis'   //放在折线点的时候显示出相应x和y坐标相应的数据信息
            },
            legend:{
                data:['入库数量']
            },
            grid: {  
                left: '3%',  
                right: '4%',  
                bottom: '3%',  
                containLabel: true  
            }, //整个图表的跟父容器的间距
            xAxis: [{
                
            }],
            yAxis : {},
            series : [{
                name : '入库数量',
                type : 'line',
                itemStyle : {  
                    normal : {  
                        color:'#47b34f',  
                        lineStyle:{  
                            color:'#47b34f'  
                        }  
                    }//设置折线图中折线线条颜色和折线点颜色
                },
            }]
      };
   
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : contextpath + '/count/goodsstock',
            dataType : "json", //返回数据形式为json
            success : function(result) {
                if(result){
                    //初始化option.xAxis[0]中的data
                    option.xAxis[0].data=[];
                    for(var i=0;i

• 几个重点

• 1》放在折线点的时候显示出相应x和y坐标相应的数据信息

tooltip : { trigger: 'axis' },加入这个属性就可以显示

![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》设置折线图中折线线条颜色和折线点颜色

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