人生的意义在于什么我也不太清楚,但我唯一清楚的就是要把脑海里的想法转换为实际
完整代码在底部！！！！
1.效果图
2.核心要点
- 分时图
- grid区分
- 分时图y轴左右侧设置数据
- 分时图x轴设置时间
- tooltip跟随展示
2.1 分时图
分时图本质上是由柱状图加折线图组合而成的图形,我们只需要实现折线图与柱状图的组合就可以了
2.2 grid区域
这里的grid主要用来设置折线图与柱状图所在的位置
less
grid: [
{
left: "7%",
right: "7%",
top: "2%",
height: "65%",
},
{
left: "7%",
right: "7%",
top: "75%",
height: "15%",
},
],那么问题来了,定义了grid之后,如何将x轴以及y轴相对应grid的区域呢？ 答:我们可以通过gridIndex来指定
css
xAxis:[
{gridIndex:0},
{gridIndex:1},
],
yAxis:[
{gridIndex:0},
{gridIndex:1},
]2.3 分时图y轴左右侧设置数据
1.首先分时图y轴左右两侧是根据今日开盘价来动态计算延申出数据的,其次开盘价是务必显示在页面上的,根据以上两点可以使用echarts中的min/max/interval来动态计算数据(左右侧同理),具体代码如下
css
yAxis:[
{
gridIndex: 0,
type: "value",
position: "left",
min,
max,
axisLabel: {
color: "#333",
formatter: format_y,
rich: {
red: { color: "red", lineHeight: 10 },
green: { color: "green", lineHeight: 10 },
},
},
position: ["-10%"],
interval: (max - min) / 8,
},
{
gridIndex: 0,
type: "value",
position: "right",
axisLabel: {
color: "#333",
formatter: format_y_rise,
rich: {
red: { color: "red", lineHeight: 10 },
green: { color: "green", lineHeight: 10 },
},
},
min,
max,
interval: (max - min) / 8,
},
]2.那么这样做会延伸出新的问题,如何动态计算min与max以及每个区间值呢? 1.通过拿到当前的最新价来进行获取最大值 2.拿到最大值之后将当前的开盘价相加/减算出y轴左侧展示的数据 3.通过拿到最大/小值之后在除当前显示的数量就可以拿到当前区间值
ini
const getInterval = (data) => {
const sortNew = data.slice().sort((a, b) => +a.newValue - +b.newValue);
return Math.max(
Math.abs(+lastClose - +sortNew[0].newValue),
Math.abs(+lastClose - +sortNew[data.length - 1].newValue)
);
};
const interval = getInterval(this.timeSharingData.innerFenshis);
let max, min;
if (Math.abs(lastClose + interval) == Math.abs(lastClose - interval)) {
max = lastClose + interval + 0.6;
min = lastClose - interval - 0.6;
} else {
max = lastClose + interval;
min = lastClose - interval;
}- 既然拿到具体区间值了,那么就剩下显示刻度的值了,这一步可以通过formatter来解决
javascript
function format_y(v) {
if (parseFloat(v.toFixed(2)) > parseFloat(lastClose.toFixed(2))) {
return `{red|${v.toFixed(2)}}`;
} else if (parseFloat(v.toFixed(2)) === parseFloat(lastClose.toFixed(2))) {
return v.toFixed(2);
} else {
return `{green|${v.toFixed(2)}}`;
}
}
function format_y_rise(v) {
let num = lastClose == 0 ? 1 : lastClose;
if (parseFloat(v.toFixed(2)) > parseFloat(num.toFixed(2))) {
return `{red|${(((v - num) / num) * 100).toFixed(2)}%}`;
} else if (parseFloat(v.toFixed(2)) === parseFloat(num.toFixed(2))) {
return "0.00%";
} else {
return `{green|${(((v - num) / num) * 100).toFixed(2)}%}`;
}
}2.4 分时图x轴设置时间
思考:无论y轴有没有数据,x轴都永远存在。所以这里需要在echarts初始化的时候就需要把x轴初始化出来
javascript
mounted() {
this.initEcharts();
this.setDefaultChartOptions();
},
methods:{
initEcharts() {
const element = document.getElementById("time-chart");
if (!element) return;
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(element);
},
setDefaultChartOptions() {
const timegroup = this.createTimeGroups();
const defaultOptions = {
grid:[
{
height:"65%",
left:"7%",
right:"7%",
bottom:"10%"
}
],
xAxis: [
{
type: "category",
data: timegroup,
axisLabel: {
interval: 0,
color: "#838D9E",
tooltip: false,
formatter: (value, index) => {
let arr = [
"09:30",
"10:00",
"10:30",
"11:00",
"11:30/13:30",
"14:00",
"14:30",
"15:00",
];
if (arr.includes(value)) return value;
},
},
axisTick: {
interval: (index, value) => {
let arrIndex = [30, 60, 90, 120, 150, 180];
return arrIndex.includes(index);
},
},
},
],
yAxis: [
{
type: "value",
},
],
series: [],
};
if (this.chart) {
this.chart?.setOption(defaultOptions);
}
},
createTimeGroups() {
let timegroup = [];
for (let i = 30; i < 60; i++) {
timegroup.push(`09:${i < 10 ? "0" + i : i}`);
}
for (let i = 0; i < 60; i++) {
timegroup.push(`10:${i < 10 ? "0" + i : i}`);
}
for (let i = 0; i < 30; i++) {
timegroup.push(`11:${i < 10 ? "0" + i : i}`);
}
timegroup.push("11:30/13:30");
for (let i = 31; i < 60; i++) {
if (i === 60) {
timegroup.push(`14:00`);
} else {
timegroup.push(`13:${i}`);
}
}
for (let i = 0; i < 30; i++) {
timegroup.push(`14:${i < 10 ? "0" + i : i}`);
}
for (let i = 30; i <= 60; i++) {
if (i === 60) {
timegroup.push(`15:00`);
} else {
timegroup.push(`14:${i}`);
}
}
return timegroup;
},
}2.5 tooltip跟随鼠标位置移动而显示
这里需要让tootil的层级显示为最高
javascript
tooltip: {
trigger: "axis",
backgroundColor: "#f1f1f1",
borderColor: "#ccc",
borderWidth: 1,
appendToBody: true,
textStyle: { color: "#333" },
axisPointer: {
type: "none",
label: { show: false, backgroundColor: "#333" },
},
zlevel: 1,
formatter: function (params) {
let color;
if (params[0].data.tradePrice > params[0].data.lastClose) {
color = 'style="color:red"';
} else {
color = 'style="color:green"';
}
return `
<div class="commColor" style="display: flex; flex-direction: column;">
<div>时间 <span>${params[0].data.time}</span></div>
<div>最新价 <span>${params[0].data.newValue}</span></div>
<div>均价 <span>${params[0].data.averValue}</span></div>
<div>均价 <span>${params[0].data.averValue}</span></div>
<div>成交量 <span style="color:black">${params[0].data.volumes}</span></div>
<div>总额 <span style="color:black">${params[0].data.totalPrice}</span></div>
</div>
`;
},
},3.完整代码
javascript
<template>
<div
id="time-chart"
style="width: 100%; height: 100%"
></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
chart: null,
timeSharingData: {
lastClose: 14.0,
innerFenshis: [
{
volumes: 500,
newValue: 14.0,
time: "09:31",
averValue: 14.32,
rose: 1,
totalPrice: 22,
},
{
volumes: 20,
newValue: 14.0,
time: "09:32",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 1400,
newValue: 14.0,
time: "09:33",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 14.2,
time: "09:34",
averValue: 15.0,
rose: 1,
totalPrice: 22,
},
{
volumes: 10,
newValue: 14.3,
time: "09:35",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 30,
newValue: 14.5,
time: "09:36",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.0,
time: "09:37",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 14.13,
time: "09:38",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 14.54,
time: "09:39",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.64,
time: "09:40",
averValue: 14.82,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 12.23,
time: "09:41",
averValue: 18.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 12.24,
time: "09:42",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 10,
newValue: 12.23,
time: "09:43",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 12.23,
averValue: 15.22,
time: "09:44",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 8.72,
time: "09:45",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.22,
time: "09:46",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 200,
newValue: 20.3,
time: "09:47",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 50,
newValue: 16.93,
time: "09:48",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
newValue: 14.14,
time: "09:49",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.23,
time: "09:50",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:51",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:52",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:53",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:54",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:55",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:56",
averValue: 14.32,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:57",
averValue: 14.42,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:58",
averValue: 14.52,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "09:59",
averValue: 14.82,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:00",
averValue: 10.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:01",
averValue: 10.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:02",
averValue: 10.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:31",
averValue: 10.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:31",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:32",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:33",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 9.13,
time: "10:34",
averValue: 11.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 15.13,
time: "10:35",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 15.22,
time: "10:36",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:36",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:37",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:38",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:39",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:40",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "10:41",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 800,
newValue: 16.13,
time: "10:42",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 600,
newValue: 18.13,
time: "10:43",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 400,
newValue: 18.13,
time: "10:44",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.2,
time: "10:45",
averValue: 16.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 300,
newValue: 18.13,
time: "10:46",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 200,
newValue: 18.13,
time: "10:46",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "10:46",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.22,
time: "10:47",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.33,
time: "10:48",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.44,
time: "10:49",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.45,
time: "10:50",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.13,
time: "10:51",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "10:52",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.13,
time: "10:53",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "10:54",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 200,
newValue: 18.33,
time: "10:55",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "10:56",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 400,
newValue: 18.13,
time: "10:57",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "10:58",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
time: "10:59",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 17.13,
time: "11:00",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 600,
newValue: 16.13,
time: "11:01",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
time: "11:02",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 400,
newValue: 17.13,
time: "11:03",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
time: "11:04",
averValue: 16.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 300,
newValue: 18.13,
time: "11:05",
averValue: 16.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:06",
averValue: 16.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 700,
newValue: 18.13,
time: "11:07",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 14.22,
time: "11:08",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:09",
averValue: 11.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:10",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:11",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:12",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:13",
averValue: 14.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:14",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.23,
time: "11:15",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:16",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:17",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:18",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 19.13,
time: "11:19",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 19.13,
time: "11:20",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:21",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 19.13,
time: "11:22",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 19.13,
time: "11:23",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 19.13,
time: "11:24",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 20.13,
time: "11:25",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:26",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:27",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:28",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:29",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
time: "11:30",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
time: "13:30",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
time: "13:31",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
time: "13:32",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
time: "13:33",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
time: "13:34",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
time: "13:34",
newValue: 11.13,
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
time: "13:35",
newValue: 11.13,
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
time: "13:36",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
averValue: 12.22,
time: "13:37",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
time: "13:38",
averValue: 13.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 900,
newValue: 11.13,
averValue: 13.22,
time: "13:39",
rose: 1,
totalPrice: 22,
},
{
volumes: 600,
newValue: 11.13,
averValue: 13.22,
time: "13:40",
rose: 1,
totalPrice: 22,
},
{
volumes: 300,
newValue: 11.13,
averValue: 13.22,
time: "13:41",
rose: 1,
totalPrice: 22,
},
{
volumes: 400,
newValue: 11.13,
averValue: 13.22,
time: "13:42",
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
newValue: 11.13,
averValue: 13.22,
time: "13:43",
rose: 1,
totalPrice: 22,
},
{
volumes: 600,
newValue: 11.13,
averValue: 13.22,
time: "13:44",
rose: 1,
totalPrice: 22,
},
{
volumes: 700,
newValue: 11.13,
averValue: 13.22,
time: "13:45",
rose: 1,
totalPrice: 22,
},
{
volumes: 800,
newValue: 11.13,
averValue: 13.22,
time: "13:46",
rose: 1,
totalPrice: 22,
},
{
volumes: 900,
newValue: 11.13,
averValue: 13.22,
time: "13:47",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
averValue: 13.22,
time: "13:48",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
averValue: 13.22,
time: "13:49",
rose: 1,
totalPrice: 22,
},
{
volumes: 200,
newValue: 11.13,
averValue: 13.22,
time: "13:50",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 11.13,
averValue: 13.22,
time: "13:51",
rose: 1,
totalPrice: 22,
},
{
volumes: 300,
newValue: 11.13,
averValue: 12.22,
time: "13:52",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
averValue: 15.22,
time: "13:53",
rose: 1,
totalPrice: 22,
},
{
volumes: 600,
newValue: 16.13,
averValue: 15.22,
rose: 1,
time: "13:54",
totalPrice: 22,
},
{
volumes: 500,
newValue: 16.13,
averValue: 15.22,
rose: 1,
time: "13:55",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "13:56",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "13:57",
totalPrice: 22,
},
{
volumes: 600,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "13:58",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "13:59",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "14:00",
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:01",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:02",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "14:03",
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
averValue: 14.22,
rose: 1,
time: "14:04",
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
averValue: 12.22,
rose: 1,
time: "14:05",
totalPrice: 22,
},
{
volumes: 0,
newValue: 16.13,
averValue: 12.22,
rose: 1,
time: "14:06",
totalPrice: 22,
},
{
volumes: 400,
newValue: 14.13,
averValue: 12.22,
rose: 1,
time: "14:07",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:08",
totalPrice: 22,
},
{
volumes: 300,
newValue: 16.13,
averValue: 15.22,
rose: 1,
time: "14:09",
totalPrice: 22,
},
{
volumes: 200,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:10",
totalPrice: 22,
},
{
volumes: 600,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:11",
totalPrice: 22,
},
{
volumes: 800,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:12",
totalPrice: 22,
},
{
volumes: 900,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:13",
totalPrice: 22,
},
{
volumes: 600,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:14",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:15",
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:16",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:17",
totalPrice: 22,
},
{
volumes: 800,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:18",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:19",
totalPrice: 22,
},
{
volumes: 50,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:20",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:21",
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "14:22",
totalPrice: 22,
},
{
volumes: 600,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:23",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:24",
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:25",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:26",
totalPrice: 22,
},
{
volumes: 1000,
newValue: 18.13,
averValue: 15.22,
rose: 1,
totalPrice: 22,
time: "14:27",
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:28",
totalPrice: 22,
},
{
volumes: 100,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:29",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:30",
totalPrice: 22,
},
{
volumes: 80,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:31",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 14.22,
rose: 1,
time: "14:32",
totalPrice: 22,
},
{
volumes: 500,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "14:33",
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:34",
totalPrice: 22,
},
{
volumes: 400,
newValue: 18.13,
time: "14:35",
averValue: 15.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 18.13,
averValue: 15.22,
rose: 1,
time: "14:36",
totalPrice: 22,
},
{
volumes: 300,
newValue: 18.13,
averValue: 16.22,
rose: 1,
time: "14:37",
totalPrice: 22,
},
{
volumes: 0,
newValue: 12.13,
averValue: 13.22,
rose: 1,
totalPrice: 22,
time: "14:38",
},
{
volumes: 500,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:39",
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:40",
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:41",
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:42",
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "14:43",
rose: 1,
totalPrice: 22,
},
{
volumes: 500,
time: "14:44",
newValue: 10.13,
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
time: "14:45",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
time: "14:46",
averValue: 12.22,
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "14:47",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:48",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:49",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "14:50",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:51",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:52",
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:53",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 12.13,
averValue: 10.22,
time: "14:54",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "14:55",
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:56",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "14:57",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "14:58",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "14:59",
rose: 1,
totalPrice: 22,
},
{
volumes: 100,
newValue: 10.13,
averValue: 12.22,
time: "15:00",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
time: "15:01",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "15:02",
totalPrice: 22,
},
{
volumes: 0,
newValue: 10.13,
averValue: 12.22,
rose: 1,
time: "15:03",
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
rose: 1,
time: "15:04",
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:05",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
rose: 1,
time: "15:06",
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:07",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:08",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:09",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 13.13,
averValue: 12.22,
time: "15:10",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 13.13,
averValue: 14.22,
time: "15:11",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 13.13,
averValue: 14.22,
time: "15:12",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 13.13,
averValue: 12.22,
time: "15:13",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:14",
rose: 1,
totalPrice: 22,
},
{
volumes: 0,
newValue: 14.13,
averValue: 12.22,
time: "15:15",
rose: 1,
totalPrice: 22,
},
]
},
};
},
mounted() {
this.initEcharts();
this.setDefaultChartOptions();
},
methods:{
initEcharts() {
const element = document.getElementById("time-chart");
if (!element) return;
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(element);
},
setEcharts() {
const options = this.generateChartOptions();
if (this.chart) {
this.chart?.hideLoading();
this.chart?.setOption(options,true);
}
},
setDefaultChartOptions() {
const timegroup = this.createTimeGroups();
const defaultOptions = {
grid:[
{
height:"65%",
left:"7%",
right:"7%",
bottom:"10%"
}
],
xAxis: [
{
type: "category",
data: timegroup,
axisLabel: {
interval: 0,
color: "#838D9E",
tooltip: false,
formatter: (value, index) => {
let arr = [
"09:30",
"10:00",
"10:30",
"11:00",
"11:30/13:30",
"14:00",
"14:30",
"15:00",
];
if (arr.includes(value)) return value;
},
},
axisTick: {
interval: (index, value) => {
console.log(this.timeSharingData,'我是获取的webData')
let arrIndex = [30, 60, 90, 120, 150, 180];
return arrIndex.includes(index);
},
},
},
],
yAxis: [
{
type: "value",
},
],
series: [],
};
if (this.chart) {
this.chart?.setOption(defaultOptions);
}
},
generateChartOptions() {
const timegroup = this.createTimeGroups();
const { lastClose, innerFenshis } = this.timeSharingData;
const newData = innerFenshis.map((item) => ({
value: item.newValue,
lastClose,
...item,
}));
const averData = innerFenshis.map((item) => ({
value: item.averValue,
lastClose,
...item,
}));
const volumes = innerFenshis.map((item) => ({
value: item.volumes,
lastClose,
...item,
}));
function format_y(v) {
if (parseFloat(v.toFixed(2)) > parseFloat(lastClose.toFixed(2))) {
return `{red|${v.toFixed(2)}}`;
} else if (parseFloat(v.toFixed(2)) === parseFloat(lastClose.toFixed(2))) {
return v.toFixed(2);
} else {
return `{green|${v.toFixed(2)}}`;
}
}
function format_y_rise(v) {
let num = lastClose == 0 ? 1 : lastClose;
if (parseFloat(v.toFixed(2)) > parseFloat(num.toFixed(2))) {
return `{red|${(((v - num) / num) * 100).toFixed(2)}%}`;
} else if (parseFloat(v.toFixed(2)) === parseFloat(num.toFixed(2))) {
return "0.00%";
} else {
return `{green|${(((v - num) / num) * 100).toFixed(2)}%}`;
}
}
const getInterval = (data) => {
const sortNew = data.slice().sort((a, b) => +a.newValue - +b.newValue);
return Math.max(
Math.abs(+lastClose - +sortNew[0].newValue),
Math.abs(+lastClose - +sortNew[data.length - 1].newValue)
);
};
const interval = getInterval(this.timeSharingData.innerFenshis);
let max, min;
if (Math.abs(lastClose + interval) == Math.abs(lastClose - interval)) {
max = lastClose + interval + 0.6;
min = lastClose - interval - 0.6;
} else {
max = lastClose + interval;
min = lastClose - interval;
}
return {
axisPointer: {
link: { xAxisIndex: "all" },
},
grid: [
{
left: "7%",
right: "7%",
top: "2%",
height: "65%",
},
{
left: "7%",
right: "7%",
top: "75%",
height: "15%",
},
],
tooltip: {
trigger: "axis",
backgroundColor: "#f1f1f1",
borderColor: "#ccc",
borderWidth: 1,
appendToBody: true,
textStyle: { color: "#333" },
axisPointer: {
type: "none",
label: { show: false, backgroundColor: "#333" },
},
zlevel: 1,
formatter: function (params) {
let color;
if (params[0].data.tradePrice > params[0].data.lastClose) {
color = 'style="color:red"';
} else {
color = 'style="color:green"';
}
return `
<div class="commColor" style="display: flex; flex-direction: column;">
<div>时间 <span>${params[0].data.time}</span></div>
<div>最新价 <span>${params[0].data.newValue}</span></div>
<div>均价 <span>${params[0].data.averValue}</span></div>
<div>均价 <span>${params[0].data.averValue}</span></div>
<div>成交量 <span style="color:black">${params[0].data.volumes}</span></div>
<div>总额 <span style="color:black">${params[0].data.totalPrice}</span></div>
</div>
`;
},
},
xAxis: [
{
gridIndex: 0,
type: "category",
boundaryGap: false,
data: timegroup,
axisLabel: {
show: false,
},
axisTick: { show: false },
},
{
gridIndex: 1,
type: "category",
boundaryGap: false,
data: timegroup,
axisTick: {
interval: (index, value) => {
let arrIndex = [30, 60, 90, 120, 150, 180, 210, 240];
return arrIndex.includes(index);
},
},
axisLabel: {
interval: 0,
color: "#838D9E",
tooltip: false,
formatter: (value, index) => {
let arr = [
"09:30",
"10:00",
"10:30",
"11:00",
"11:30/13:30",
"14:00",
"14:30",
"15:00",
];
if (arr.includes(value)) return value;
},
},
},
],
yAxis: [
{
gridIndex: 0,
type: "value",
position: "left",
min,
max,
position: ["-10%"],
interval: (max - min) / 8,
axisLabel: {
color: "#333",
formatter: format_y,
rich: {
red: { color: "red", lineHeight: 10 },
green: { color: "green", lineHeight: 10 },
},
},
},
{
gridIndex: 0,
type: "value",
position: "right",
axisLabel: {
color: "#333",
formatter: format_y_rise,
rich: {
red: { color: "red", lineHeight: 10 },
green: { color: "green", lineHeight: 10 },
},
},
min,
max,
interval: (max - min) / 8,
splitLine: false,
},
{
gridIndex: 1,
type: "value",
scale: true,
name: "成交量",
name: "",
min: 0,
max: Math.max(...volumes.map((item) => item.value)),
interval: Math.max(...volumes.map((item) => item.value)),
},
],
series: [
{
name: "最新",
type: "line",
animation: false,
symbol: "none",
xAxisIndex: 0,
yAxisIndex: 0,
lineStyle: { width: 1 },
data: newData,
},
{
name: "均线",
type: "line",
animation: false,
symbol: "none",
xAxisIndex: 0,
yAxisIndex: 0,
lineStyle: { width: 1, color: "#ffd700" },
data: averData,
},
{
name: "成交量",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 2,
data: volumes,
barGap: "10%",
barCateGoryGap: "90%",
itemStyle: {
color: (params, index) => {
if (params.data.volumes > 0) {
if (params.dataIndex !== 0) {
let newData = this.timeSharingData.innerFenshis.slice(
0,
params.dataIndex + 1
);
let lastVolumeIndex = -1;
let count = 0;
for (let i = newData.length - 1; i >= 0; i--) {
if (newData[i].volumes > 0) {
count++;
if (count == 2) {
lastVolumeIndex = i;
break;
}
}
}
if (lastVolumeIndex !== -1) {
let lastVolumeData = newData[lastVolumeIndex];
if (params.data.newValue > lastVolumeData.newValue) {
return "red";
} else {
return "green";
}
} else {
if (params.data.newValue > params.data.averValue) {
return "red";
} else {
return "green";
}
}
} else {
if (params.data.averValue > params.data.newValue) {
return "red";
} else {
return "green";
}
}
}
},
},
tooltip: { show: false },
},
],
};
},
createTimeGroups() {
let timegroup = [];
for (let i = 30; i < 60; i++) {
timegroup.push(`09:${i < 10 ? "0" + i : i}`);
}
for (let i = 0; i < 60; i++) {
timegroup.push(`10:${i < 10 ? "0" + i : i}`);
}
for (let i = 0; i < 30; i++) {
timegroup.push(`11:${i < 10 ? "0" + i : i}`);
}
timegroup.push("11:30/13:30");
for (let i = 31; i < 60; i++) {
if (i === 60) {
timegroup.push(`14:00`);
} else {
timegroup.push(`13:${i}`);
}
}
for (let i = 0; i < 30; i++) {
timegroup.push(`14:${i < 10 ? "0" + i : i}`);
}
for (let i = 30; i <= 60; i++) {
if (i === 60) {
timegroup.push(`15:00`);
} else {
timegroup.push(`14:${i}`);
}
}
return timegroup;
},
}
</script>