本文介绍使用 ECharts 库实现实时更新的图表展示，包括时间轴配置、数据动态加载及系列类型设置等关键信息。
<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>
扫一扫
1317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
