摘要:需求制作疊加的拆線圖,柱狀圖,雙軸工具代碼交易日柱狀圖動畫延遲成交價昨收價成交額成交價元成交額萬元成交價昨收價成交額效果圖關鍵說明中可以疊加多組數據,要指定中的第二個軸中的表示的位置,表示在最大值處,默認在值一端表示數值序列是否倒置。
需求
制作疊加的拆線圖,柱狀圖,雙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
摘要:最近的項目中用到了的雙軸和雙軸的設置,特此記錄一下鼠標懸停提示內容坐標軸指示器,坐標軸觸發有效十字線顯示標準保費增長軸軸顯示兩組數據第個軸兩個軸左邊軸金額元右邊軸增長用于指定圖標顯示類型第一個柱狀圖的數據標準保費第一個柱狀圖的數據第二個柱狀 最近的項目中用到了echarts的雙x軸和雙y軸的設置,特此記錄一下; option = { tooltip: { //鼠標懸停提示內容 ...
摘要:而可視化圖表,則是強大功能的表現之一。效果動畫效果圖片顯示不出來,可以到最下面找地址分析可以這個圖表由軸數據條形和標題組成。這里就需要監聽事件,當鼠標的位置位于柱狀的面積內,觸發事件。 前言 canvas 強大的功能讓它成為了 HTML5 中非常重要的部分,至于它是什么,這里就不需要我多作介紹了。而可視化圖表,則是 canvas 強大功能的表現之一。 現在已經有了很多成熟的圖表插件都是...
閱讀 3257·2023-04-26 01:31
閱讀 1898·2023-04-25 22:08
閱讀 3444·2021-09-01 11:42
閱讀 2828·2019-08-30 12:58
閱讀 2170·2019-08-29 18:31
閱讀 2435·2019-08-29 17:18
閱讀 3068·2019-08-29 13:01
閱讀 2555·2019-08-28 18:22