股票--分时图

本文介绍使用 ECharts 库实现实时更新的图表展示,包括时间轴配置、数据动态加载及系列类型设置等关键信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>

<div class="Minute">

<div id="Minute" style="width:100%;height:4.5rem;"></div>

</div>

</template>

 

<script>

import echarts from 'echarts'

 

export default {

name: 'Minute',

data () {

return {

data: [1, 3, 4, 1],

dates: ['09:00', '', '', '', '', '', '', '', '11:30/13:00', '', '', '', '', '', '', '', '', '', '', '15:00']

}

},

mounted () {

var myChart = echarts.init(document.getElementById('Minute'))

var option = {

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

label: {

backgroundColor: '#283b56'

}

}

},

xAxis: [

{

type: 'category',

boundaryGap: false,

data: this.dates,

interval: 120,

axisTick: {

length: 0

},

axisLabel: {

interval: 0,

show: true,

showMinLabel: true,

showMaxLabel: true

}

}

],

yAxis: [

{

type: 'value',

scale: true,

interval: 3,

// position: 'top',

// offset: 20,

boundaryGap: false,

axisLabel: {

inside: true,

// margin: 5,

textStyle: {

height: '50',

color: '#999',

fontSize: '10px'

}

},

splitLine: {

show: false

},

axisTick: {

show: false

}

}

],

grid: {

top: '15%',

// bottom: '5%',

left: '5%',

right: '5%'

},

series: [

{

name: '',

type: 'candlestick',

symbol: 'none',

smooth: true,

showSymbol: false,

data: []

},

{

name: '',

type: 'line',

showSymbol: false,

lineStyle: {

normal: {

color: '#62bff9',

border: '0.1'

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0, color: '#09e1e4'

}, {

offset: 1, color: '#b2f3f4'

}], false)

}

},

data: this.data

}

],

animation: false

}

setInterval(function () {

myChart.setOption(option)

}, 1000)

},

methods: {

}

}

</script>

 

<style>

 

</style>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值