当前位置: 代码迷 >> 综合 >> Echarts-折线图-多条线
  详细解决方案

Echarts-折线图-多条线

热度:45   发布时间:2023-11-03 08:31:00.0
//企业排名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}]]}
多条线:
  相关解决方案