Echarts-折线图-多条线

川长思鸟来 2023-10-17 17:57 41阅读 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}]]}

多条线：