在Vue3项目中使用 Echarts 绘制股票图表的分享（五）：分时图的基础上绘制出五日图

效果展示

分析：五日图其实也就是展示了相当于五天的分时图的数据量；对比前面的分时图绘制效果，我们可以发现：它多出了对这五天内的现价做个最高价和最低价的标注，并且对最新时间段的现价数据做个闪烁点+涟漪特效。

绘制五日图

关键代码

标注数据的最高价和最低价：

options['series'] = [{name: '当前价',type: 'line',data: prices.value,smooth: true,symbol: 'none',gridIndex: 3,lineStyle: {opacity: 1,color: '#FF3232',width: 0.5},markPoint: {label: {color: '#ffffff',fontSize: 10,formatter: function ({ value }: any) {return fomatFloat(value, 2);}},data: [{type: 'max',symbolOffset: [0, -12] // 设置markpoint图标的位置},{type: 'min',symbolOffset: [0, 12] // 设置markpoint图标的位置}],symbolSize: 0},markLine: {silent: true,symbol: 'none',label: {show: true,distance: [-40, 0]},lineStyle: {color: '#2B2F39',opacity: 1,type: 'dashed'},data: [{yAxis: close.value,lineStyle: {color: '#2b2f39'},label: {position: 'end',color: '#999999',fontWeight: 'bold',fontSize: 10,formatter: function () {return '0.00%';}}},{yAxis: close.value,lineStyle: {color: '#2b2f39'},label: {fontSize: 10,fontWeight: 'bold',color: '#999999',position: 'start',formatter: function (params: any) {return Number(params.value).toFixed(2);}}}]},emphasis: {focus: 'none',scale: false,disabled: 'none',lineStyle: {width: 1}}},......
]

markPoint 属性可以对图表的数据进行标注，借由该属性中的 data 字段里面的 type 我们可以在图表上标注出最高价和最低价。

当前时间节点数据的闪烁点：

  options['series'] = [......{gridIndex: 0,// 设置涟漪特效动画type: 'effectScatter',// 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2dcoordinateSystem: 'cartesian2d',// 单个闪烁点 ↓data: pricesEffectScatter, //2d坐标系--[x轴, y轴, 标记大小]// 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效showEffectOn: 'render',// 涟漪特效配置rippleEffect: {// 波纹的绘制方式,可选'stroke'和'fill'brushType: 'stroke'},// hoverAnimation: true,itemStyle: {color: '#F9293E',shadowBlur: 5,shadowColor: '#F9293E'},zlevel: 9}......]

现价中的闪烁点是使用带有涟漪特效动画的散点（气泡）图来实现的，它可以利用动画特效可以将某些想要突出的数据进行视觉突出。

官方涟漪特效散点图示例：

完整代码

<template><div class="stock-chart"><div class="stock-chart-box"><!-- 五日分时图 --><v-chart ref="vchart" v-if="showCharts" :option="options" :update-options="{ notMerge: true }" /><div class="fix-date"><div v-for="(item, index) in xDates">{{ item.slice(5, 10) }}</div></div></div></div>
</template><script lang="ts" setup>
import { ref, reactive, nextTick, onBeforeMount, onBeforeUnmount } from 'vue';
import 'echarts';
import VChart from 'vue-echarts';
import { initTime } from '@/utils/time.js';
// vchart组件的引用
const vchart = ref<any>(null);
// 昨日收盘价
let close = ref<number>(0);
// 现价数据
let prices = ref<number[]>([]);
// 均价数据
let avgPrices = ref<number[]>([]);
// 成交量
let volumes = ref<number[]>([]);
// 涨跌幅
let ratios = ref<number[]>([]);
// 涨跌额
let pcts = ref<number[]>([]);
// 最高价
let limitUp = ref<number>(0);
// 最低价
let limitDown = ref<number>(0);
// 最高涨幅
let pctChangeUp = ref<number>(0);
// 最低跌幅
let pctChangeDown = ref<number>(0);// 控制图表展示
let showCharts = ref<boolean>(false);// 交易日期数据
let xDates = ref<string[]>([]);
// 交易时间数据
let xTimes: string[] = initTime();// 当前时间现价的闪烁点
let pricesEffectScatter = [] as any[];// 图表配置项
let options = reactive({animation: false,grid: [{show: false,id: 'gd1',top: '7%',left: '5%',right: '5%',bottom: '40%'},{show: false,id: 'gd2',top: '7%',left: '5%',right: '5%',bottom: '40%'},{show: false,id: 'gd3',top: '60%',left: '5%',right: '5%',bottom: '7%'},{show: true,id: 'gd4',top: '7%',left: '5%',right: '5%',bottom: '7%',borderColor: '#2B2F39'}],color: ['#FF3232', '#FFCE37'],blendMode: 'source-over',xAxis: [] as any[],yAxis: [] as any[],series: [] as any[]
});function fomatFloat(src: any, pos = 2) {return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
}const initChart = () => {limitUp.value = 12.05;limitDown.value = 11.22;close.value = 11.81;let stockData: any = {};for (let key in stockData) {xDates.value.push(key);let length = 0;stockData[key].forEach((item: any, index: any, array: any) => {length = index + 1;prices.value.push(item[1]);avgPrices.value.push(item[7]);volumes.value.push(item[4]);pcts.value.push(item[9]);ratios.value.push(item[10]);});if (length < 241) {length = 241 - length;console.log(length);}let timeList = initTime();xTimes.push(...timeList);}// 闪烁点pricesEffectScatter = [{value: [prices.value.length, prices.value[prices.value.length - 1]],symbolSize: 5}];// 现价图图表四角的数据// 最大差值：昨日收盘价 - 股票信息中的最高价 对比 昨日收盘价 - 股票信息中的最低价 取绝对值 ，两者哪个相差比较大就用哪个差值// 最高价：昨日收盘价 + 最大差值// 最低价：昨日收盘价 - 最大差值// 最高涨幅：((昨日收盘价 + 最大差值) - 1) * 100// 最低跌幅：-((昨日收盘价 + 最大差值) - 1) * 100let maxSplit = Math.abs(limitUp.value - close.value) > Math.abs(close.value - limitDown.value) ? Math.abs(limitUp.value - close.value) : Math.abs(close.value - limitDown.value);limitUp.value = fomatFloat(Number(close.value + maxSplit));limitDown.value = fomatFloat(Number(close.value - maxSplit));pctChangeUp.value = fomatFloat((limitUp.value / close.value - 1) * 100);pctChangeDown.value = pctChangeUp.value > 0 ? fomatFloat(0 - pctChangeUp.value) : fomatFloat(pctChangeUp.value);options['xAxis'] = [{//主图show: true,gridIndex: 0,min: 0,max: 1205,interval: 241,type: 'category',splitNumber: 4,data: xTimes,boundaryGap: true,axisLine: {lineStyle: {color: '#2B2F39'}},axisLabel: {show: false},axisTick: {show: false},axisPointer: {fontSize: 10,label: {show: false}},splitLine: {show: true,interval: 240,lineStyle: {color: '#2B2F39',width: 1}}},{gridIndex: 1,show: false,min: 0,max: 1205,interval: 241,splitNumber: 20,data: xTimes,axisLabel: {show: false},axisPointer: {fontSize: 10,label: {show: false}},splitLine: {show: false}},{show: true,gridIndex: 2,min: 0,max: 1205,interval: 241,type: 'category',splitNumber: 240,axisLabel: {show: false,fontSize: 12,color: '#bcbcbc',interval: 240,padding: [0, 0, 0, 80]},data: xTimes,axisLine: {show: false},axisTick: {show: false},axisPointer: {show: true,label: {color: '#ffffff',backgroundColor: '#6E7079',fontSize: 10},lineStyle: {type: 'solid',width: 0.5}},splitLine: {show: true,interval: 240,lineStyle: {color: '2B2F39',width: 1}}},{show: false,gridIndex: 3,min: 0,max: 1205,type: 'category',interval: 240,axisLabel: {show: false,fontSize: 10,color: '#FC8952',interval: 240},splitLine: {show: false},data: xTimes,axisLine: {show: false},axisTick: {show: false},axisPointer: {show: true,label: {color: '#ffffff',backgroundColor: '#6E7079',fontSize: 10},lineStyle: {type: 'solid',width: 0.5}}}];options['yAxis'] = [{show: true,scale: true,gridIndex: 0,boundaryGap: false,min: limitDown,max: limitUp,axisLabel: {show: false,inside: false,fontSize: 10,color: function (value: any) {if (value == close.value) {return '#CCCCCC';}return value > close.value ? '#F9293E' : '#00aa3b';}},z: 2,axisLine: {show: false},splitLine: {show: false},axisPointer: {show: true,label: {color: '#ffffff',backgroundColor: '#6E7079',fontSize: 10,formatter: function ({ value }: any) {return value.toFixed(2);}},lineStyle: {type: 'solid',width: 0.5}}},{show: false,scale: true,gridIndex: 1,min: pctChangeDown.value,max: pctChangeUp.value,position: 'right',z: 3,axisLine: {show: false},axisTick: {show: false},axisLabel: {inside: false,fontSize: 10,formatter: function (value: any) {return value + '%';}},splitLine: {//分割线设置show: false,lineStyle: {color: '#181a23',width: 1}},axisPointer: {show: true,label: {color: '#ffffff',backgroundColor: '#6E7079',fontSize: 10,formatter: function ({ value }: any) {return value.toFixed(2) + '%';}},lineStyle: {type: 'solid',width: 0.5}}},{show: false,gridIndex: 2,z: 4,scale: true,type: 'value',splitNumber: 1,axisTick: {show: false},splitLine: {show: false,lineStyle: {color: '#FC8952',width: 1}},axisLine: {show: false},axisLabel: {color: '#FC8952',fontSize: 10,formatter: function (value: any) {return fomatFloat(value / 10000, 0) + '万';}},axisPointer: {fontSize: 10,label: {formatter: function ({ value }: any) {return fomatFloat(value / 10000, 0) + '万';}},lineStyle: {type: 'solid',width: 0.5}}},{show: false,position: 'right',gridIndex: 3,z: 5,scale: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false,fontSize: '12'},splitLine: {show: false}}];options['series'] = [{name: '当前价',type: 'line',data: prices.value,smooth: true,symbol: 'none',gridIndex: 3,lineStyle: {opacity: 1,color: '#FF3232',width: 0.5},markPoint: {label: {color: '#ffffff',fontSize: 10,formatter: function ({ value }: any) {return fomatFloat(value, 2);}},data: [{type: 'max',symbolOffset: [0, -12] // 设置markpoint图标的位置},{type: 'min',symbolOffset: [0, 12] // 设置markpoint图标的位置}],symbolSize: 0},markLine: {silent: true,symbol: 'none',label: {show: true,distance: [-40, 0]},lineStyle: {color: '#2B2F39',opacity: 1,type: 'dashed'},data: [{yAxis: close.value,lineStyle: {color: '#2b2f39'},label: {position: 'end',color: '#999999',fontWeight: 'bold',fontSize: 10,formatter: function () {return '0.00%';}}},{yAxis: close.value,lineStyle: {color: '#2b2f39'},label: {fontSize: 10,fontWeight: 'bold',color: '#999999',position: 'start',formatter: function (params: any) {return Number(params.value).toFixed(2);}}}]},emphasis: {focus: 'none',scale: false,disabled: 'none',lineStyle: {width: 1}}},{type: 'line',data: ratios.value,smooth: true,symbol: 'none',gridIndex: 1,xAxisIndex: 1,yAxisIndex: 1,lineStyle: {width: 0}},{name: '成交量',type: 'bar',gridIndex: 2,xAxisIndex: 2,yAxisIndex: 2,data: volumes.value,barWidth: '50%',itemStyle: {color: function ({ dataIndex }: any) {if (prices.value[dataIndex] >= prices.value[dataIndex - 1]) {return '#F9293E';} else {return '#009900';}}}},{//坐标系type: 'bar',gridIndex: 3,xAxisIndex: 3,yAxisIndex: 3},{gridIndex: 0,// 设置涟漪特效动画type: 'effectScatter',// 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2dcoordinateSystem: 'cartesian2d',// 单个闪烁点 ↓data: pricesEffectScatter, //2d坐标系--[x轴, y轴, 标记大小]// 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效showEffectOn: 'render',// 涟漪特效配置rippleEffect: {// 波纹的绘制方式,可选'stroke'和'fill'brushType: 'stroke'},// hoverAnimation: true,itemStyle: {color: '#F9293E',shadowBlur: 5,shadowColor: '#F9293E'},zlevel: 9}];nextTick(() => {showCharts.value = true;});
};const resizeTheChart = () => {if (vchart.value) {vchart.value.resize && vchart.value.resize();}
};onBeforeMount(() => {initChart();window.addEventListener('resize', resizeTheChart, { passive: true });
});onBeforeUnmount(() => {window.removeEventListener('resize', resizeTheChart);
});
</script>  <style scoped>
.stock-chart {width: 100vw;height: 100vh;background-color: #141923;
}
.stock-chart-box {position: relative;width: 100%;height: 6rem;z-index: 9;
}
.fix-date {position: absolute;left: 0;right: 0;bottom: 0;padding-left: 0.32rem;padding-right: 0.32rem;box-sizing: border-box;width: 100%;display: flex;align-items: center;justify-content: flex-start;
}
.fix-date > div {color: #b5b5b6;font-size: 0.24rem;flex: 0 1 20%;text-align: center;line-height: 1;
}
</style>

业务数据

五日分时图数据

在Vue3项目中使用 Echarts 绘制股票图表的分享（五）：分时图的基础上绘制出五日图相关推荐

vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
在Vue3项目中使用 Echarts 绘制股票图表的分享（三）：绘制成交量图
效果展示分析: 根据需要实现的效果图,我们可以进行分析,这是一个由柱状图且柱子有红绿两种颜色制作而成的成交量图. 绘制柱状图在开始写代码之前,我们依然可以去参考一下官方的一些示例,并进行分析.Ec ...
在vue项目中使用echarts中的dataset制作多维度的柱状图
1.背景公司给我分配了一个任务是做一个大屏项目,类似于监控中心那种.页面内容比较简单,最下面是两个柱状图,柱状图是多维度的,而我也是第一次在项目中使用echarts,记录一下此次过程. 2.开始 2 ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
正文工具链接: iconfont图标一键下载浏览器插件(2000+图标一秒下载打包) 示例链接: iconfont在vue3中按需使用和编译打包示例说明在vue3项目中使用iconfont图标是 ...
Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...