k-line/test.html
2024-12-11 09:52:47 +08:00

900 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name: 'jack',
info: [
{
age: 20,
sex: '男'
}
]
}
let a = {
age: 20,
sex: '女'
}
console.log([...obj.info, a])
let newoption = {
grid: [
{
left: '3%',
right: '3%',
height: '30%',
},
{
left: '3%',
right: '3%',
top: '45%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '58%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '71%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '84%',
height: '10%',
},
// 3个图
{
left: '3%',
right: '3%',
top: '6%',
height: '60%',
},
{
left: '3%',
right: '3%',
top: '71%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '85%',
height: '10%',
},
// 2个图
{
left: '3%',
right: '3%',
top: '6%',
height: '75%',
},
{
left: '3%',
right: '3%',
top: '85%',
height: '10%',
},
// 4个图
{
left: '3%',
right: '3%',
top: '6%',
height: '48%',
},
{
left: '3%',
right: '3%',
top: '59%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '72%',
height: '10%',
},
{
left: '3%',
right: '3%',
top: '85%',
height: '10%',
},
]
}
// 定义图表配置数组
const chartConfigs = [
{
name: 'MA',
options: {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴
axisPointer: {
// 坐标轴指示器
type: 'cross', // 类型为交叉
label: {
backgroundColor: '#6a7985', // 标签背景色
},
},
},
title: {
text: 'K线图',
left: 0,
},
dataZoom: [
{
show: true,
xAxisIndex: [0,1],
type: 'slider',
},
],
xAxis: {
type: 'category',
gridIndex: 1,
boundaryGap: false,
data: echartsState.times,
axisLabel: { show: false },
},
yAxis: {
type: 'value',
scale: true /*按比例显示*/,
gridIndex: 1,
splitNumber: 3,
},
series: [
{
name: 'Highest',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
lineStyle: {
color: 'red',
},
data: [
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9,
],
},
{
name: 'Lowest',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
color: 'red',
},
},
data: [
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
],
},
{
name: 'rant',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
//这里是颜色
color: 'green',
},
},
data: [
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0,
],
},
],
},
},
{
name: 'BOLL',
options: {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴
axisPointer: {
// 坐标轴指示器
type: 'cross', // 类型为交叉
label: {
backgroundColor: '#6a7985', // 标签背景色
},
},
},
title: {
text: 'K线图',
left: 0,
},
dataZoom: [
{
type: 'inside',
},
],
xAxis: {
type: 'category',
gridIndex: 2,
boundaryGap: false,
data: echartsState.times,
axisLabel: { show: false },
},
yAxis: {
type: 'value',
scale: true /*按比例显示*/,
gridIndex: 2,
splitNumber: 3,
// axisLine: { onZero: false },
// axisTick: { show: false },
// splitLine: { show: false },
// axisLabel: { show: true },
},
series: [
{
name: 'Highest',
type: 'line',
xAxisIndex: 2,
yAxisIndex: 2,
smooth: true,
lineStyle: {
color: 'red',
},
data: [
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9,
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
],
},
},
{
name: 'EMA',
options: {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴
axisPointer: {
// 坐标轴指示器
type: 'cross', // 类型为交叉
label: {
backgroundColor: '#6a7985', // 标签背景色
},
},
},
title: {
text: 'K线图',
left: 0,
},
grid: {
top: '5%',
left: '2%',
right: '3%',
bottom: '3%',
},
legend: {},
dataZoom: [
{
type: 'inside', // 内置型数据区域缩放组件
start: 10, // 左边在10%的位置
end: 60, // 右边在60%的位置
},
],
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
],
},
yAxis: {
type: 'value',
axisLabel: {
// formatter: '{value} °%',
formatter: '{value}',
},
},
series: [
{
name: 'Highest',
type: 'line',
smooth: true,
lineStyle: {
color: 'red',
},
data: [
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9,
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
{
name: 'Lowest',
type: 'bar',
itemStyle: {
normal: {
color: 'red',
},
},
data: [
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
{
name: 'rant',
type: 'bar',
itemStyle: {
normal: {
//这里是颜色
color: 'green',
},
},
data: [
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
],
},
},
{
name: 'SAR',
options: {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴
axisPointer: {
// 坐标轴指示器
type: 'cross', // 类型为交叉
label: {
backgroundColor: '#6a7985', // 标签背景色
},
},
},
title: {
text: 'K线图',
left: 0,
},
grid: {
top: '5%',
left: '2%',
right: '3%',
bottom: '3%',
},
legend: {},
dataZoom: [
{
type: 'inside', // 内置型数据区域缩放组件
start: 10, // 左边在10%的位置
end: 60, // 右边在60%的位置
},
],
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
],
},
yAxis: {
type: 'value',
axisLabel: {
// formatter: '{value} °%',
formatter: '{value}',
},
},
series: [
{
name: 'Highest',
type: 'line',
smooth: true,
lineStyle: {
color: 'red',
},
data: [
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9,
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
{
name: 'Lowest',
type: 'bar',
itemStyle: {
normal: {
color: 'red',
},
},
data: [
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
{
name: 'rant',
type: 'bar',
itemStyle: {
normal: {
//这里是颜色
color: 'green',
},
},
data: [
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
],
},
},
{
name: 'CDP',
options: {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴
axisPointer: {
// 坐标轴指示器
type: 'cross', // 类型为交叉
label: {
backgroundColor: '#6a7985', // 标签背景色
},
},
},
title: {
text: 'K线图',
left: 0,
},
grid: {
top: '5%',
left: '2%',
right: '3%',
bottom: '3%',
},
legend: {},
dataZoom: [
{
type: 'inside', // 内置型数据区域缩放组件
start: 10, // 左边在10%的位置
end: 60, // 右边在60%的位置
},
],
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
],
},
yAxis: {
type: 'value',
axisLabel: {
// formatter: '{value} °%',
formatter: '{value}',
},
},
series: [
{
name: 'Highest',
type: 'line',
smooth: true,
lineStyle: {
color: 'red',
},
data: [
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
10, 11, 13, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9, 10, 11, 13,
11, 12, 12, 9,
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
{
name: 'Lowest',
type: 'bar',
itemStyle: {
normal: {
color: 'red',
},
},
data: [
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
1, -2, 2, 5, 3, 2, -3, 1, -2, 2, 5, 3, 2, -3,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
{
name: 'rant',
type: 'bar',
itemStyle: {
normal: {
//这里是颜色
color: 'green',
},
},
data: [
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0, -5, 1, 7, 3, -1, 2, 0,
-5, 1, 7, 3, -1, 2, 0,
],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max',
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max',
},
type: 'max',
name: '最高点',
},
],
],
},
},
],
},
},
]
</script>
</body>
</html>