国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

LeexMuller / 1168人閱讀

摘要:需求制作疊加的拆線圖,柱狀圖,雙軸工具代碼交易日柱狀圖動畫延遲成交價昨收價成交額成交價元成交額萬元成交價昨收價成交額效果圖關鍵說明中可以疊加多組數據,要指定中的第二個軸中的表示的位置,表示在最大值處,默認在值一端表示數值序列是否倒置。

需求

制作疊加的拆線圖,柱狀圖,雙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,
    });
});

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96763.html

相關文章

  • echartsxy的配置

    摘要:最近的項目中用到了的雙軸和雙軸的設置,特此記錄一下鼠標懸停提示內容坐標軸指示器,坐標軸觸發有效十字線顯示標準保費增長軸軸顯示兩組數據第個軸兩個軸左邊軸金額元右邊軸增長用于指定圖標顯示類型第一個柱狀圖的數據標準保費第一個柱狀圖的數據第二個柱狀 最近的項目中用到了echarts的雙x軸和雙y軸的設置,特此記錄一下; option = { tooltip: { //鼠標懸停提示內容 ...

    Steven 評論0 收藏0
  • HTML5 進階系列:canvas 動態

    摘要:而可視化圖表,則是強大功能的表現之一。效果動畫效果圖片顯示不出來,可以到最下面找地址分析可以這個圖表由軸數據條形和標題組成。這里就需要監聽事件,當鼠標的位置位于柱狀的面積內,觸發事件。 前言 canvas 強大的功能讓它成為了 HTML5 中非常重要的部分,至于它是什么,這里就不需要我多作介紹了。而可視化圖表,則是 canvas 強大功能的表現之一。 現在已經有了很多成熟的圖表插件都是...

    sanyang 評論0 收藏0

發表評論

0條評論

LeexMuller

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<