forked from opentiny/tiny-vue
fix(chart): update chart test example (#1610)
* fix: delete the empty lines * update: 更新api文档 * fix: 添加图表插槽，添加图表theme属性，默认图表样式更改为cloud, * docs: 修改案例代码 * docs: 修改文档描述 * text: 修改playwright测试用例 * text: 修改wordcloud图playwright测试用例 * fix: 修改chart-core文件 * fix: 修改chart-core文件
This commit is contained in:
Davont
GitHub
parent
f12c81c7c6
commit
e164688824
|
|
@ -1,6 +1,7 @@
|
|||
import { test } from '@playwright/test'
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-autonavi-map')
|
||||
const chart = page.locator('#amap-base .amap-layers')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-autonavi-map :settings="chartSettings" :series="chartSeries" :tooltip="chartTooltip"></tiny-autonavi-map>
|
||||
<tiny-autonavi-map :options="options"></tiny-autonavi-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
import { ref } from 'vue'
|
||||
import { AutonaviMap as TinyAutonaviMap } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = {
|
||||
const options = ref({
|
||||
key: '4b5f2cf2cba25200cc6b68c398468899',
|
||||
url: 'https://webapi.amap.com/maps', // 谷歌地图接口的url地址
|
||||
v: '1.4.3',
|
||||
|
|
@ -16,17 +16,21 @@ const chartSettings = {
|
|||
resizeEnable: true,
|
||||
center: [120.14322240845, 30.236064370321],
|
||||
zoom: 10
|
||||
}
|
||||
}
|
||||
const chartTooltip = { show: true }
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，纬度，value...
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
|
||||
const chartSeries = ref([
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，维度，value，...
|
||||
]
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-autonavi-map :settings="chartSettings" :series="chartSeries" :tooltip="chartTooltip"></tiny-autonavi-map>
|
||||
<tiny-autonavi-map :options="options"></tiny-autonavi-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -12,28 +12,30 @@ export default {
|
|||
TinyAutonaviMap: AutonaviMap
|
||||
},
|
||||
data() {
|
||||
this.chartSettings = {
|
||||
key: '4b5f2cf2cba25200cc6b68c398468899',
|
||||
url: 'https://webapi.amap.com/maps', // 谷歌地图接口的url地址
|
||||
v: '1.4.3',
|
||||
amap: {
|
||||
resizeEnable: true,
|
||||
center: [120.14322240845, 30.236064370321],
|
||||
zoom: 10
|
||||
}
|
||||
}
|
||||
this.chartTooltip = { show: true }
|
||||
|
||||
return {
|
||||
chartSeries: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，维度，value，...
|
||||
]
|
||||
}
|
||||
]
|
||||
options: {
|
||||
key: '4b5f2cf2cba25200cc6b68c398468899',
|
||||
url: 'https://webapi.amap.com/maps', // 谷歌地图接口的url地址
|
||||
v: '1.4.3',
|
||||
amap: {
|
||||
resizeEnable: true,
|
||||
center: [120.14322240845, 30.236064370321],
|
||||
zoom: 10
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，纬度，value...
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,16 +8,18 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
const options = ref({
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,17 +13,19 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,19 +8,19 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
dimension: ['日期'],
|
||||
metrics: ['访问用户']
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
const options = {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
})
|
||||
],
|
||||
type: 'stack',
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,20 +13,20 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
dimension: ['日期'],
|
||||
metrics: ['访问用户']
|
||||
},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
type: 'stack',
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,22 +8,23 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
metrics: ['访问用户'],
|
||||
dataOrder: {
|
||||
label: '访问用户',
|
||||
order: 'desc'
|
||||
}
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
const options = ref({
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [6, 0]
|
||||
},
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,23 +13,24 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
metrics: ['访问用户'],
|
||||
dataOrder: {
|
||||
label: '访问用户',
|
||||
order: 'desc'
|
||||
}
|
||||
},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [6, 0]
|
||||
},
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,22 +8,24 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
xAxisType: ['KMB', 'KMB'],
|
||||
xAxisName: ['下单用户', '访问用户'],
|
||||
axisSite: {
|
||||
top: ['访问用户']
|
||||
}
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户', '下单用户'],
|
||||
rows: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293 }
|
||||
]
|
||||
const options = ref({
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
],
|
||||
type: 'stack',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
offset: [0, -16]
|
||||
},
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,23 +13,25 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
xAxisType: ['KMB', 'KMB'],
|
||||
xAxisName: ['下单用户', '访问用户'],
|
||||
axisSite: {
|
||||
top: ['访问用户']
|
||||
}
|
||||
},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户'],
|
||||
rows: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293 }
|
||||
]
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
],
|
||||
type: 'stack',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
offset: [0, -16]
|
||||
},
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,24 +8,21 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
labelMap: {
|
||||
PV: '访问用户',
|
||||
Order: '下单用户'
|
||||
const options = ref({
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
legendName: {
|
||||
访问用户: '访问用户 total: 10000'
|
||||
}
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['date', 'PV', 'Order', 'OrderRate'],
|
||||
rows: [
|
||||
{ date: '1/1', PV: 1393, Order: 1093, OrderRate: 0.32 },
|
||||
{ date: '1/2', PV: 3530, Order: 3230, OrderRate: 0.26 },
|
||||
{ date: '1/3', PV: 2923, Order: 2623, OrderRate: 0.76 },
|
||||
{ date: '1/4', PV: 1723, Order: 1423, OrderRate: 0.49 },
|
||||
{ date: '1/5', PV: 3792, Order: 3492, OrderRate: 0.323 },
|
||||
{ date: '1/6', PV: 4593, Order: 4293, OrderRate: 0.78 }
|
||||
]
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,25 +13,22 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
labelMap: {
|
||||
PV: '访问用户',
|
||||
Order: '下单用户'
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
legendName: {
|
||||
访问用户: '访问用户 total: 10000'
|
||||
}
|
||||
},
|
||||
chartData: {
|
||||
columns: ['date', 'PV', 'Order', 'OrderRate'],
|
||||
rows: [
|
||||
{ date: '1/1', PV: 1393, Order: 1093, OrderRate: 0.32 },
|
||||
{ date: '1/2', PV: 3530, Order: 3230, OrderRate: 0.26 },
|
||||
{ date: '1/3', PV: 2923, Order: 2623, OrderRate: 0.76 },
|
||||
{ date: '1/4', PV: 1723, Order: 1423, OrderRate: 0.49 },
|
||||
{ date: '1/5', PV: 3792, Order: 3492, OrderRate: 0.323 },
|
||||
{ date: '1/6', PV: 4593, Order: 4293, OrderRate: 0.78 }
|
||||
]
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,20 +8,23 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
stack: {
|
||||
xxx: ['访问用户', '下单用户']
|
||||
}
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
const options = ref({
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
markLine: {
|
||||
|
||||
// markLine.top 表示顶部阈值线, markLine.bottom 表示底部阈值线
|
||||
top: 32
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,21 +13,24 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
stack: {
|
||||
xxx: ['访问用户', '下单用户']
|
||||
}
|
||||
},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
options: {
|
||||
data: [
|
||||
{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
{ 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
{ 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
{ 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
{ 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
{ 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
]
|
||||
],
|
||||
xAxis: {
|
||||
data: '日期'
|
||||
},
|
||||
markLine: {
|
||||
|
||||
// markLine.top 表示顶部阈值线, markLine.bottom 表示底部阈值线
|
||||
top: 32
|
||||
},
|
||||
direction: 'horizontal' // 横向柱状图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-bar :data="chartData" :settings="chartSettings"></tiny-chart-bar>
|
||||
<tiny-chart-bar :options="options"></tiny-chart-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,18 +8,24 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartBar as TinyChartBar } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
yAxisType: 'value'
|
||||
})
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ 日期: 1, 访问用户: 1393 },
|
||||
{ 日期: 2, 访问用户: 3530 },
|
||||
{ 日期: 5, 访问用户: 2923 },
|
||||
{ 日期: 10, 访问用户: 1723 },
|
||||
{ 日期: 15, 访问用户: 3792 },
|
||||
{ 日期: 36, 访问用户: 4593 }
|
||||
const options = ref({
|
||||
|
||||
// 双向柱状图形态
|
||||
type: 'double-sides',
|
||||
direction: 'horizontal',
|
||||
data: [
|
||||
{ 'Month': 'Jan', '上行': 43, '下行': 37 },
|
||||
{ 'Month': 'Feb', '上行': 27, '下行': 19 },
|
||||
{ 'Month': 'Mar', '上行': 31, '下行': 20 },
|
||||
{ 'Month': 'Apr', '上行': 20, '下行': 15 },
|
||||
{ 'Month': 'May', '上行': 37, '下行': 13 },
|
||||
{ 'Month': 'Jun', '上行': 38, '下行': 17 },
|
||||
{ 'Month': 'Jul', '上行': 42, '下行': 22 },
|
||||
{ 'Month': 'Aug', '上行': 22, '下行': 22 },
|
||||
{ 'Month': 'Sep', '上行': 17, '下行': 12 },
|
||||
{ 'Month': 'Oct', '上行': 41, '下行': 33 },
|
||||
{ 'Month': 'Nov', '上行': 42, '下行': 22 },
|
||||
{ 'Month': 'Dec', '上行': 37, '下行': 17 },
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-bar :data="chartData" :settings="chartSettings"></tiny-bar>
|
||||
<tiny-bar :options="options"></tiny-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,18 +13,24 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
yAxisType: 'value'
|
||||
},
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ 日期: 1, 访问用户: 1393 },
|
||||
{ 日期: 2, 访问用户: 3530 },
|
||||
{ 日期: 5, 访问用户: 2923 },
|
||||
{ 日期: 10, 访问用户: 1723 },
|
||||
{ 日期: 15, 访问用户: 3792 },
|
||||
{ 日期: 36, 访问用户: 4593 }
|
||||
options: {
|
||||
|
||||
// 双向柱状图形态
|
||||
type: 'double-sides',
|
||||
direction: 'horizontal',
|
||||
data: [
|
||||
{ 'Month': 'Jan', '上行': 43, '下行': 37 },
|
||||
{ 'Month': 'Feb', '上行': 27, '下行': 19 },
|
||||
{ 'Month': 'Mar', '上行': 31, '下行': 20 },
|
||||
{ 'Month': 'Apr', '上行': 20, '下行': 15 },
|
||||
{ 'Month': 'May', '上行': 37, '下行': 13 },
|
||||
{ 'Month': 'Jun', '上行': 38, '下行': 17 },
|
||||
{ 'Month': 'Jul', '上行': 42, '下行': 22 },
|
||||
{ 'Month': 'Aug', '上行': 22, '下行': 22 },
|
||||
{ 'Month': 'Sep', '上行': 17, '下行': 12 },
|
||||
{ 'Month': 'Oct', '上行': 41, '下行': 33 },
|
||||
{ 'Month': 'Nov', '上行': 42, '下行': 22 },
|
||||
{ 'Month': 'Dec', '上行': 37, '下行': 17 },
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button style="margin-bottom: 20px" @click="switchTheme">切换主题</tiny-button>
|
||||
<h3 class="title">折线图</h3>
|
||||
<tiny-button @click="switchTheme">切换主题</tiny-button>
|
||||
<div class="content">
|
||||
<tiny-chart :data="chartData" :settings="chartSettings1" :theme="newTheme"></tiny-chart>
|
||||
<tiny-chart type="line" :options="options1"></tiny-chart>
|
||||
</div>
|
||||
|
||||
<h3 class="title">柱状图</h3>
|
||||
<div class="content">
|
||||
<tiny-chart :data="chartData" :theme-name="themeName" :settings="chartSettings2"></tiny-chart>
|
||||
<tiny-chart type="histogram" :options="options2"></tiny-chart>
|
||||
</div>
|
||||
|
||||
<h3 class="title">饼图</h3>
|
||||
<tiny-button @click="switchColorMode">color-mode切换</tiny-button>
|
||||
<tiny-button style="margin-bottom: 20px" @click="switchColorMode">color-mode切换</tiny-button>
|
||||
<div class="content">
|
||||
<tiny-chart
|
||||
@handle-color="handleColor"
|
||||
:data="chartData"
|
||||
:settings="chartSettings3"
|
||||
:color-mode="colorMode"
|
||||
:key="key"
|
||||
></tiny-chart>
|
||||
<tiny-chart type="ring" @handle-color="handleColor" :options="options3" :color-mode="colorMode"
|
||||
:key="key"></tiny-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,48 +30,83 @@ const themeName = ref({
|
|||
backgroundColor: '#2bf666'
|
||||
})
|
||||
const newTheme = ref(null)
|
||||
const chartData = ref({
|
||||
columns: ['日期', '余额', '年龄'],
|
||||
rows: [
|
||||
{ 日期: 1, 余额: 123, 年龄: 3 },
|
||||
{ 日期: 2, 余额: 1223, 年龄: 6 },
|
||||
{ 日期: 3, 余额: 2123, 年龄: 9 },
|
||||
{ 日期: 4, 余额: 4123, 年龄: 12 },
|
||||
{ 日期: 5, 余额: 3123, 年龄: 15 },
|
||||
{ 日期: 6, 余额: 7123, 年龄: 20 }
|
||||
]
|
||||
})
|
||||
const chartSettings1 = ref({
|
||||
type: 'line'
|
||||
})
|
||||
const chartSettings2 = ref({
|
||||
type: 'histogram'
|
||||
})
|
||||
const chartSettings3 = ref({
|
||||
type: 'pie'
|
||||
const options1 = ref({
|
||||
padding: [50, 30, 50, 20],
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'line'
|
||||
},
|
||||
data: [
|
||||
{ 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
|
||||
{ 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
|
||||
{ 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
|
||||
{ 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
|
||||
{ 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
|
||||
{ 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
|
||||
{ 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
|
||||
{ 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
|
||||
{ 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
|
||||
{ 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
|
||||
],
|
||||
xAxis: {
|
||||
data: 'Month'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Percentage(%)'
|
||||
}
|
||||
})
|
||||
|
||||
function switchTheme() {
|
||||
newTheme.value = {
|
||||
color: [
|
||||
'#C1232B',
|
||||
'#B5C334',
|
||||
'#FCCE10',
|
||||
'#E87C25',
|
||||
'#27727B',
|
||||
'#FE8463',
|
||||
'#9BCA63',
|
||||
'#FAD860',
|
||||
'#F3A43B',
|
||||
'#60C0DD',
|
||||
'#D7504B',
|
||||
'#C6E579',
|
||||
'#F4E001',
|
||||
'#F0805A',
|
||||
'#26C0C0'
|
||||
],
|
||||
backgroundColor: '#f00'
|
||||
const options2 = ref({
|
||||
padding: [50, 30, 50, 20],
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'line'
|
||||
},
|
||||
data: [
|
||||
{ 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
|
||||
{ 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
|
||||
{ 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
|
||||
{ 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
|
||||
{ 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
|
||||
{ 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
|
||||
{ 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
|
||||
{ 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
|
||||
{ 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
|
||||
{ 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
|
||||
],
|
||||
xAxis: {
|
||||
data: 'Month'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Percentage(%)'
|
||||
}
|
||||
})
|
||||
|
||||
const options3 = ref({
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ value: 100, name: 'VPC' },
|
||||
{ value: 90, name: 'IM' },
|
||||
{ value: 49, name: 'EIP' },
|
||||
{ value: 14, name: 'SG' }
|
||||
]
|
||||
})
|
||||
|
||||
const themes = ref(['light', 'cloud-light', 'hdesign-light', 'bpit-light'])
|
||||
const themesKey = ref(1)
|
||||
|
||||
function switchTheme() {
|
||||
if (themesKey.value < themes.value.length - 1) {
|
||||
themesKey.value++
|
||||
} else {
|
||||
themesKey.value = 0
|
||||
}
|
||||
options1.value.theme = themes.value[themesKey.value]
|
||||
options2.value.theme = themes.value[themesKey.value]
|
||||
}
|
||||
|
||||
function switchColorMode() {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button style="margin-bottom: 20px" @click="switchTheme">切换主题</tiny-button>
|
||||
<h3 class="title">折线图</h3>
|
||||
<tiny-button @click="switchTheme">切换主题</tiny-button>
|
||||
<div class="content">
|
||||
<tiny-chart :data="chartData" :settings="chartSettings1" :theme="newTheme"></tiny-chart>
|
||||
<tiny-chart type="line" :options="options1"></tiny-chart>
|
||||
</div>
|
||||
|
||||
<h3 class="title">柱状图</h3>
|
||||
<div class="content">
|
||||
<tiny-chart :data="chartData" :theme-name="themeName" :settings="chartSettings2"></tiny-chart>
|
||||
<tiny-chart type="histogram" :options="options2"></tiny-chart>
|
||||
</div>
|
||||
|
||||
<h3 class="title">饼图</h3>
|
||||
<tiny-button @click="switchColorMode">color-mode切换</tiny-button>
|
||||
<tiny-button style="margin-bottom: 20px" @click="switchColorMode">color-mode切换</tiny-button>
|
||||
<div class="content">
|
||||
<tiny-chart
|
||||
@handle-color="handleColor"
|
||||
:data="chartData"
|
||||
:settings="chartSettings3"
|
||||
:color-mode="colorMode"
|
||||
:key="key"
|
||||
></tiny-chart>
|
||||
<tiny-chart type="ring" @handle-color="handleColor" :options="options3" :color-mode="colorMode"
|
||||
:key="key"></tiny-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,26 +30,13 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
switchTheme() {
|
||||
this.newTheme = {
|
||||
color: [
|
||||
'#C1232B',
|
||||
'#B5C334',
|
||||
'#FCCE10',
|
||||
'#E87C25',
|
||||
'#27727B',
|
||||
'#FE8463',
|
||||
'#9BCA63',
|
||||
'#FAD860',
|
||||
'#F3A43B',
|
||||
'#60C0DD',
|
||||
'#D7504B',
|
||||
'#C6E579',
|
||||
'#F4E001',
|
||||
'#F0805A',
|
||||
'#26C0C0'
|
||||
],
|
||||
backgroundColor: '#f00'
|
||||
if (this.themesKey < this.themes.length - 1) {
|
||||
this.themesKey++
|
||||
} else {
|
||||
this.themesKey = 0
|
||||
}
|
||||
this.options1.theme = this.themes[this.themesKey]
|
||||
this.options2.theme = this.themes[this.themesKey]
|
||||
},
|
||||
switchColorMode() {
|
||||
const colorModes = ['default', 'blue', 'green']
|
||||
|
|
@ -67,32 +49,77 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
options1: {
|
||||
padding: [50, 30, 50, 20],
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'line'
|
||||
},
|
||||
data: [
|
||||
{ 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
|
||||
{ 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
|
||||
{ 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
|
||||
{ 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
|
||||
{ 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
|
||||
{ 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
|
||||
{ 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
|
||||
{ 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
|
||||
{ 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
|
||||
{ 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
|
||||
],
|
||||
xAxis: {
|
||||
data: 'Month'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Percentage(%)'
|
||||
}
|
||||
},
|
||||
options2: {
|
||||
padding: [50, 30, 50, 20],
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'line'
|
||||
},
|
||||
data: [
|
||||
{ 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
|
||||
{ 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
|
||||
{ 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
|
||||
{ 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
|
||||
{ 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
|
||||
{ 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
|
||||
{ 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
|
||||
{ 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
|
||||
{ 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
|
||||
{ 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
|
||||
{ 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
|
||||
],
|
||||
xAxis: {
|
||||
data: 'Month'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Percentage(%)'
|
||||
}
|
||||
},
|
||||
options3: {
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ value: 100, name: 'VPC' },
|
||||
{ value: 90, name: 'IM' },
|
||||
{ value: 49, name: 'EIP' },
|
||||
{ value: 14, name: 'SG' }
|
||||
]
|
||||
},
|
||||
colorMode: 'default',
|
||||
key: 0,
|
||||
themeName: {
|
||||
backgroundColor: '#2bf666'
|
||||
},
|
||||
newTheme: null,
|
||||
chartData: {
|
||||
columns: ['日期', '余额', '年龄'],
|
||||
rows: [
|
||||
{ 日期: '1', 余额: 123, 年龄: 3 },
|
||||
{ 日期: '2', 余额: 1223, 年龄: 6 },
|
||||
{ 日期: '3', 余额: 2123, 年龄: 9 },
|
||||
{ 日期: '4', 余额: 4123, 年龄: 12 },
|
||||
{ 日期: '5', 余额: 3123, 年龄: 15 },
|
||||
{ 日期: '6', 余额: 7123, 年龄: 20 }
|
||||
]
|
||||
},
|
||||
chartSettings1: {
|
||||
type: 'line'
|
||||
},
|
||||
chartSettings2: {
|
||||
type: 'histogram'
|
||||
},
|
||||
chartSettings3: {
|
||||
type: 'pie'
|
||||
}
|
||||
themes: ['light', 'cloud-light', 'hdesign-light', 'bpit-light'],
|
||||
themesKey: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-baidu-map :settings="chartSettings" :series="chartSeries" :tooltip="chartTooltip"></tiny-baidu-map>
|
||||
<tiny-baidu-map :options="options"></tiny-baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,25 +8,26 @@
|
|||
import { ref } from 'vue'
|
||||
import { BaiduMap as TinyBaiduMap } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = {
|
||||
const options = ref({
|
||||
key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
|
||||
url: 'https://api.map.baidu.com/api', // 百度地图的接口地址
|
||||
url: 'https://api.map.baidu.com/api', // 百度地图接口的url地址
|
||||
bmap: {
|
||||
center: [120, 30],
|
||||
zoom: 14,
|
||||
roam: true,
|
||||
mapStyle: {}
|
||||
}
|
||||
}
|
||||
const chartTooltip = { show: true }
|
||||
resizeEnable: true,
|
||||
center: [120.14322240845, 30.236064370321],
|
||||
zoom: 10
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，纬度，value...
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const chartSeries = ref([
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，维度，value，...
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-baidu-map :settings="chartSettings" :series="chartSeries" :tooltip="chartTooltip"></tiny-baidu-map>
|
||||
<tiny-baidu-map :options="options"></tiny-baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -12,28 +12,29 @@ export default {
|
|||
TinyBaiduMap: BaiduMap
|
||||
},
|
||||
data() {
|
||||
this.chartSettings = {
|
||||
key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
|
||||
url: 'https://api.map.baidu.com/api', // 百度地图的接口地址
|
||||
bmap: {
|
||||
center: [120, 30],
|
||||
zoom: 14,
|
||||
roam: true,
|
||||
mapStyle: {}
|
||||
}
|
||||
}
|
||||
this.chartTooltip = { show: true }
|
||||
|
||||
return {
|
||||
chartSeries: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，维度，value，...
|
||||
]
|
||||
}
|
||||
]
|
||||
options: {
|
||||
key: '4b5f2cf2cba25200cc6b68c398468899',
|
||||
url: 'https://webapi.amap.com/maps', // 谷歌地图接口的url地址
|
||||
v: '1.4.3',
|
||||
bmap: {
|
||||
resizeEnable: true,
|
||||
center: [120.14322240845, 30.236064370321],
|
||||
zoom: 10
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: [
|
||||
[120, 30, 1] // 经度，纬度，value...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
|
|
@ -1,42 +1,27 @@
|
|||
<template>
|
||||
<tiny-chart-boxplot :data="chartData" :settings="chartSettings" :extend="extend"></tiny-chart-boxplot>
|
||||
<tiny-chart-boxplot :options="options"></tiny-chart-boxplot>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { ChartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
|
||||
|
||||
const chartSettings = ref({
|
||||
tooltipLabel: ['下限', '下四分位数', '中位数', '上四分位数', '上限']
|
||||
})
|
||||
const chartData = ref([
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
])
|
||||
const extend = ref({
|
||||
title: [
|
||||
{
|
||||
text: 'Michelson-Morley Experiment',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
|
||||
borderColor: '#aaa',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
left: '10%',
|
||||
top: '90%'
|
||||
}
|
||||
const options = ref({
|
||||
data: [
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
],
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-boxplot :data="chartData" :settings="chartSettings" :extend="extend"></tiny-boxplot>
|
||||
<tiny-boxplot :options="options"></tiny-boxplot>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -11,39 +11,23 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartSettings: {
|
||||
tooltipLabel: ['下限', '下四分位数', '中位数', '上四分位数', '上限']
|
||||
},
|
||||
chartData: [
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
],
|
||||
extend: {
|
||||
title: [
|
||||
{
|
||||
text: 'Michelson-Morley Experiment',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
|
||||
borderColor: '#aaa',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
left: '10%',
|
||||
top: '90%'
|
||||
}
|
||||
options: {
|
||||
data: [
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
],
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ test('base', async ({ page }) => {
|
|||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
// test('multiple', async ({ page }) => {
|
||||
// await page.goto('chart-boxplot#boxplot-multiple')
|
||||
// const chart = page.locator('#boxplot-multiple .hui-chart')
|
||||
// await expect(chart).toHaveScreenshot('multiple.png')
|
||||
// })
|
||||
test('multiple', async ({ page }) => {
|
||||
await page.goto('chart-boxplot#boxplot-multiple')
|
||||
const chart = page.locator('#boxplot-multiple .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('multiple.png')
|
||||
})
|
||||
|
||||
test('vertical', async ({ page }) => {
|
||||
await page.goto('chart-boxplot#boxplot-vertical')
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -1,126 +1,27 @@
|
|||
<template>
|
||||
<tiny-chart-boxplot ref="chartRef" :extend="option" @ready-once="init"></tiny-chart-boxplot>
|
||||
<tiny-chart-boxplot ref="chartRef" :options="options"></tiny-chart-boxplot>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { ChartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
|
||||
|
||||
const option = ref({})
|
||||
const chartRef = ref()
|
||||
|
||||
function init() {
|
||||
let prepareBoxplotData = chartRef.value.prepareBoxplotData
|
||||
let data = []
|
||||
|
||||
for (let seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
|
||||
let seriesData = []
|
||||
|
||||
for (let i = 0; i < 18; i++) {
|
||||
let cate = []
|
||||
|
||||
for (let j = 0; j < 100; j++) {
|
||||
cate.push(Math.random() * 200)
|
||||
}
|
||||
|
||||
seriesData.push(cate)
|
||||
const options = ref({
|
||||
direction: 'horizontal', // 横向
|
||||
data: [
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
],
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
}
|
||||
|
||||
data.push(prepareBoxplotData(seriesData))
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
|
||||
option.value = {
|
||||
title: {
|
||||
text: 'Multiple Categories',
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
top: '10%',
|
||||
data: ['category0', 'category1', 'category2', 'category3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: '20%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data[0].axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'Value',
|
||||
min: -400,
|
||||
max: 600,
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
height: 20,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'category0',
|
||||
type: 'boxplot',
|
||||
data: data[0].boxData,
|
||||
tooltip: { formatter }
|
||||
},
|
||||
{
|
||||
name: 'category1',
|
||||
type: 'boxplot',
|
||||
data: data[1].boxData,
|
||||
tooltip: { formatter }
|
||||
},
|
||||
{
|
||||
name: 'category2',
|
||||
type: 'boxplot',
|
||||
data: data[2].boxData,
|
||||
tooltip: { formatter }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function formatter(param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[0],
|
||||
'Q1: ' + param.data[1],
|
||||
'median: ' + param.data[2],
|
||||
'Q3: ' + param.data[3],
|
||||
'lower: ' + param.data[4]
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-boxplot ref="chart" :extend="option" @ready-once="init"></tiny-boxplot>
|
||||
<tiny-boxplot ref="chart" :options="options"></tiny-boxplot>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -11,122 +11,23 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let prepareBoxplotData = this.$refs.chart.prepareBoxplotData
|
||||
let data = []
|
||||
|
||||
for (let seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
|
||||
let seriesData = []
|
||||
|
||||
for (let i = 0; i < 18; i++) {
|
||||
let cate = []
|
||||
|
||||
for (let j = 0; j < 100; j++) {
|
||||
cate.push(Math.random() * 200)
|
||||
}
|
||||
|
||||
seriesData.push(cate)
|
||||
}
|
||||
|
||||
data.push(prepareBoxplotData(seriesData))
|
||||
}
|
||||
|
||||
this.option = {
|
||||
title: {
|
||||
text: 'Multiple Categories',
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
top: '10%',
|
||||
data: ['category0', 'category1', 'category2', 'category3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: '20%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
options: {
|
||||
direction: 'horizontal', // 横向
|
||||
data: [
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data[0].axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'Value',
|
||||
min: -400,
|
||||
max: 600,
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
height: 20,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'category0',
|
||||
type: 'boxplot',
|
||||
data: data[0].boxData,
|
||||
tooltip: { formatter }
|
||||
},
|
||||
{
|
||||
name: 'category1',
|
||||
type: 'boxplot',
|
||||
data: data[1].boxData,
|
||||
tooltip: { formatter }
|
||||
},
|
||||
{
|
||||
name: 'category2',
|
||||
type: 'boxplot',
|
||||
data: data[2].boxData,
|
||||
tooltip: { formatter }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function formatter(param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[0],
|
||||
'Q1: ' + param.data[1],
|
||||
'median: ' + param.data[2],
|
||||
'Q3: ' + param.data[3],
|
||||
'lower: ' + param.data[4]
|
||||
].join('<br/>')
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,97 +1,110 @@
|
|||
<template>
|
||||
<tiny-chart-boxplot ref="chartRef" :extend="option" @ready-once="init"></tiny-chart-boxplot>
|
||||
<tiny-chart-boxplot :options="options"></tiny-chart-boxplot>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { chartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
import { ChartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
|
||||
|
||||
const option = ref({})
|
||||
const chartRef = ref()
|
||||
|
||||
function init() {
|
||||
let data = chartRef.value.prepareBoxplotData([
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
])
|
||||
|
||||
option.value = {
|
||||
title: [
|
||||
{
|
||||
text: 'Michelson-Morley Experiment',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
|
||||
borderColor: '#999',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
left: '10%',
|
||||
top: '90%'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'km/s minus 299,000',
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'boxplot',
|
||||
type: 'boxplot',
|
||||
data: data.boxData,
|
||||
tooltip: {
|
||||
formatter(param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[5],
|
||||
'Q3: ' + param.data[4],
|
||||
'median: ' + param.data[3],
|
||||
'Q1: ' + param.data[2],
|
||||
'lower: ' + param.data[1]
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'outlier',
|
||||
type: 'scatter',
|
||||
data: data.outliers
|
||||
}
|
||||
]
|
||||
function makeData() {
|
||||
let data = []
|
||||
for (let i = 0; i < 18; i++) {
|
||||
let cate = []
|
||||
for (let j = 0; j < 100; j++) {
|
||||
cate.push(parseFloat('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 200)
|
||||
}
|
||||
data.push(cate)
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const sourceData0 = makeData()
|
||||
const sourceData1 = makeData()
|
||||
const sourceData2 = makeData()
|
||||
|
||||
const options = ref({
|
||||
padding: [50, 30, 55, 20],
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: -400,
|
||||
max: 600
|
||||
},
|
||||
legend: {
|
||||
shwo: true,
|
||||
position: {
|
||||
top: 15,
|
||||
right: 'center'
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
show: true,
|
||||
start: 0,
|
||||
end: 20,
|
||||
position: {
|
||||
left: 40,
|
||||
bottom: 18
|
||||
}
|
||||
},
|
||||
dataset: [
|
||||
{
|
||||
source: sourceData0
|
||||
},
|
||||
{
|
||||
source: sourceData1
|
||||
},
|
||||
{
|
||||
source: sourceData2
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 0,
|
||||
transform: { 'type': 'boxplot' }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 1,
|
||||
transform: { 'type': 'boxplot' }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 2,
|
||||
transform: { 'type': 'boxplot' }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'category_0',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 3
|
||||
},
|
||||
{
|
||||
name: 'category_1',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 4
|
||||
},
|
||||
{
|
||||
name: 'category_2',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 5
|
||||
}
|
||||
],
|
||||
tipHtml: (params) => {
|
||||
const { data, color, seriesName } = params
|
||||
const labels = ['lower', 'Q3', 'median', 'Q1', 'upper']
|
||||
let htmlString = `<div style="font-weight:bold">${seriesName}</div>`
|
||||
let arr = []
|
||||
labels.forEach((item, index) => {
|
||||
let string = `<div>
|
||||
<span style="display:inline;width:10px;height:10px;
|
||||
margin-right:4px; border-radius:5px;border-style:solid;border-width: 1px
|
||||
border-color:${color};background-color:${color};></span>
|
||||
<span style="display:inline-block;width:90px">${item}:</span><span>${data[index + 1]}</span>
|
||||
</div>`
|
||||
arr.push(string)
|
||||
})
|
||||
htmlString += arr.join('')
|
||||
return htmlString
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-boxplot ref="chart" :extend="option" @ready-once="init"></tiny-boxplot>
|
||||
<tiny-boxplot ref="chart" :options="options"></tiny-boxplot>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -11,94 +11,107 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
sourceData0: makeData(),
|
||||
sourceData1: makeData(),
|
||||
sourceData2: makeData(),
|
||||
options: {
|
||||
padding: [50, 30, 55, 20],
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: -400,
|
||||
max: 600
|
||||
},
|
||||
legend: {
|
||||
shwo: true,
|
||||
position: {
|
||||
top: 15,
|
||||
right: 'center'
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
show: true,
|
||||
start: 0,
|
||||
end: 20,
|
||||
position: {
|
||||
left: 40,
|
||||
bottom: 18
|
||||
}
|
||||
},
|
||||
dataset: [
|
||||
{
|
||||
source: sourceData0
|
||||
},
|
||||
{
|
||||
source: sourceData1
|
||||
},
|
||||
{
|
||||
source: sourceData2
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 0,
|
||||
transform: { 'type': 'boxplot' }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 1,
|
||||
transform: { 'type': 'boxplot' }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: 2,
|
||||
transform: { 'type': 'boxplot' }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'category_0',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 3
|
||||
},
|
||||
{
|
||||
name: 'category_1',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 4
|
||||
},
|
||||
{
|
||||
name: 'category_2',
|
||||
type: 'boxplot',
|
||||
datasetIndex: 5
|
||||
}
|
||||
],
|
||||
tipHtml: (params) => {
|
||||
const { data, color, seriesName } = params
|
||||
const labels = ['lower', 'Q3', 'median', 'Q1', 'upper']
|
||||
let htmlString = `<div style="font-weight:bold">${seriesName}</div>`
|
||||
let arr = []
|
||||
labels.forEach((item, index) => {
|
||||
let string = `<div>
|
||||
<span style="display:inline;width:10px;height:10px;
|
||||
margin-right:4px; border-radius:5px;border-style:solid;border-width: 1px
|
||||
border-color:${color};background-color:${color};></span>
|
||||
<span style="display:inline-block;width:90px">${item}:</span><span>${data[index + 1]}</span>
|
||||
</div>`
|
||||
arr.push(string)
|
||||
})
|
||||
htmlString += arr.join('')
|
||||
return htmlString
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let data = this.$refs.chart.prepareBoxplotData([
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
])
|
||||
|
||||
this.option = {
|
||||
title: [
|
||||
{
|
||||
text: 'Michelson-Morley Experiment',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
|
||||
borderColor: '#999',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
left: '10%',
|
||||
top: '90%'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'km/s minus 299,000',
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'boxplot',
|
||||
type: 'boxplot',
|
||||
data: data.boxData,
|
||||
tooltip: {
|
||||
formatter(param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[5],
|
||||
'Q3: ' + param.data[4],
|
||||
'median: ' + param.data[3],
|
||||
'Q1: ' + param.data[2],
|
||||
'lower: ' + param.data[1]
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'outlier',
|
||||
type: 'scatter',
|
||||
data: data.outliers
|
||||
}
|
||||
]
|
||||
makeData() {
|
||||
let data = []
|
||||
for (let i = 0; i < 18; i++) {
|
||||
let cate = []
|
||||
for (let j = 0; j < 100; j++) {
|
||||
cate.push(parseFloat('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 200)
|
||||
}
|
||||
data.push(cate)
|
||||
}
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,314 +8,63 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
const baseData = [
|
||||
['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
|
||||
['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
|
||||
['2004-01-07', 10535.46, 10529.03, 10432.12, 10587.55, 225490000],
|
||||
['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
|
||||
['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
|
||||
['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
|
||||
['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
|
||||
['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
|
||||
['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
|
||||
['2004-01-16', 10556.37, 10600.51, 10503.71, 10666.88, 254170000],
|
||||
['2004-01-20', 10601.42, 10528.66, 10447.92, 10676.96, 224300000],
|
||||
['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.72, 214920000],
|
||||
['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.41, 219720000],
|
||||
['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
|
||||
['2004-01-26', 10568.12, 10702.51, 10510.44, 10725.18, 186170000],
|
||||
['2004-01-27', 10701.11, 10609.92, 10579.33, 10748.81, 206560000],
|
||||
['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
|
||||
['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
|
||||
['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
|
||||
['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
|
||||
['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
|
||||
['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
|
||||
['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
|
||||
['2004-02-06', 10494.89, 10593.03, 10433.74, 10634.81, 182880000],
|
||||
['2004-02-09', 10592.41, 10579.03, 10433.72, 10634.81, 160720000],
|
||||
['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
|
||||
['2004-02-11', 10605.48, 10737.72, 10561.55, 10779.41, 277850000],
|
||||
['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
|
||||
['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
|
||||
['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
|
||||
['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
|
||||
['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
|
||||
['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
|
||||
['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
|
||||
['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.41, 225670000],
|
||||
['2004-02-25', 10566.59, 10601.62, 10509.42, 10660.73, 192420000],
|
||||
['2004-02-26', 10598.14, 10580.14, 10493.71, 10652.96, 223230000],
|
||||
['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
]
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
data: handleData()
|
||||
})
|
||||
const chartSettings = ref({})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,317 +13,69 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
]
|
||||
},
|
||||
chartSettings: {}
|
||||
baseData: [
|
||||
['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
|
||||
['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
|
||||
['2004-01-07', 10535.46, 10529.03, 10432.12, 10587.55, 225490000],
|
||||
['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
|
||||
['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
|
||||
['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
|
||||
['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
|
||||
['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
|
||||
['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
|
||||
['2004-01-16', 10556.37, 10600.51, 10503.71, 10666.88, 254170000],
|
||||
['2004-01-20', 10601.42, 10528.66, 10447.92, 10676.96, 224300000],
|
||||
['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.72, 214920000],
|
||||
['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.41, 219720000],
|
||||
['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
|
||||
['2004-01-26', 10568.12, 10702.51, 10510.44, 10725.18, 186170000],
|
||||
['2004-01-27', 10701.11, 10609.92, 10579.33, 10748.81, 206560000],
|
||||
['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
|
||||
['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
|
||||
['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
|
||||
['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
|
||||
['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
|
||||
['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
|
||||
['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
|
||||
['2004-02-06', 10494.89, 10593.03, 10433.74, 10634.81, 182880000],
|
||||
['2004-02-09', 10592.41, 10579.03, 10433.72, 10634.81, 160720000],
|
||||
['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
|
||||
['2004-02-11', 10605.48, 10737.72, 10561.55, 10779.41, 277850000],
|
||||
['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
|
||||
['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
|
||||
['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
|
||||
['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
|
||||
['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
|
||||
['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
|
||||
['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
|
||||
['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.41, 225670000],
|
||||
['2004-02-25', 10566.59, 10601.62, 10509.42, 10660.73, 192420000],
|
||||
['2004-02-26', 10598.14, 10580.14, 10493.71, 10652.96, 223230000],
|
||||
['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]
|
||||
],
|
||||
options: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,3 @@ test('demo6', async ({ page }) => {
|
|||
const chart = page.locator('#candle-demo6 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo6.png')
|
||||
})
|
||||
|
||||
test('demo7', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo7')
|
||||
const chart = page.locator('#candle-demo7 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo7.png')
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,49 +8,330 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 使用简化的数据格式
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
|
||||
['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
|
||||
['2004-01-07', 10535.46, 10529.03, 10432, 10587.55, 225490000],
|
||||
['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
|
||||
['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
|
||||
['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
|
||||
['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
|
||||
['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
|
||||
['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
|
||||
['2004-01-16', 10556.37, 10600.51, 10503.7, 10666.88, 254170000],
|
||||
['2004-01-20', 10601.4, 10528.66, 10447.92, 10676.96, 224300000],
|
||||
['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.7, 214920000],
|
||||
['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.4, 219720000],
|
||||
['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
|
||||
['2004-01-26', 10568, 10702.51, 10510.44, 10725.18, 186170000],
|
||||
['2004-01-27', 10701.1, 10609.92, 10579.33, 10748.81, 206560000],
|
||||
['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
|
||||
['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
|
||||
['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
|
||||
['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
|
||||
['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
|
||||
['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
|
||||
['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
|
||||
['2004-02-06', 10494.89, 10593.03, 10433.7, 10634.81, 182880000],
|
||||
['2004-02-09', 10592, 10579.03, 10433.7, 10634.81, 160720000],
|
||||
['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
|
||||
['2004-02-11', 10605.48, 10737.7, 10561.55, 10779.4, 277850000],
|
||||
['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
|
||||
['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
|
||||
['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
|
||||
['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
|
||||
['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
|
||||
['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
|
||||
['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
|
||||
['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.4, 225670000],
|
||||
['2004-02-25', 10566.59, 10601.62, 10509.4, 10660.73, 192420000],
|
||||
['2004-02-26', 10598.14, 10580.14, 10493.7, 10652.96, 223230000],
|
||||
['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]
|
||||
const baseData = [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
MA: [5, 10, 20, 30],
|
||||
data: handleData()
|
||||
})
|
||||
const chartSettings = ref({})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,52 +13,336 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 使用简化的数据格式
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
|
||||
['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
|
||||
['2004-01-07', 10535.46, 10529.03, 10432, 10587.55, 225490000],
|
||||
['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
|
||||
['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
|
||||
['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
|
||||
['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
|
||||
['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
|
||||
['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
|
||||
['2004-01-16', 10556.37, 10600.51, 10503.7, 10666.88, 254170000],
|
||||
['2004-01-20', 10601.4, 10528.66, 10447.92, 10676.96, 224300000],
|
||||
['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.7, 214920000],
|
||||
['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.4, 219720000],
|
||||
['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
|
||||
['2004-01-26', 10568, 10702.51, 10510.44, 10725.18, 186170000],
|
||||
['2004-01-27', 10701.1, 10609.92, 10579.33, 10748.81, 206560000],
|
||||
['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
|
||||
['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
|
||||
['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
|
||||
['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
|
||||
['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
|
||||
['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
|
||||
['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
|
||||
['2004-02-06', 10494.89, 10593.03, 10433.7, 10634.81, 182880000],
|
||||
['2004-02-09', 10592, 10579.03, 10433.7, 10634.81, 160720000],
|
||||
['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
|
||||
['2004-02-11', 10605.48, 10737.7, 10561.55, 10779.4, 277850000],
|
||||
['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
|
||||
['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
|
||||
['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
|
||||
['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
|
||||
['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
|
||||
['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
|
||||
['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
|
||||
['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.4, 225670000],
|
||||
['2004-02-25', 10566.59, 10601.62, 10509.4, 10660.73, 192420000],
|
||||
['2004-02-26', 10598.14, 10580.14, 10493.7, 10652.96, 223230000],
|
||||
['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]
|
||||
baseData: [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
},
|
||||
chartSettings: {}
|
||||
],
|
||||
options: {
|
||||
MA: [5, 10, 20, 30],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,317 +8,330 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 设置数据格式
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
const baseData = [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
dataType: 'KMB'
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
volume: true,
|
||||
data: handleData()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,320 +13,336 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 设置数据格式
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
baseData: [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
dataType: 'KMB'
|
||||
],
|
||||
options: {
|
||||
volume: true,
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,318 +8,334 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 显示MA, VOL
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
const baseData = [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
showMA: true,
|
||||
showVol: true
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
dataZoom: {
|
||||
show: true
|
||||
},
|
||||
volumne: true,
|
||||
MA: [5, 10, 20, 30],
|
||||
data: handleData()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,321 +13,340 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 显示MA, VOL
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
baseData: [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
showMA: true,
|
||||
showVol: true
|
||||
],
|
||||
options: {
|
||||
dataZoom: {
|
||||
show: true
|
||||
},
|
||||
volumne: true,
|
||||
MA: [5, 10, 20, 30],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,325 +8,331 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 修改指标名和图例文字
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
const baseData = [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
showMA: true,
|
||||
showVol: true,
|
||||
labelMap: {
|
||||
MA5: 'ma5'
|
||||
},
|
||||
legendName: {
|
||||
日K: 'day k'
|
||||
},
|
||||
showDataZoom: true
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
padding: ['20%', 100, '20%', 100],
|
||||
MA: [5, 10, 20, 30],
|
||||
data: handleData()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,328 +13,337 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 修改指标名和图例文字
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
baseData: [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
showMA: true,
|
||||
showVol: true,
|
||||
labelMap: {
|
||||
MA5: 'ma5'
|
||||
},
|
||||
legendName: {
|
||||
日K: 'day k'
|
||||
},
|
||||
showDataZoom: true
|
||||
],
|
||||
options: {
|
||||
padding: ['20%', 100, '20%', 100],
|
||||
MA: [5, 10, 20, 30],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
<tiny-chart-candle :options="options"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,318 +8,350 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 修改 MA 显示周期
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
const baseData = [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
showMA: true,
|
||||
MA: [1, 2, 3, 4]
|
||||
]
|
||||
|
||||
function handleData() {
|
||||
const newData = baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
|
||||
const options = ref({
|
||||
volume: true,
|
||||
grid: [
|
||||
{
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '25%',
|
||||
height: '40%'
|
||||
},
|
||||
{
|
||||
top: '55%',
|
||||
left: '5%',
|
||||
right: '25%',
|
||||
height: '30%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
right: '5%',
|
||||
top: '50%',
|
||||
left: 'auto'
|
||||
},
|
||||
data: handleData()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
<tiny-candle :options="options"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,321 +13,356 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 修改 MA 显示周期
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
baseData: [
|
||||
[
|
||||
'2004-01-05',
|
||||
10411.85,
|
||||
10544.07,
|
||||
10411.85,
|
||||
10575.92,
|
||||
221290000
|
||||
],
|
||||
[
|
||||
'2004-01-06',
|
||||
10543.85,
|
||||
10538.66,
|
||||
10454.37,
|
||||
10584.07,
|
||||
191460000
|
||||
],
|
||||
[
|
||||
'2004-01-07',
|
||||
10535.46,
|
||||
10529.03,
|
||||
10432.12,
|
||||
10587.55,
|
||||
225490000
|
||||
],
|
||||
[
|
||||
'2004-01-08',
|
||||
10530.07,
|
||||
10592.44,
|
||||
10480.59,
|
||||
10651.99,
|
||||
237770000
|
||||
],
|
||||
[
|
||||
'2004-01-09',
|
||||
10589.25,
|
||||
10458.89,
|
||||
10420.52,
|
||||
10603.48,
|
||||
223250000
|
||||
],
|
||||
[
|
||||
'2004-01-12',
|
||||
10461.55,
|
||||
10485.18,
|
||||
10389.85,
|
||||
10543.03,
|
||||
197960000
|
||||
],
|
||||
[
|
||||
'2004-01-13',
|
||||
10485.18,
|
||||
10427.18,
|
||||
10341.19,
|
||||
10539.25,
|
||||
197310000
|
||||
],
|
||||
[
|
||||
'2004-01-14',
|
||||
10428.67,
|
||||
10538.37,
|
||||
10426.89,
|
||||
10573.85,
|
||||
186280000
|
||||
],
|
||||
[
|
||||
'2004-01-15',
|
||||
10534.52,
|
||||
10553.85,
|
||||
10454.52,
|
||||
10639.03,
|
||||
260090000
|
||||
],
|
||||
[
|
||||
'2004-01-16',
|
||||
10556.37,
|
||||
10600.51,
|
||||
10503.71,
|
||||
10666.88,
|
||||
254170000
|
||||
],
|
||||
[
|
||||
'2004-01-20',
|
||||
10601.42,
|
||||
10528.66,
|
||||
10447.92,
|
||||
10676.96,
|
||||
224300000
|
||||
],
|
||||
[
|
||||
'2004-01-21',
|
||||
10522.77,
|
||||
10623.62,
|
||||
10453.11,
|
||||
10665.72,
|
||||
214920000
|
||||
],
|
||||
[
|
||||
'2004-01-22',
|
||||
10624.22,
|
||||
10623.18,
|
||||
10545.03,
|
||||
10717.41,
|
||||
219720000
|
||||
],
|
||||
[
|
||||
'2004-01-23',
|
||||
10625.25,
|
||||
10568.29,
|
||||
10490.14,
|
||||
10691.77,
|
||||
234260000
|
||||
],
|
||||
[
|
||||
'2004-01-26',
|
||||
10568.12,
|
||||
10702.51,
|
||||
10510.44,
|
||||
10725.18,
|
||||
186170000
|
||||
],
|
||||
[
|
||||
'2004-01-27',
|
||||
10701.11,
|
||||
10609.92,
|
||||
10579.33,
|
||||
10748.81,
|
||||
206560000
|
||||
],
|
||||
[
|
||||
'2004-01-28',
|
||||
10610.07,
|
||||
10468.37,
|
||||
10412.44,
|
||||
10703.25,
|
||||
247660000
|
||||
],
|
||||
[
|
||||
'2004-01-29',
|
||||
10467.41,
|
||||
10510.29,
|
||||
10369.92,
|
||||
10611.56,
|
||||
273970000
|
||||
],
|
||||
[
|
||||
'2004-01-30',
|
||||
10510.22,
|
||||
10488.07,
|
||||
10385.56,
|
||||
10551.03,
|
||||
208990000
|
||||
],
|
||||
[
|
||||
'2004-02-02',
|
||||
10487.78,
|
||||
10499.18,
|
||||
10395.55,
|
||||
10614.44,
|
||||
224800000
|
||||
],
|
||||
[
|
||||
'2004-02-03',
|
||||
10499.48,
|
||||
10505.18,
|
||||
10414.15,
|
||||
10571.48,
|
||||
183810000
|
||||
],
|
||||
[
|
||||
'2004-02-04',
|
||||
10503.11,
|
||||
10470.74,
|
||||
10394.81,
|
||||
10567.85,
|
||||
227760000
|
||||
],
|
||||
[
|
||||
'2004-02-05',
|
||||
10469.33,
|
||||
10495.55,
|
||||
10399.92,
|
||||
10566.37,
|
||||
187810000
|
||||
],
|
||||
[
|
||||
'2004-02-06',
|
||||
10494.89,
|
||||
10593.03,
|
||||
10433.74,
|
||||
10634.81,
|
||||
182880000
|
||||
],
|
||||
[
|
||||
'2004-02-09',
|
||||
10592.41,
|
||||
10579.03,
|
||||
10433.72,
|
||||
10634.81,
|
||||
160720000
|
||||
],
|
||||
[
|
||||
'2004-02-10',
|
||||
10578.74,
|
||||
10613.85,
|
||||
10511.18,
|
||||
10667.03,
|
||||
160590000
|
||||
],
|
||||
[
|
||||
'2004-02-11',
|
||||
10605.48,
|
||||
10737.72,
|
||||
10561.55,
|
||||
10779.41,
|
||||
277850000
|
||||
],
|
||||
[
|
||||
'2004-02-12',
|
||||
10735.18,
|
||||
10694.07,
|
||||
10636.44,
|
||||
10775.03,
|
||||
197560000
|
||||
],
|
||||
[
|
||||
'2004-02-13',
|
||||
10696.22,
|
||||
10627.85,
|
||||
10578.66,
|
||||
10755.47,
|
||||
208340000
|
||||
],
|
||||
[
|
||||
'2004-02-17',
|
||||
10628.88,
|
||||
10714.88,
|
||||
10628.88,
|
||||
10762.07,
|
||||
169730000
|
||||
],
|
||||
[
|
||||
'2004-02-18',
|
||||
10706.68,
|
||||
10671.99,
|
||||
10623.62,
|
||||
10764.36,
|
||||
164370000
|
||||
],
|
||||
[
|
||||
'2004-02-19',
|
||||
10674.59,
|
||||
10664.73,
|
||||
10626.44,
|
||||
10794.95,
|
||||
219890000
|
||||
],
|
||||
[
|
||||
'2004-02-20',
|
||||
10666.29,
|
||||
10619.03,
|
||||
10559.11,
|
||||
10722.77,
|
||||
220560000
|
||||
],
|
||||
[
|
||||
'2004-02-23',
|
||||
10619.55,
|
||||
10609.62,
|
||||
10508.89,
|
||||
10711.84,
|
||||
229950000
|
||||
],
|
||||
[
|
||||
'2004-02-24',
|
||||
10609.55,
|
||||
10566.37,
|
||||
10479.33,
|
||||
10681.41,
|
||||
225670000
|
||||
],
|
||||
[
|
||||
'2004-02-25',
|
||||
10566.59,
|
||||
10601.62,
|
||||
10509.42,
|
||||
10660.73,
|
||||
192420000
|
||||
],
|
||||
[
|
||||
'2004-02-26',
|
||||
10598.14,
|
||||
10580.14,
|
||||
10493.71,
|
||||
10652.96,
|
||||
223230000
|
||||
],
|
||||
[
|
||||
'2004-02-27',
|
||||
10581.55,
|
||||
10583.92,
|
||||
10519.03,
|
||||
10689.55,
|
||||
200050000
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
showMA: true,
|
||||
MA: [1, 2, 3, 4]
|
||||
],
|
||||
options: {
|
||||
volume: true,
|
||||
grid: [
|
||||
{
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '25%',
|
||||
height: '40%'
|
||||
},
|
||||
{
|
||||
top: '55%',
|
||||
left: '5%',
|
||||
right: '25%',
|
||||
height: '30%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
right: '5%',
|
||||
top: '50%',
|
||||
left: 'auto'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
const newData = this.baseData.map((item) => {
|
||||
const obj = {
|
||||
date: item[0],
|
||||
open: item[1],
|
||||
close: item[2],
|
||||
lowest: item[3],
|
||||
highest: item[4],
|
||||
volumn: item[5]
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return newData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options.data = this.handleData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,326 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
|
||||
|
||||
// 设置 dataRoom 控件
|
||||
const chartData = ref({
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
showDataZoom: true,
|
||||
start: 20,
|
||||
end: 100
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,334 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-candle :data="chartData" :settings="chartSettings"></tiny-candle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { ChartCandle } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCandle: ChartCandle
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 设置 dataRoom 控件
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{
|
||||
日期: '2004-01-05',
|
||||
open: 10411.85,
|
||||
close: 10544.07,
|
||||
lowest: 10411.85,
|
||||
highest: 10575.92,
|
||||
vol: 221290000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-06',
|
||||
open: 10543.85,
|
||||
close: 10538.66,
|
||||
lowest: 10454.37,
|
||||
highest: 10584.07,
|
||||
vol: 191460000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-07',
|
||||
open: 10535.46,
|
||||
close: 10529.03,
|
||||
lowest: 10432.12,
|
||||
highest: 10587.55,
|
||||
vol: 225490000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-08',
|
||||
open: 10530.07,
|
||||
close: 10592.44,
|
||||
lowest: 10480.59,
|
||||
highest: 10651.99,
|
||||
vol: 237770000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-09',
|
||||
open: 10589.25,
|
||||
close: 10458.89,
|
||||
lowest: 10420.52,
|
||||
highest: 10603.48,
|
||||
vol: 223250000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-12',
|
||||
open: 10461.55,
|
||||
close: 10485.18,
|
||||
lowest: 10389.85,
|
||||
highest: 10543.03,
|
||||
vol: 197960000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-13',
|
||||
open: 10485.18,
|
||||
close: 10427.18,
|
||||
lowest: 10341.19,
|
||||
highest: 10539.25,
|
||||
vol: 197310000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-14',
|
||||
open: 10428.67,
|
||||
close: 10538.37,
|
||||
lowest: 10426.89,
|
||||
highest: 10573.85,
|
||||
vol: 186280000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-15',
|
||||
open: 10534.52,
|
||||
close: 10553.85,
|
||||
lowest: 10454.52,
|
||||
highest: 10639.03,
|
||||
vol: 260090000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-16',
|
||||
open: 10556.37,
|
||||
close: 10600.51,
|
||||
lowest: 10503.71,
|
||||
highest: 10666.88,
|
||||
vol: 254170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-20',
|
||||
open: 10601.42,
|
||||
close: 10528.66,
|
||||
lowest: 10447.92,
|
||||
highest: 10676.96,
|
||||
vol: 224300000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-21',
|
||||
open: 10522.77,
|
||||
close: 10623.62,
|
||||
lowest: 10453.11,
|
||||
highest: 10665.72,
|
||||
vol: 214920000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-22',
|
||||
open: 10624.22,
|
||||
close: 10623.18,
|
||||
lowest: 10545.03,
|
||||
highest: 10717.41,
|
||||
vol: 219720000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-23',
|
||||
open: 10625.25,
|
||||
close: 10568.29,
|
||||
lowest: 10490.14,
|
||||
highest: 10691.77,
|
||||
vol: 234260000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-26',
|
||||
open: 10568.12,
|
||||
close: 10702.51,
|
||||
lowest: 10510.44,
|
||||
highest: 10725.18,
|
||||
vol: 186170000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-27',
|
||||
open: 10701.11,
|
||||
close: 10609.92,
|
||||
lowest: 10579.33,
|
||||
highest: 10748.81,
|
||||
vol: 206560000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-28',
|
||||
open: 10610.07,
|
||||
close: 10468.37,
|
||||
lowest: 10412.44,
|
||||
highest: 10703.25,
|
||||
vol: 247660000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-29',
|
||||
open: 10467.41,
|
||||
close: 10510.29,
|
||||
lowest: 10369.92,
|
||||
highest: 10611.56,
|
||||
vol: 273970000
|
||||
},
|
||||
{
|
||||
日期: '2004-01-30',
|
||||
open: 10510.22,
|
||||
close: 10488.07,
|
||||
lowest: 10385.56,
|
||||
highest: 10551.03,
|
||||
vol: 208990000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-02',
|
||||
open: 10487.78,
|
||||
close: 10499.18,
|
||||
lowest: 10395.55,
|
||||
highest: 10614.44,
|
||||
vol: 224800000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-03',
|
||||
open: 10499.48,
|
||||
close: 10505.18,
|
||||
lowest: 10414.15,
|
||||
highest: 10571.48,
|
||||
vol: 183810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-04',
|
||||
open: 10503.11,
|
||||
close: 10470.74,
|
||||
lowest: 10394.81,
|
||||
highest: 10567.85,
|
||||
vol: 227760000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-05',
|
||||
open: 10469.33,
|
||||
close: 10495.55,
|
||||
lowest: 10399.92,
|
||||
highest: 10566.37,
|
||||
vol: 187810000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-06',
|
||||
open: 10494.89,
|
||||
close: 10593.03,
|
||||
lowest: 10433.74,
|
||||
highest: 10634.81,
|
||||
vol: 182880000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-09',
|
||||
open: 10592.41,
|
||||
close: 10579.03,
|
||||
lowest: 10433.72,
|
||||
highest: 10634.81,
|
||||
vol: 160720000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-10',
|
||||
open: 10578.74,
|
||||
close: 10613.85,
|
||||
lowest: 10511.18,
|
||||
highest: 10667.03,
|
||||
vol: 160590000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-11',
|
||||
open: 10605.48,
|
||||
close: 10737.72,
|
||||
lowest: 10561.55,
|
||||
highest: 10779.41,
|
||||
vol: 277850000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-12',
|
||||
open: 10735.18,
|
||||
close: 10694.07,
|
||||
lowest: 10636.44,
|
||||
highest: 10775.03,
|
||||
vol: 197560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-13',
|
||||
open: 10696.22,
|
||||
close: 10627.85,
|
||||
lowest: 10578.66,
|
||||
highest: 10755.47,
|
||||
vol: 208340000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-17',
|
||||
open: 10628.88,
|
||||
close: 10714.88,
|
||||
lowest: 10628.88,
|
||||
highest: 10762.07,
|
||||
vol: 169730000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-18',
|
||||
open: 10706.68,
|
||||
close: 10671.99,
|
||||
lowest: 10623.62,
|
||||
highest: 10764.36,
|
||||
vol: 164370000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-19',
|
||||
open: 10674.59,
|
||||
close: 10664.73,
|
||||
lowest: 10626.44,
|
||||
highest: 10794.95,
|
||||
vol: 219890000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-20',
|
||||
open: 10666.29,
|
||||
close: 10619.03,
|
||||
lowest: 10559.11,
|
||||
highest: 10722.77,
|
||||
vol: 220560000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-23',
|
||||
open: 10619.55,
|
||||
close: 10609.62,
|
||||
lowest: 10508.89,
|
||||
highest: 10711.84,
|
||||
vol: 229950000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-24',
|
||||
open: 10609.55,
|
||||
close: 10566.37,
|
||||
lowest: 10479.33,
|
||||
highest: 10681.41,
|
||||
vol: 225670000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-25',
|
||||
open: 10566.59,
|
||||
close: 10601.62,
|
||||
lowest: 10509.42,
|
||||
highest: 10660.73,
|
||||
vol: 192420000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-26',
|
||||
open: 10598.14,
|
||||
close: 10580.14,
|
||||
lowest: 10493.71,
|
||||
highest: 10652.96,
|
||||
vol: 223230000
|
||||
},
|
||||
{
|
||||
日期: '2004-02-27',
|
||||
open: 10581.55,
|
||||
close: 10583.92,
|
||||
lowest: 10519.03,
|
||||
highest: 10689.55,
|
||||
vol: 200050000
|
||||
}
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
showDataZoom: true,
|
||||
start: 20,
|
||||
end: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,26 +1,22 @@
|
|||
<template>
|
||||
<tiny-chart-pie :data="chartData" :settings="chartSettings" :events="chartEvents" judge-width> </tiny-chart-pie>
|
||||
<tiny-chart-pie :options="options" :events="chartEvents" judge-width> </tiny-chart-pie>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { ChartPie as TinyChartPie, Modal as TinyModal } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ 日期: '1/1', 访问用户: 1393 },
|
||||
{ 日期: '1/2', 访问用户: 3530 },
|
||||
{ 日期: '1/3', 访问用户: 2923 },
|
||||
{ 日期: '1/4', 访问用户: 1723 },
|
||||
{ 日期: '1/5', 访问用户: 3792 },
|
||||
{ 日期: '1/6', 访问用户: 4593 }
|
||||
const options = ref({
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ name: '1/1', value: 1393 },
|
||||
{ name: '1/2', value: 3530 },
|
||||
{ name: '1/3', value: 2923 },
|
||||
{ name: '1/4', value: 1723 },
|
||||
{ name: '1/5', value: 3792 },
|
||||
{ name: '1/6', value: 4593 }
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({
|
||||
selectedMode: 'single',
|
||||
hoverAnimation: false
|
||||
})
|
||||
const chartEvents = ref({
|
||||
click: (data) => {
|
||||
TinyModal.alert(`被点击日期：${data.name}`)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-pie :data="chartData" :settings="chartSettings" :events="chartEvents" judge-width> </tiny-pie>
|
||||
<tiny-pie :options="options" :events="chartEvents" judge-width> </tiny-pie>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -11,21 +11,17 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ 日期: '1/1', 访问用户: 1393 },
|
||||
{ 日期: '1/2', 访问用户: 3530 },
|
||||
{ 日期: '1/3', 访问用户: 2923 },
|
||||
{ 日期: '1/4', 访问用户: 1723 },
|
||||
{ 日期: '1/5', 访问用户: 3792 },
|
||||
{ 日期: '1/6', 访问用户: 4593 }
|
||||
options: {
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ name: '1/1', value: 1393 },
|
||||
{ name: '1/2', value: 3530 },
|
||||
{ name: '1/3', value: 2923 },
|
||||
{ name: '1/4', value: 1723 },
|
||||
{ name: '1/5', value: 3792 },
|
||||
{ name: '1/6', value: 4593 }
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
selectedMode: 'single',
|
||||
hoverAnimation: false
|
||||
},
|
||||
chartEvents: {
|
||||
click: (data) => {
|
||||
TinyModal.alert(`被点击日期：${data.name}`)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,14 +8,12 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
const options = ref({
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
})
|
||||
const chartSettings = ref({})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,16 +13,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
options: {
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
},
|
||||
chartSettings: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,18 +8,13 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '状态1', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 状态1: '展示1', 数值: 900 },
|
||||
{ 状态: '访问', 状态1: '访问1', 数值: 600 },
|
||||
{ 状态: '点击', 状态1: '点击1', 数值: 300 },
|
||||
{ 状态: '订单', 状态1: '订单1', 数值: 100 }
|
||||
const options = ref({
|
||||
sort: 'ascending',
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
})
|
||||
// 指定指标维度
|
||||
const chartSettings = ref({
|
||||
dimension: '状态1',
|
||||
metrics: '数值'
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,19 +13,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '状态1', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 状态1: '展示1', 数值: 900 },
|
||||
{ 状态: '访问', 状态1: '访问1', 数值: 600 },
|
||||
{ 状态: '点击', 状态1: '点击1', 数值: 300 },
|
||||
{ 状态: '订单', 状态1: '订单1', 数值: 100 }
|
||||
options: {
|
||||
sort: 'ascending',
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
},
|
||||
// 指定指标维度
|
||||
chartSettings: {
|
||||
dimension: '状态1',
|
||||
metrics: '数值'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,19 +8,14 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 100 },
|
||||
{ 状态: '零', 数值: 0 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 200 }
|
||||
const options = ref({
|
||||
maxSize: '80%',
|
||||
minSize: '10%',
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
})
|
||||
// 自动按照数值排序并过滤0值
|
||||
const chartSettings = ref({
|
||||
useDefaultOrder: true,
|
||||
filterZero: true
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,20 +13,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 100 },
|
||||
{ 状态: '零', 数值: 0 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 200 }
|
||||
options: {
|
||||
maxSize: '80%',
|
||||
minSize: '10%',
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
},
|
||||
// 自动按照数值排序并过滤0值
|
||||
chartSettings: {
|
||||
useDefaultOrder: true,
|
||||
filterZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,17 +8,30 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
const options = ref({
|
||||
gap: 10,
|
||||
size: {
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%'
|
||||
},
|
||||
position: {
|
||||
left: 'center',
|
||||
right: '80%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
funnelAlign: 'center',
|
||||
orient: 'horizontal'
|
||||
},
|
||||
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
})
|
||||
// 定制顺序漏斗图
|
||||
const chartSettings = ref({
|
||||
sequence: ['订单', '点击', '访问', '展示']
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,18 +13,30 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
options: {
|
||||
gap: 10,
|
||||
size: {
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%'
|
||||
},
|
||||
position: {
|
||||
left: 'center',
|
||||
right: '80%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
funnelAlign: 'center',
|
||||
orient: 'horizontal'
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
},
|
||||
// 定制顺序漏斗图
|
||||
chartSettings: {
|
||||
sequence: ['订单', '点击', '访问', '展示']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,17 +8,13 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 0.9 },
|
||||
{ 状态: '访问', 数值: 0.6 },
|
||||
{ 状态: '点击', 数值: 0.3 },
|
||||
{ 状态: '订单', 数值: 0.1 }
|
||||
const options = ref({
|
||||
color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41'], // 自定义颜色组，循环使用该颜色组
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
})
|
||||
// 指定数据类型漏斗图
|
||||
const chartSettings = ref({
|
||||
dataType: 'percent'
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,18 +13,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 0.9 },
|
||||
{ 状态: '访问', 数值: 0.6 },
|
||||
{ 状态: '点击', 数值: 0.3 },
|
||||
{ 状态: '订单', 数值: 0.1 }
|
||||
options: {
|
||||
color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41'], // 自定义颜色组，循环使用该颜色组
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' },
|
||||
]
|
||||
},
|
||||
// 指定数据类型漏斗图
|
||||
chartSettings: {
|
||||
dataType: 'percent'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,19 +8,19 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 0.9 },
|
||||
{ 状态: '访问', 数值: 0.6 },
|
||||
{ 状态: '点击', 数值: 0.3 },
|
||||
{ 状态: '订单', 数值: 0.1 }
|
||||
const options = ref({
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'circle',
|
||||
top: 'center',
|
||||
left: '85%',
|
||||
orient: 'vertical'
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' }
|
||||
]
|
||||
})
|
||||
// 修改legend别名漏斗图
|
||||
const chartSettings = ref({
|
||||
legendName: {
|
||||
订单: '订单 total:1000'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,20 +13,20 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 0.9 },
|
||||
{ 状态: '访问', 数值: 0.6 },
|
||||
{ 状态: '点击', 数值: 0.3 },
|
||||
{ 状态: '订单', 数值: 0.1 }
|
||||
options: {
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'circle',
|
||||
top: 'center',
|
||||
left: '85%',
|
||||
orient: 'vertical'
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' }
|
||||
]
|
||||
},
|
||||
// 修改legend别名漏斗图
|
||||
chartSettings: {
|
||||
legendName: {
|
||||
订单: '订单 total:1000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
|
||||
<tiny-chart-funnel :options="options"></tiny-chart-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,17 +8,29 @@
|
|||
import { ref } from 'vue'
|
||||
import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
|
||||
|
||||
const chartData = ref({
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
const options = ref({
|
||||
tipHtml: (params, ticket, callback) => {
|
||||
let htmlString =
|
||||
'div' +
|
||||
'<span style="display:inline-block;min-width:50px;">名称: </span>' +
|
||||
'<span style="font-weight:bold">' +
|
||||
params.name +
|
||||
'</span>' +
|
||||
'</div>'
|
||||
htmlString +=
|
||||
'div' +
|
||||
'<span style="display:inline-block;min-width:50px;">百分比: </span>' +
|
||||
'<span style="font-weight:bold">' +
|
||||
params.value +
|
||||
'</span>' +
|
||||
'</div>'
|
||||
return htmlString
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' }
|
||||
]
|
||||
})
|
||||
// 金字塔
|
||||
const chartSettings = ref({
|
||||
ascending: true
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
|
||||
<tiny-funnel :options="options"></tiny-funnel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,18 +13,30 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ 状态: '展示', 数值: 900 },
|
||||
{ 状态: '访问', 数值: 600 },
|
||||
{ 状态: '点击', 数值: 300 },
|
||||
{ 状态: '订单', 数值: 100 }
|
||||
options: {
|
||||
tipHtml: (params, ticket, callback) => {
|
||||
let htmlString =
|
||||
'div' +
|
||||
'<span style="display:inline-block;min-width:50px;">名称: </span>' +
|
||||
'<span style="font-weight:bold">' +
|
||||
params.name +
|
||||
'</span>' +
|
||||
'</div>'
|
||||
htmlString +=
|
||||
'div' +
|
||||
'<span style="display:inline-block;min-width:50px;">百分比: </span>' +
|
||||
'<span style="font-weight:bold">' +
|
||||
params.value +
|
||||
'</span>' +
|
||||
'</div>'
|
||||
return htmlString
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'Show' },
|
||||
{ value: 75, name: 'Click' },
|
||||
{ value: 50, name: 'Visit' },
|
||||
{ value: 25, name: 'Order' }
|
||||
]
|
||||
},
|
||||
// 金字塔
|
||||
chartSettings: {
|
||||
ascending: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue