echart实时链接

html:
<div class="chart" ref="ichart"></div>
js:
let chartCar = echarts.init(this.$refs.ichart)

    let that = this
    let x = this.x
    let y = this.y
    this.$axios.post('', {
    },{
      headers: {'Content-Type': 'application/json '}
    }).then(res => {
      that.data =  res.data
      for(let i=0;i<this.data.data.length-1;i++){
        x.push(x轴)
        y.push(y轴)
      }
      chartCar.setOption({
        title:{
          text:'车流量统计折线示意图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['车流量统计折线示意图'],
          textStyle: {
            fontSize: 24,
            color: 'rgba(51,51,51,1)'
          }
        },
        grid: {
          left:"10%",
          bottom:'5%',
          top: '15%',
          right: '5%'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: false, readOnly: false},
            magicType: {show: true, type: ['line', 'bar','pic']}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: x,
            axisLabel: {
              show: true
            },
            axisLine: {
              show: true
            }
          } ],
        yAxis: [{
          type: 'value',
          data:[],
          axisLabel: {
            show: true
          },
          axisLine: {
            show: true
          }
        }],
        series: [{
          name: '车流量',
          type: 'line',
          stack: '总量',
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(40, 182, 252, 0.85)'
              }, {
                offset: 1,
                color: 'rgba(28, 159, 255, 0.2)'
              }])}},
          data: y
        }]})
    })
  that.y=[]
  that.x=[]
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值