echarts拆線圖和柱狀圖疊加，雙Y軸，動畫延時

需求

製做疊加的拆線圖，柱狀圖，雙Y軸

工具

echarts

代碼

var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 50; i++) {
    xAxisData.push('交易日' + i);
    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
    data3.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 15);
}

option = {
    title: {
        text: '柱狀圖動畫延遲'
    },
    legend: {
        data: ['成交價', '昨收價','成交額'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis:  [{
            name: '成交價(元)',
            type: 'value'
        },
        {
            name: '成交額(萬元)',
            nameLocation: 'end',
            //max: 2000,
            type: 'value',
            //inverse:false
        }],
    series: [{
        name: '成交價',
        type: 'line',
        data: data1,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    }, {
        name: '昨收價',
        type: 'line',
        data: data2,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    },{
        name:'成交額',
        yAxisIndex:1,
        data: data3,
        type: 'bar',
        smooth: true,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    }],
    animationEasing: 'elasticOut'
};

效果圖

關鍵說明

1.series中能夠疊加多組數據，要指定type
2.yAxis中的第二個Y軸中的nameLocation表示name的位置，end表示在最大值處，默認在0值一端；inverse表示數值序列是否倒置。
3.對應第二個Y軸的series要添加屬性yAxisIndex，不然沒法關聯第二個Y軸

微信小程序適配

微信小程序中的提示tooltip和工具欄toolbox是無效的。能夠經過添加事件來實現提示。

chart.on('click',(params)=>{
    wx.showModel({
        content: 'clicked index:' + params.dataIndex,
    });
});