echart 折线图

时间:2024-03-20 07:11:19

var colWlEchart=echarts.init($("#colWlTableChild2")[0]);
colWlEchart.setOption(getOption(colWlData,[‘原始线路’,‘升级线型1’,‘升级线型2’],colYLineData,“轮”,“条”,0),true);
function getOption(data,legend,category,xunit,yunit,index){
//折线图Option
var option = {
backgroundColor: ‘rgba(30, 90, 120,0.5)’, //背景颜色保存图片要加这个不然保存的 图片不全
toolbox: {
show: true,
feature: {
saveAsImage: { //保存图片
iconStyle:{
opacity:“1”, .//保存图标的透明度
borderColor:’#5cb85c’ //保存图标的颜色
},
show:true
}
}
},
tooltip: {
trigger: ‘axis’,
formatter:function(params){
var res = “第” + params[0].axisValue + xunit +"
";
for(var i =0;i<params.length;i++){
res = res + params[i].seriesName + " : " + parseFloat(params[i].value).toFixed(index) + yunit +"
";
}
return res;
}
},
legend: {
data:legend,
textStyle: {
color: ‘white’
}
},
grid: {
left: ‘1%’,
right: ‘6%’,
bottom: ‘3%’,
containLabel: true
},
xAxis: {
name:!!xunit ? xunit : “”,
type: ‘category’,
boundaryGap: false,
data: category,
axisLine: {
lineStyle: {
type: ‘solid’,
color: ‘white’,//左边线的颜色
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: ‘white’,//坐标值得具体的颜色
}
},
axisTick:{
lineStyle:{color:‘white’} // x轴刻度的颜色
},
},
yAxis: {
name:!!yunit ? yunit : “”,
type: ‘value’,
axisLine: {
lineStyle: {
type: ‘solid’,
color: ‘white’,//左边线的颜色
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: ‘white’,//坐标值得具体的颜色
}
}
},
series: data
};
return option;
}

var colYLineData = [‘1’,‘2’,‘3’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’,‘10’,‘11’,‘12’,‘13’,‘14’,‘15’,‘16’,‘17’,‘18’,‘19’];
//每轮线路统计折线图数据集合
var linksData0 = new Array();
var linksData1 = new Array();
var linksData2 = new Array();
//线路统计
var count0 = 0;
var count1 = 0;
var count2 = 0;
temp.forEach(function(value,i){
colWlTable += “”+ value + “”;
if(i!=0){
if (value == “0”){
money0+=parseFloat(line_Length.data[y].col14)*6;
count0++;
}else if(value == “1”){
money1+=parseFloat(line_Length.data[y].col14)*8;
count1++;
}else{
money2+=parseFloat(line_Length.data[y].col14)*10;
count2++;
}
y++;
}
});
linksData0.push(count0);
linksData1.push(count1);
linksData2.push(count2);
//折线数据处理
var colWlChild1={
name:“原始线路”,
type:‘line’,
itemStyle:{normal:{color:’#00fdc5’}},
data:linksData0
};
var colWlChild2 = {
name:“升级线型1”,
type:‘line’,
itemStyle:{normal:{color:’#F29700’}},
data:linksData1
};
var colWlChild3 = {
name:“升级线型2”,
type:‘line’,
itemStyle:{normal:{color:’#02B0ED’}},
data:linksData2
};
colWlData[0] = colWlChild1;
colWlData[1] = colWlChild2;
colWlData[2] = colWlChild3;
//显示
echart 折线图