摘要：需求制作疊加的拆線圖，柱狀圖，雙軸工具代碼交易日柱狀圖動(dòng)畫延遲成交價(jià)昨收價(jià)成交額成交價(jià)元成交額萬(wàn)元成交價(jià)昨收價(jià)成交額效果圖關(guān)鍵說明中可以疊加多組數(shù)據(jù)，要指定中的第二個(gè)軸中的表示的位置，表示在最大值處，默認(rèn)在值一端表示數(shù)值序列是否倒置。

制作疊加的拆線圖，柱狀圖，雙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: "柱狀圖動(dòng)畫延遲"
    },
    legend: {
        data: ["成交價(jià)", "昨收價(jià)","成交額"],
        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: "成交價(jià)(元)",
            type: "value"
        },
        {
            name: "成交額(萬(wàn)元)",
            nameLocation: "end",
            //max: 2000,
            type: "value",
            //inverse:false
        }],
    series: [{
        name: "成交價(jià)",
        type: "line",
        data: data1,
        animationDelayUpdate: function (idx) {
            return idx * 15;
        }
    }, {
        name: "昨收價(jià)",
        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中可以疊加多組數(shù)據(jù)，要指定type
2.yAxis中的第二個(gè)Y軸中的nameLocation表示name的位置，end表示在最大值處，默認(rèn)在0值一端；inverse表示數(shù)值序列是否倒置。
3.對(duì)應(yīng)第二個(gè)Y軸的series要添加屬性yAxisIndex，否則無法關(guān)聯(lián)第二個(gè)Y軸

微信小程序中的提示tooltip和工具欄toolbox是無效的。可以通過添加事件來實(shí)現(xiàn)提示。

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