Echarts-折线图-单条线

╰+攻爆jí腚メ 2023-10-17 17:57 14阅读 0赞

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"]}

单条线：

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-折线图-单条线

var optionOne={ tooltip: {

╰+攻爆jí腚メ/ 2023年10月17日 17:57/ 0 赞/ 15 阅读

相关 Echarts-折线图-多条线

//企业排名top5根据客车、货车 var optionTwo={

川长思鸟来/ 2023年10月17日 17:57/ 0 赞/ 55 阅读

相关 Echarts 折线图实现多条折线

官方例子：[Examples - Apache ECharts (incubating)][Examples - Apache ECharts _incubating] 官方

妖狐艹你老母/ 2022年12月25日 00:51/ 0 赞/ 352 阅读

相关 Echarts+ajax实现多条折线图

需求：统计不同的时间段里面，监测到的血压数据，分别是高血压的数据和低血压的数据，需要使用两条折线图表示出来，这里就要用到了Echarts的多条折线图的demo了，并且使用

深碍√TFBOYSˉ_/ 2022年12月23日 00:50/ 0 赞/ 173 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 291 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 329 阅读

相关 echarts教程（三）：配置多条折线图

多条折线非常简单，只需要在series中写多个元素，并都指定type为line即可 option = { xAxis: {

忘是亡心i/ 2022年10月29日 15:24/ 0 赞/ 462 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 374 阅读

相关 echarts折线图多条线不同的线不同的的单位

JS代码： opt3=\{ grid:\{ top:50, right:

桃扇骨/ 2022年01月23日 12:39/ 0 赞/ 1212 阅读

相关 echarts 折线图多条数据为0

问题：本身想显示多条折线，但是由于其中一条(A)数据一年中12个月的值为0，另外一条（B）数据有数据，显示的样式只有另外一条样式，鼠标点击折线图，显示的数据是两个数据，另

╰半橙微兮°/ 2021年09月29日 08:50/ 0 赞/ 502 阅读