echart折线图删除_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

option.xAxis[0].data.push(result[i].goods_name);

}

//初始化option.series[0]中的data

option.series[0].data=[];

for(var i=0;i

option.series[0].data.push(result[i].count);

}

goodsstock.hideLoading(); //隐藏加载动画

goodsstock.setOption(option);

}

},

error: function(errorMsg) {

alert("图表请求数据失败啦!");

}

})

几个重点

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

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


2》修改图表的跟父容器的间距

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

}

3》设置折线图中折线线条颜色和折线点颜色

itemStyle : {

normal : {

color:'#47b34f',

lineStyle:{

color:'#47b34f'

}

}

},