You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
701 lines
20 KiB
701 lines
20 KiB
|
|
layui.config({base: '../layui/plug/tablePlug/'}).use(['table', 'element', 'tablePlug'], function () {
|
|
|
|
// $(document).ready(function(){
|
|
// $('.main-sidebar-left').click(function(e){
|
|
// console.log(1)
|
|
// })
|
|
// $('.coinClass').click(function(){
|
|
// console.log(2)
|
|
// var e=window.event || arguments.callee.caller.arguments[0];
|
|
// e.preventDefault();
|
|
// e.stopPropagation() ;
|
|
// })
|
|
// });
|
|
|
|
|
|
$('.main-sidebar-left').on('click',function(e){
|
|
console.log(1)
|
|
|
|
})
|
|
$('.main-sidebar-left').on('click','.coinClass',function(e){
|
|
console.log(2)
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
})
|
|
|
|
|
|
const table = layui.table
|
|
// fav
|
|
const fav = table.render({
|
|
elem: '#fav',
|
|
data: [
|
|
{coin: 'BSV', flag: 1, latest: '$176.2997', change: 1.61},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
{coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11},
|
|
],
|
|
cols: [[
|
|
{ field: 'coin', title: 'Price', width: '30%', templet: renderCoin },
|
|
{ field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true },
|
|
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
|
|
]],
|
|
skin: 'nob',
|
|
page: false
|
|
})
|
|
// usdt
|
|
const usdt = table.render({
|
|
elem: '#usdt',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
|
|
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
|
|
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
// btc
|
|
const btc = table.render({
|
|
elem: '#btc',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
|
|
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
|
|
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
// eth
|
|
const eth = table.render({
|
|
elem: '#eth',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
|
|
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
|
|
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const rec = table.render({
|
|
elem: '#rec',
|
|
data: [
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
{coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'},
|
|
|
|
],
|
|
cols: [[
|
|
{ field: 'coin2', title: 'Price', width: '30%' },
|
|
{ field: 'latest2', title: 'Amount', width: '35%' },
|
|
{ field: 'change2', title: 'Time', width: '35%' }
|
|
]],
|
|
skin: 'nob', //表格风格
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// marketTrades
|
|
const marketTrades = table.render({
|
|
elem: '#marketTrades',
|
|
data: [
|
|
{price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496'},
|
|
],
|
|
cols: [[
|
|
{ field: 'price', title: 'Price(USD)', width: '30%' },
|
|
{ field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' },
|
|
{ field: 'time', title: 'Total(USD)', width: '35%', align: 'right' }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
|
|
// recc
|
|
|
|
const recc = table.render({
|
|
elem: '#recc',
|
|
data: [
|
|
{coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39'},
|
|
],
|
|
cols: [[
|
|
{ field: 'coin3', title: 'Price', width: '30%' },
|
|
{ field: 'latest3', title: 'Amount', width: '35%' },
|
|
{ field: 'change3', title: 'Time', width: '35%' }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
|
|
|
|
// orderbook
|
|
const orderbook = table.render({
|
|
elem: '#orderbook',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'price', title: 'Price', width: '30%' },
|
|
{ field: 'amount', title: 'Amount', width: '35%', align: 'right' },
|
|
{ field: 'total', title: 'Total', width: '35%', align: 'right' }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
// Delegate
|
|
const Delegate = table.render({
|
|
elem: '#Delegate',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'time', title: 'Time', width: '20%', align: 'center' },
|
|
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' },
|
|
{ field: 'price', title: 'Price', width: '15%', align: 'center' },
|
|
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
|
|
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' },
|
|
{ field: 'action', title: 'Status', width: '15%', align: 'center' }
|
|
]],
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
// HistoryDelegate
|
|
const HistoryDelegate = table.render({
|
|
elem: '#HistoryDelegate',
|
|
data: [],
|
|
cols: [[
|
|
{ field: 'time', title: 'Time', width: '20%', align: 'center' },
|
|
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' },
|
|
{ field: 'price', title: 'Price', width: '15%', align: 'center' },
|
|
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
|
|
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' },
|
|
{ field: 'status', title: 'Status', width: '15%', align: 'center' }
|
|
]],/* */
|
|
skin: 'nob',
|
|
page: false,
|
|
})
|
|
//点击星星
|
|
$('.main-sidebar-left').on('click','.coinClass',function(event){
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
let flag = $(this).hasClass('layui-icon-rate-solid');
|
|
if(flag){
|
|
$(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate')
|
|
} else {
|
|
$(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid')
|
|
}
|
|
}).on('click','tr',function(){
|
|
let title = $('.main-sidebar-left .layui-tab-title .layui-this').text();
|
|
let trSpan = $(this).find('td').find('.coin-text').text()
|
|
$('#detailPair').html(trSpan+'/'+title)
|
|
}) .on('click','.layui-tab-title li',function(){
|
|
})
|
|
|
|
var ws = new WebSocket("ws://localhost:9998/echo");
|
|
|
|
ws.onopen = function() {
|
|
// Web Socket 已连接上，使用 send() 方法发送数据
|
|
// ws.send("发送数据");
|
|
// alert("数据发送中...");
|
|
};
|
|
|
|
ws.onmessage = function (evt) {
|
|
var received_msg = evt.data;
|
|
|
|
// alert("数据已接收...");
|
|
fav.reload({
|
|
data: []
|
|
})
|
|
usdt.reload({
|
|
data: []
|
|
})
|
|
btc.reload({
|
|
data: []
|
|
})
|
|
eth.reload({
|
|
data: []
|
|
})
|
|
marketTrades.reload({
|
|
data: []
|
|
})
|
|
orderbook.reload({
|
|
data: []
|
|
})
|
|
Delegate.reload({
|
|
data: []
|
|
})
|
|
HistoryDelegate.reload({
|
|
data: []
|
|
})
|
|
}
|
|
ws.onclose = function () {
|
|
// 关闭 websocket
|
|
// alert("连接已关闭...");
|
|
};
|
|
|
|
|
|
// getKline()
|
|
|
|
|
|
$('.compute').on('input propertychange change', function(e) {
|
|
const that = $(this)
|
|
const type = that.data('type')
|
|
$(`[name="${type}Total"]`).val(
|
|
Array.from($(`input[data-type="${type}"]`)).reduce((acc, cur) => {
|
|
return acc.times(new BigNumber($(cur).val() || 0))
|
|
}, new BigNumber(1)).toFixed(8)
|
|
)
|
|
})
|
|
$('[placeholder="Price"]').on('blur', function() {
|
|
const value = $(this).val()
|
|
if(value) {
|
|
$(this).val(new BigNumber(value).toFixed(2)).change()
|
|
}
|
|
})
|
|
$('[placeholder="Amount"]').on('blur', function() {
|
|
const value = $(this).val()
|
|
if(value) {
|
|
$(this).val(new BigNumber(value).toFixed(4)).change()
|
|
}
|
|
})
|
|
|
|
function renderCoin(data) {
|
|
return `<i class="layui-icon coinClass ${data.flag ? 'layui-icon-rate-solid' : 'layui-icon-rate'}"></i><span class="coin-text">${data.coin}</span>`
|
|
}
|
|
function renderLatest (data) {
|
|
return data.latest
|
|
}
|
|
function renderChange (data) {
|
|
const isBuy = data.change > 0
|
|
return `<span class="${isBuy ? 'buy' : 'sell'}-color">${isBuy ? '+' : ''}${data.change}%</span>`
|
|
}
|
|
|
|
})
|
|
function getKline() {
|
|
let config = {
|
|
autosize: true,
|
|
fullscreen: true,
|
|
symbol: 'AAAA',
|
|
interval: "1",
|
|
timezone: "Asia/Shanghai",
|
|
toolbar_bg: "#18202a",
|
|
container_id: "kLineContainer",
|
|
datafeed: new WebsockFeed(),
|
|
library_path: "./charting_library/",
|
|
locale: "zh",
|
|
debug: false,
|
|
drawings_access: {
|
|
type: "black",
|
|
tools: [{ name: "Regression Trend" }]
|
|
},
|
|
disabled_features: [
|
|
"header_resolutions",
|
|
"timeframes_toolbar",
|
|
"header_symbol_search",
|
|
"header_chart_type",
|
|
"header_compare",
|
|
"header_undo_redo",
|
|
"header_screenshot",
|
|
"header_saveload",
|
|
"use_localstorage_for_settings",
|
|
"left_toolbar",
|
|
"volume_force_overlay"
|
|
],
|
|
enabled_features: [
|
|
"hide_last_na_study_output",
|
|
"move_logo_to_main_pane"
|
|
],
|
|
custom_css_url: "bundles/common.css",
|
|
supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"],
|
|
charts_storage_url: "http://saveload.tradingview.com",
|
|
charts_storage_api_version: "1.1",
|
|
client_id: "tradingview.com",
|
|
user_id: "public_user_id",
|
|
overrides: {
|
|
"paneProperties.background": "#1B1E2E",
|
|
"paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)",
|
|
"paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)",
|
|
//"scalesProperties.textColor" : "#AAA",
|
|
"scalesProperties.textColor": "#61688A",
|
|
"mainSeriesProperties.candleStyle.upColor": "#589065",
|
|
"mainSeriesProperties.candleStyle.downColor": "#AE4E54",
|
|
"mainSeriesProperties.candleStyle.drawBorder": false,
|
|
"mainSeriesProperties.candleStyle.wickUpColor": "#589065",
|
|
"mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54",
|
|
"paneProperties.legendProperties.showLegend": false,
|
|
|
|
"mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)",
|
|
"mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)",
|
|
"mainSeriesProperties.areaStyle.linecolor": "#9194a4"
|
|
},
|
|
time_frames: [
|
|
{
|
|
text: "1min",
|
|
resolution: "1",
|
|
description: "realtime",
|
|
title: 'KLineC'
|
|
},
|
|
{ text: "1min", resolution: "1", description: "1min" },
|
|
{ text: "5min", resolution: "5", description: "5min" },
|
|
{ text: "15min", resolution: "15", description: "15min" },
|
|
{ text: "30min", resolution: "30", description: "30min" },
|
|
{
|
|
text: "1hour",
|
|
resolution: "60",
|
|
description: "1hour",
|
|
title: "1hour"
|
|
},
|
|
/*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/
|
|
{
|
|
text: "1day",
|
|
resolution: "1D",
|
|
description: "1day",
|
|
title: "1day"
|
|
},
|
|
{
|
|
text: "1week",
|
|
resolution: "1W",
|
|
description: "1week",
|
|
title: "1week"
|
|
},
|
|
{ text: "1mon", resolution: "1M", description: "1mon" }
|
|
]
|
|
};
|
|
}
|
|
// TradingView.onready(function() {
|
|
// var widget = (window.tvWidget = new TradingView.widget(config));
|
|
// widget.onChartReady(function () {
|
|
// widget.chart().executeActionById("drawingToolbarAction");
|
|
// widget
|
|
// .chart()
|
|
// .createStudy("Moving Average", false, false, [5], null, {
|
|
// "plot.color": "#965FC4"
|
|
// });
|
|
// widget
|
|
// .chart()
|
|
// .createStudy("Moving Average", false, false, [10], null, {
|
|
// "plot.color": "#84AAD5"
|
|
// });
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "realtime")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(3);
|
|
// widget.setSymbol("", "1");
|
|
// })
|
|
// .append("<span>分时</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "M1")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "1");
|
|
// })
|
|
// .append("<span>M1</span>")
|
|
// .addClass("selected");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "M5")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "5");
|
|
// })
|
|
// .append("<span>M5</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "M15")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "15");
|
|
// })
|
|
// .append("<span>M15</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "M30")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "30");
|
|
// })
|
|
// .append("<span>M30</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "H1")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "60");
|
|
// })
|
|
// .append("<span>H1</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "D1")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "1D");
|
|
// })
|
|
// .append("<span>D1</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "W1")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "1W");
|
|
// })
|
|
// .append("<span>W1</span>");
|
|
|
|
// widget
|
|
// .createButton()
|
|
// .attr("title", "M1")
|
|
// .on("click", function () {
|
|
// if ($(this).hasClass("selected")) return;
|
|
// $(this)
|
|
// .addClass("selected")
|
|
// .parent(".group")
|
|
// .siblings(".group")
|
|
// .find(".button.selected")
|
|
// .removeClass("selected");
|
|
// widget.chart().setChartType(1);
|
|
// widget.setSymbol("", "1M");
|
|
// })
|
|
// .append("<span>M1</span>");
|
|
// });
|
|
// })
|
|
// // }
|
|
deptrh()
|
|
// 深度图
|
|
function deptrh(){
|
|
Highcharts.chart('deptrhContainer', {
|
|
chart: {
|
|
type: 'area'
|
|
},
|
|
title: {
|
|
text: ''
|
|
},
|
|
xAxis: {
|
|
gridLineWidth: 0,
|
|
lineColor: "#6c7279",
|
|
tickColor: "#c1c1c1",
|
|
labels: {
|
|
style: {
|
|
color: "#6d7493"
|
|
}
|
|
},
|
|
title: {
|
|
text:'Price BTC',
|
|
style: {
|
|
color: "#fff"
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
opposite: !0,
|
|
gridLineWidth: 0,
|
|
lineColor: "#6c7279",
|
|
tickColor: "#c1c1c1",
|
|
lineWidth: 1,
|
|
tickWidth: 1,
|
|
labels: {
|
|
style: {
|
|
color: "#6d7493"
|
|
}
|
|
},
|
|
title: {
|
|
text: "Amount",
|
|
style: {
|
|
color: "#fff"
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: !0,
|
|
align: "center",
|
|
alignColumns: !0,
|
|
layout: "horizontal",
|
|
labelFormatter: function() {
|
|
return this.name
|
|
},
|
|
borderColor: "#999999",
|
|
borderRadius: 0,
|
|
navigation: {
|
|
activeColor: "#003399",
|
|
inactiveColor: "#cccccc"
|
|
},
|
|
itemStyle: {
|
|
color: "#F5F5F5",
|
|
fontSize: "12px",
|
|
fontWeight: "bold",
|
|
textOverflow: "ellipsis"
|
|
},
|
|
itemHoverStyle: {
|
|
color: "#000000"
|
|
},
|
|
itemHiddenStyle: {
|
|
color: "#cccccc"
|
|
},
|
|
shadow: !1,
|
|
itemCheckboxStyle: {
|
|
position: "absolute",
|
|
width: "13px",
|
|
height: "13px"
|
|
},
|
|
squareSymbol: !0,
|
|
symbolPadding: 5,
|
|
verticalAlign: "bottom",
|
|
x: 0,
|
|
y: 0,
|
|
title: {
|
|
style: {
|
|
fontWeight: "bold"
|
|
}
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
|
},
|
|
loading: {
|
|
labelStyle: {
|
|
fontWeight: "bold",
|
|
position: "relative",
|
|
top: "45%"
|
|
},
|
|
style: {
|
|
position: "absolute",
|
|
backgroundColor: "#ffffff",
|
|
opacity: .5,
|
|
textAlign: "center"
|
|
}
|
|
},
|
|
plotOptions: {
|
|
area: {
|
|
pointStart: 0,
|
|
marker: {
|
|
enabled: !1,
|
|
symbol: "circle",
|
|
radius: 2,
|
|
states: {
|
|
hover: {
|
|
enabled: !0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: {
|
|
fillOpacity: 1
|
|
}
|
|
},
|
|
tooltip: {
|
|
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
|
|
valueDecimals: 2
|
|
},
|
|
series: [{
|
|
color: "#589065",
|
|
name: "Buying Commission",
|
|
data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]]
|
|
}, {
|
|
color: "#AE4E54",
|
|
name: "Selling commission",
|
|
data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
|
|
}]
|
|
});
|
|
|
|
}
|
|
|