echarts 双y轴折线图 基本使用



function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    };
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = 
    title: {
        text: '动态数据 '//标题
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: [
       {//右y轴
            type: 'value',
          name: '右y轴',
            // nameLocation: 'middle',
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5,
                color: '#d8d8d8',
                type: 'dashed'
              }
            }, //隐藏对称线
            // axisLine: { show: false },
            // axisTick: { show: false },
            axisLabel: {
              margin: 13,
              textStyle: {
                color: '#657584'
              }
            },
            splitNumber: 5
            // min: 0,
            // max: 100
          },
          {//左y轴
            type: 'value',
            name: '左y轴',
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.4,
                // color: '#d8d8d8',
                type: 'dashed'
              }
            }, //隐藏对称线
            // axisLine: { show: false },
            // axisTick: { show: false },
            axisLabel: {
              margin: 13,
              textStyle: {
                color: '#657584'
              }
            },
            splitNumber: 5,
            // min: 0,
            // max: 4000,
            // interval: 800,
            nameTextStyle: {
              // padding: 4,
              padding: [4,30,4,4]//对字体调整
            }
          }

        ],

    series: [//对应以下双y轴
        {
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    },
    {
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值