echarts 折线图x轴不等分+拐点有箭头

效果图：

 

不等分需要用到属性：connectNulls:true 思路：x轴间隔需用null占位，然后把为null的数据连线就可以

 

var xData = ['0点','1点','2点','', '4点','5点','6点','', '8点','9点','10点','11点','12点','13点','14点'];
var r = [-0.23, 1, 1, "", -90, 0,1,"",1, 0, 0, 191, 234, 290, -330]
var serialData = [120, 132, 101, null, 90, 432,421,null,230, 210, 182, 191, 234, 290, 330]//需要间隔的地方用null
var down = 'path://M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z'
var up = 'path://M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z'
           
option = {
               backgroundColor:'#121222',
               title : {
                  text: 'x轴不等分+拐点有箭头',
                  x:20,
                  y:10,
                  textStyle: {//主标题的属性
                     color: '#FFFFFF',//颜色
                     fontSize: 16,//大小
                     fontWeight:400,//
                  },
               },
                  grid: {
                        left: '5%',
                        right: '10%',
                        top: '20%',
                        bottom: '15%',
                        containLabel: true,
                  },
                  tooltip: {
                        show: true,
                        trigger: 'axis',
                  },
                  xAxis: [
                        {
                     type: 'category',
                     axisLine: {
                        show: true,
                        lineStyle: {
                        color: '#FFFFFF',
                        },
                     },
                     axisTick: {
                        show: false,
                     },
                     axisLabel: {
                        color: '#FFFFFF',
                        //margin: 6,
                     },
                     splitLine: {
                        show: false,
                     },
                     boundaryGap: ['5%', '5%'],
                     data: xData,
                  },
                  ],
                     yAxis: [
                  {
                     type: 'value',
                     axisLine: {
                        show: true,
                        lineStyle: {
                        color: '#FFFFFF',
                        },
                     },
                     axisLabel: {
                        color: '#FFFFFF',
                        margin: 6,
                     },
                     splitLine: {
                        lineStyle: {
                        color: '#EBECF0',
                        type: 'dashed',
                        width: 0.2,
                        },
                     },
                  },
                  ],
                  
                  series: [
                        {
                           
                        type: 'line',
                        label: {
                           show: true,
                           position: "top",
                        },
                        connectNulls:true,//为null的数据连线
                        symbol: function(data,params){
                           if(r[params.dataIndex]>0){
                              return up
                           }else if(r[params.dataIndex]<0){
                              return down
                           }else{
                              return ''
                           }
                        },
                        symbolSize: [10, 20],
                        symbolOffset:function(value,params){
                           if(r[params.dataIndex]>0){
                              return [0, -10]
                           }else if(r[params.dataIndex]<0){
                              return [0, 10]
                           }else{
                              return [0, 0]
                           }
                        },
                        itemStyle:{
                           normal:{
                              color:function(params){
                                 if(r[params.dataIndex]>0){
                                       return '#026DFF'
                                 }else if(r[params.dataIndex]<0){
                                       return '#56CBFC'
                                 }
                              }
                           }
                        },
                        symbolPosition: 'end',
                        lineStyle:{
                           color: '#56CBFC',
                           // 线条不选中时候的效果
                           width: 3,
                        },
                        emphasis: {
                           // 选中的时候的效果
                           lineStyle: {
                              color: '#56CBFC',
                              width: 3,
                           }
                        },
                        data: serialData,
                        },
                  ],
               };