Echarts-折线图-多条线

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37279783/article/details/79169998
//企业排名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}]]}
多条线:

猜你喜欢

转载自blog.csdn.net/qq_37279783/article/details/79169998