<HTML! DOCTYPE>
<HTML>
<head>
<meta http-equiv = "Tipo-Contenido" content = "text / html;. Charset = UTF-8">
<script src = el "https://cdn.bootcss.com /echarts/4.6.0/echarts.min.js "> </ script>
<title> echart.html </ title>
</ head>
<body>
<div ID =" "style =" principal anchura: 100px; altura : 40px; frontera: 1px Dashed # 000; margen: 20px; "> </ div>
<script type =" text / javascript "> // dom lista basada, inicialización de instancia eCharts var MYCHART = echarts.init (documento. la getElementById ( 'principal' ));
// generateOHLC generar una matriz aleatoria [fecha, abierto, alto, bajo,Fuera de disco], no tienen que estudiar; var datos = generateOHLC (2000 );
var
opción = {
conjunto de datos: {
fuente: datos
},
tooltip: {
trigger: 'eje' ,
axisPointer: {
tipo: 'línea'
}
},
cuadrícula: [
{
restante: 0 ,
derecha: 0 ,
parte superior: 0 ,
parte inferior: 0
}
],
ejeX: [
{
show: ,falso ,
tipo: 'categoría' ,
escala: verdadero ,
boundaryGap: falso ,
splitNumber: 20 ,
min: 'dataMin' ,
max: 'Datamax'
}
],
eje Y: [
{show: falsa
escala: verdadero
}
],
Serie: [
{
tipo: 'a Candelabro' ,
ItemStyle: {
color: '# 00B2D9' ,
Color0: '# 00B2D9' ,
el borderColor: '# 00B2D9' ,
borderColor0: '# 00B2D9'
},
// Esa es la primera dimensión en la que el primer grupo de dígitos 0 para mostrar el eje x
// tipo: 'a Candlestick' dimensión por defecto es 0-'date '1-'Open ', 2-'close '3-'highest', 4 'bajo'
de codificación: {
X: 0 ,
@ tipo: 'a Candlestick' de y que es de 4 o error;
// tipo aquí para la visualización de información de herramientas cuando se coloca el ratón en una vista que muestra un cambio de la orden no afecta a la visualización de la línea de la figura k
// Si sólo desea mostrar abrir, cerrar, se establece en [1,2,1,2]
// [1,4,3,2] representa el cuadro de información sobre herramientas antes de jugar la serie abierta, demostró una vez más el más bajo, demostró una vez más la más alta, última Cerrar
Y: [1,4,3,2 ]
}
}
]
};
función generateOHLC (COUNT) {
el console.log (COUNT);
var datos = [];
vareraxValue = + nueva fecha (2011, 0, 1 );
minuto = 60 * 1000 ;
var baseValue = Math.random () * 12000 ;
var boxVals = nuevo Array (4 );
var DAYRANGE = 12 ;
para ( var i = 0; i <count; i ++ ) {
baseValue = baseValue + Math.random () * 20-10 ;
para ( var j = 0; j <4; j ++ ) {
boxVals [j] = (Math.random () - 0,5) * DAYRANGE + baseValue;
}
boxVals.sort ();
eraopenIdx = Math.round (Math.random () * 3 );
var closeIdx = Math.round (Math.random () * 2 );
si (closeIdx === openIdx) {
closeIdx ++ ;
}
Var volumn = boxVals [3] * (1,000 + Math.random () * 500 );
// [ 'abierto', 'cerca', 'bajo', 'alto']
// [1, 4, 3, 2]
datos [i] = [
echarts.format.formatTime ( 'yyyy-MM-dd \ nhh : mm: ss', xValue + = minutos),
+ boxVals [openIdx] .toFixed (2), abierto//
+ boxVals [3] .toFixed (2), // más altos
+ boxVals [0] .toFixed (2), // más bajas
+ boxVals [closeIdx] .toFixed (2) // cerca
];
}
Devolver datos;
función getSign (datos, dataIndex, openVal, closeVal, closeDimIdx) {
var señal;
si (openVal> closeVal) {
signo = -1 ;
}
Demás si (openVal < closeVal) {
signo= 1 ;
}
Demás {
signo = dataIndex> 0
? (datos [dataIndex - 1] [closeDimIdx] <= closeVal 1: -1? )
: 1 ;
}
Devolver señal;
}
}
MyChart.setOption (opcional);
</ script>
</ body>
</ html>