Echarts-折线图-多条线
//企业排名top5根据客车、货车
var optionTwo={
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: [],
right: '4%',
textStyle: {
fontSize: 12,
color: '#b0fcff'
}
},
grid: {
left: '8%',
right: '8%',
top:'12%',
bottom: '30%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine:{
lineStyle:{
color:'#053b4c'
}
},
axisTick:{
show:false
},
axisLabel: {
interval:0,
rotate:30,
textStyle: {
color: '#b0fcff'
}
},
splitLine:{
show:false
},
data: []
}],
yAxis: [{
/* type: 'value',
name: '单位（%）',*/
axisLine:{
show:false,
lineStyle:{
color:'#193b4e'
}
},
axisTick:{
show:false
},
axisLabel: {
textStyle: {
color: '#b0fcff'
}
},
splitLine:{
lineStyle:{
color:'#053b4c'
}
}
}],
series: [
]
};
function ajaxRunTwo(num){
var jg = num;
$.ajax({
async : false,
type: "POST",
url: "clyyqs/qymcTopFive/"+jg,
dataType: 'json',
success: function (data) {
optionTwo.xAxis[0].data=data.daysBetweenToStrArray;
var leg=[];
for(var i in data.topFiveQYK){
var ser = {
name: '',
type: 'line',
smooth: false,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echart.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(17,235,210, 0.2)'
}, {
offset: 0.5,
color: 'rgba(17,235,210, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
lineStyle:{
color:'#0000ff'
} ,
color: new echart.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(16,97,204,1)'
}, {
offset: 1,
color: 'rgba(17,235,210,1)'
}])
},
emphasis: {
color: 'rgb(0,196,132)',
borderColor: 'rgba(0,196,132,0.2)',
extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
borderWidth: 10
}
},
data: []
};
var score=[0,0,0,0,0,0,0];
// for(var ii in data.qymcByMCs){
for(var n in data.qymcByMCs[i]){
var mcs = data.qymcByMCs[i];
var mc = mcs[n];
for(var m in data.daysBetweenToStrArray){
if(data.daysBetweenToStrArray[m]==mc.COUNTDATE){
score[m]=mc.NM;
}
}
// }
/*if(data.qymcByMCs[ii].PG_NAME==data.sjzlpgNames[i]){
for(var m in data.tenDates){
if(data.tenDates[m]==data.dataQualitySjzlpgs[ii].PG_DATA){
score[m]=data.dataQualitySjzlpgs[ii].PG_SCORE;
}
}
}*/
}
//放入线的名称
ser.name=data.topFiveQYK[i].QYMC;
//放入线的数量
ser.data=score;
var col = randomColor()
ser.itemStyle.normal.lineStyle.color=col;
var l={
name:'',
textStyle:{color:""}
}
l.name = ser.name;
l.textStyle.color = col;
leg.push(l);
optionTwo.series.push(ser);
optionTwo.legend.data=leg;
}
chartTwo.setOption(optionTwo);
}
});
}
ajaxRunTwo(1);
$("#select1").change(function(){
chartTwo.clear();
optionTwo.series=[];
optionTwo.legend.data=[];
ajaxRunTwo($("#select1").val());
});
//随机颜色
function randomColor(){
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}数据：{"daysBetweenToStrArray":["2018-01-19","2018-01-20","2018-01-21","2018-01-22","2018-01-23","2018-01-24","2018-01-25"],"topFiveQYK":[{"QYMC":"湖北宜昌交运集团股份有限公司","NM":1375},{"QYMC":"荆州先行运输集团有限公司","NM":903},{"QYMC":"湖北神州运业集团有限公司","NM":818},{"QYMC":"汉川盛达客运有限公司","NM":634},{"QYMC":"鄂州市交通发展有限公司","NM":626}],"qymcByMCs":[[{"QYMC":"湖北宜昌交运集团股份有限公司","COUNTDATE":"2018-01-22","NM":359},{"QYMC":"湖北宜昌交运集团股份有限公司","COUNTDATE":"2018-01-25","NM":353},{"QYMC":"湖北宜昌交运集团股份有限公司","COUNTDATE":"2018-01-24","NM":333},{"QYMC":"湖北宜昌交运集团股份有限公司","COUNTDATE":"2018-01-23","NM":330}],[{"QYMC":"荆州先行运输集团有限公司","COUNTDATE":"2018-01-22","NM":242},{"QYMC":"荆州先行运输集团有限公司","COUNTDATE":"2018-01-23","NM":234},{"QYMC":"荆州先行运输集团有限公司","COUNTDATE":"2018-01-24","NM":229},{"QYMC":"荆州先行运输集团有限公司","COUNTDATE":"2018-01-25","NM":198}],[{"QYMC":"湖北神州运业集团有限公司","COUNTDATE":"2018-01-22","NM":224},{"QYMC":"湖北神州运业集团有限公司","COUNTDATE":"2018-01-23","NM":215},{"QYMC":"湖北神州运业集团有限公司","COUNTDATE":"2018-01-24","NM":214},{"QYMC":"湖北神州运业集团有限公司","COUNTDATE":"2018-01-25","NM":165}],[{"QYMC":"汉川盛达客运有限公司","COUNTDATE":"2018-01-22","NM":162},{"QYMC":"汉川盛达客运有限公司","COUNTDATE":"2018-01-25","NM":161},{"QYMC":"汉川盛达客运有限公司","COUNTDATE":"2018-01-23","NM":156},{"QYMC":"汉川盛达客运有限公司","COUNTDATE":"2018-01-24","NM":155}],[{"QYMC":"鄂州市交通发展有限公司","COUNTDATE":"2018-01-22","NM":168},{"QYMC":"鄂州市交通发展有限公司","COUNTDATE":"2018-01-23","NM":155},{"QYMC":"鄂州市交通发展有限公司","COUNTDATE":"2018-01-24","NM":152},{"QYMC":"鄂州市交通发展有限公司","COUNTDATE":"2018-01-25","NM":151}]]}多条线：