Echarts-折线图-单条线

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37279783/article/details/79169941

 var optionOne={
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: '#57617B'
                                }
                            },
                            formatter: function(params){
                               return params[0].name+"<br/>"+params[0].value+"辆";
                            }
                        },
                        legend: {
                            icon: 'rect',
                            itemWidth: 14,
                            itemHeight: 5,
                            itemGap: 13,
                            data: [],
                            right: '4%',
                            textStyle: {
                                fontSize: 12,
                                color: '#333333'
                            }
                        },
                        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: '#333333'
                                }
                            },
                            splitLine:{
                                show:false
                            },
                            data: []
                        }],
                        yAxis: [{
                            axisLine:{
                                show:false,
                                lineStyle:{
                                    color:'#193b4e'
                                }
                            },
                            axisTick:{
                                show:false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#333333'
                                }
                            },
                            splitLine:{
                                lineStyle:{
                                    color:'#053b4c'
                                }
                            }
                        }],
                        series: [
                         ]
                    };
                   $.ajax({
                      async : false,
                      type: "POST",
                      url: "clyyqs/clslqs",      //通过数据源id获取自定义剖析数据
                      dataType: 'json',
                      success: function (data) {
                         optionOne.xAxis[0].data=data.sevenDays;
                         var leg=[];
                            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:'#333333'
                                             } ,
                                        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.clslqss){
                                  for(var m in data.sevenDays){
                                     if(data.sevenDays[m]==data.clslqss[ii].COUNTDATE){
                                        score[m]=data.clslqss[ii].SL;
                                     }
                                  }
                            }
//                          ser.name=data.sjzlpgNames[i];
                            ser.data=score;
                            
                            var col ="#333333";
                            ser.itemStyle.normal.lineStyle.color=col;
                            var l={
                               name:'',
                               textStyle:{color:""}  
                            }
//                          l.name = ser.name;
                            l.textStyle.color = col;
                            leg.push(l);
                            optionOne.series.push(ser);
                            optionOne.legend.data=leg;
                         
                         chartOne.setOption(optionOne);
                      }
                   });

数据：{"clslqss":[{"SL":16479,"COUNTDATE":"2018-01-25"},{"SL":18992,"COUNTDATE":"2018-01-24"},{"SL":20479,"COUNTDATE":"2018-01-22"},{"SL":19401,"COUNTDATE":"2018-01-23"}],"sevenDays":["2018-01-19","2018-01-20","2018-01-21","2018-01-22","2018-01-23","2018-01-24","2018-01-25"]}

单条线：