1.官网下载echart.min.js
<script type="text/javascript" src="../js/echarts.min.js"></script>
2. html
<div id="chart" style="min-width: 265px; height: 280px; overflow: auto;"></div>
3.script渲染图表 接收后台返回的数据
var keyArr=["订单","裁剪","入库","工票工段1","工票工段2","工票工段3"]
var ValueArr=[90,90,50,0,0,0]
var Chart= echarts.init(document.getElementById('chart'), 'shine');
var i = 0;
var color =['#ff829d', '#ffb266', '#5eb5ef','#ffd778','#6fcdcd','#ff829d', '#ffb266', '#5eb5ef']
Chart.setOption({
backgroundColor: "#fff",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(210,219,238,0.2)"
}
},
},
xAxis: {
type: "value",
axisLine: {
show: false,
},
// max: 4000,
},
yAxis: {
data:keyArr.reverse(),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
type: 'category',
minInterval: 1,
},
grid: {
left: "0%",
// right: "4%",
// bottom: "3%",
top:'2%',
containLabel: true
},
series : function(){ //动态数据
var serie=[];
var legend=['g'];
var data=ValueArr.reverse();
for ( var k = 0; k < legend.length; k++) {
var item = {
type:'bar',data:data,
barMaxWidth: 30,
itemStyle: {
barBorderRadius: [10, 10, 0, 0],
color: function(){
return color[i++];
}
},
};
serie.push(item); // 添加对象
}
return serie; //返回组装好的数据
}()
})