angularJs2使用eCharts,折线散点组合图

1 篇文章 0 订阅
1 篇文章 0 订阅
option = {
    title: {
      x: 'center',
      y: 0
    },
    tooltip:{
      position:'inside',
      formatter: function(params) {
        if(params.value[1] == undefined){
          console.log(params)
          return params.name + "</br>" +params.seriesName + "</br>" + params.value;
        }else if(params.value[0] !=undefined&&params.value[1] !=undefined&&params.value[2] !=undefined) {
          return "调用账户:" + params.value[2] + "</br>" +
            "调用时间:" + params.value[0] +
            "<br>响应时长:" + params.value[1] + "毫秒</br>";
        }
      }
    },
    dataZoom : [],
    xAxis: [{
      name:'时间',
      type: 'category',
      axisLabel: {rotate: 45},
      data:this.data1,
      boundaryGap: false
    },{
      type: 'time',
      name: '时间',
      show:false

    }],
    yAxis: {
      name:'平均响应时长(毫秒)',
      axisLabel: {
        formatter: '{value} 毫秒'
      }
    },
    series: [
      {
        name:'平均响应时长(毫秒)',
        smooth:true,
        data: [/*12,13,14,15,16,17,18,21,27,26,25,24,24,12,23,34,23,12,21,22,25,16,27,10*/],
        type: 'line',
        markLine:{
          data:this.lineTime
        }
      },
      {
        name:'响应时长(毫秒)',
        symbolSize: 5,
        xAxisIndex:1,
        data:[/*['2018-12-13 16:12:08',15,'张三']*/],
        type: 'effectScatter',
        itemStyle: {normal: {color: '#f1c232'}},
      },
      {
        name:'响应',
        type:'line',
        symbolSize: 0,
        xAxisIndex:1,
        data:[
          // {name:'2018-12-13 00:00:00', value:['2018-12-13 00:00:00', 0]},
          // {name:'2018-12-14 00:00:00', value:['2018-12-14 00:00:00', 0]}
        ]
      }
    ]
  };


setData(){
    let xTime = [];//x轴的时间戳
    let response_time = [];//平均响应时长
    let func = [];//功能明细
    let sTime = "";//假x轴开始时间
    let eTime = "";//假x轴结束
    let xTime1 = [];//固定隐藏x轴的散点图
    let zoom = [{
         xAxisIndex:[0,1],
         show: true,
         start: 60,
         end: 100,
         height:20
         // handleSize: 8
       }];

    for(let i =0;i<10;i++){
        let x = (new data()).getTime() - 3600 * i;//x自己转换一下,转换成字符串时间
        let y = Math.random() * 100;
        let z = '测试名称'+ i;
        func.push([x, y,z]);
        response_time.push(y);
        if(i==0){
            xTime1.push({name:x,value:[x,0]});
            sTime = x;
        }
        if(i == 9){
            xTime1.push({name:x,value:[x,0]});
            eTime  = x;
        }
    }

     this.option0.series[0].data = response_time;
       this.option0.series[1].data = func;
       this.option0.series[2].data = xTime1;
       this.option0.dataZoom = zoom;
      this.lineTime.push({yAxis :Math.random() * 1000,
         symbol:"circle",
         symbolSiz:5});
       this.chartInstance1.hideLoading();
       this.chartInstance1.clear();
       this.chartInstance1.setOption(this.option0);
}

简单的说一下逻辑:(包括后续改进计划)

最开始的初衷是散点图跟折线图是分开的,想把他弄在一起显示,折线图的x轴坐标也是时间字符串,只是想根据不同方式展示x轴坐标,因此做了个第二个x轴类型为time并隐藏,以此来实现折线图跟散点图的重合,单用time时间轴会根据散点图的开始、结束时间显示,导致散点跟折线图的时间对不上,因此在time类型的x轴中加入以折线x轴的第一个值、最后一个值隐藏显示作为散点区间的开始和结束。datazoom是拖动控件,这个可用可不用。后续还是考虑只用一个time类型的x轴实现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值