echrts引用
<template>
<div>
<a-row class="backG-color">
<a-col :span="8" class="titleFont priceTrend_titleFont">
<span>价格趋势</span>
</a-col>
<a-col :span="16" class="TAR">
历史最低价：
<span class="redFont">￥{{ priceView.lowPrice }}</span>
历史最高价
<span class="redFont">￥{{ priceView.heightPrice }}</span>
当前价
<span class="redFont">￥{{ priceView.nowPrice }}</span>
</a-col>
</a-row>
<a-row class="TAC MT24">
<a-radio-group v-model="value" @change="onChange">
<a-radio-button value="a">近30天</a-radio-button>
<a-radio-button value="b">近90天</a-radio-button>
<a-radio-button value="c">半年</a-radio-button>
<a-radio-button value="d">一年</a-radio-button>
</a-radio-group>
</a-row>
<div id="echartsBox" style="height: 400px;width:500px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { accMul, filterMoney } from "@/utils/order.js";
import { dateStrFormat } from "@/utils/func.js";
export default {
props: {
historyPriceList: {
type: Array,
default() {
return {};
},
},
goodsPrice: {
type: Number,
default() {
return {};
},
},
},
data() {
return {
value: "a",
time: "",
priceView: {
heightPrice: 0,
lowPrice: 0,
nowPrice: 0,
},
nowPrice: 0,
historyPrice: {
changeTime: "",
changePrice: 0,
},
newHistoryPriceList: [],
newgoodsPrice: 0,
};
},
created() {
this.newgoodsPrice = this.goodsPrice;
this.computedPrice();
},
mounted() {
this.limitDate();
},
methods: {
initGraph6() {
let Option6 = {
color: "#507ff3",
legend: {
label: "",
right: "4%",
},
xAxis: {
type: "time",
interval: 6 * 24 * 60 * 60 * 1000,
// splitNumber: 6,
splitLine: {
show: true,
lineStyle: {
color: "#efefef",
width: 1,
type: "solid",
},
},
min: 0,
max: 0,
axisLabel: {
interale: 0,
formatter: function (value) {
//在这里写你需要的时间格式
var t_date = new Date(dateStrFormat(value));
return t_date.getMonth() + 1 + "-" + t_date.getDate();
},
// formatter: function (value, index) {
// // 格式化成月/日，只在第一个刻度显示年份
// var date = new Date(value);
// var texts = [(date.getMonth() + 1), date.getDate()];
// if (index === 0) {
// texts.unshift(date.getYear());
// }
// return texts.join('/');
// }
},
data: [],
},
yAxis: [
{
type: "value",
// splitNumber: 1,
// scale: true,
show: true,
splitLine: {
show: true,
lineStyle: {
color: "#efefef",
width: 1,
type: "solid",
},
},
axisLine: {
lineStyle: {
color: "#818181",
},
},
data: [],
},
],
// 浮动块
tooltip: {
trigger: "axis",
backgroundColor: "#FA8C16",
color: "#fff",
borderWidth: "1",
extraCssText: "box-shadow: 0 0 10px rgba(216,216,216,0.8)",
borderColor: "#ccc",
textStyle: {
color: "#fff",
},
formatter: function (params) {
return (
params[0].data[0].split("-")[0] +
"年" +
params[0].data[0].split("-")[1] +
"月" +
params[0].data[0].split("-")[2] +
"日" +
"￥" +
filterMoney(params[0].data[1])
);
},
},
series: [
{
type: "line",
// stack: "总量",
itemStyle: {
normal: {
color: "#faa140",
},
},
data: [],
smooth: false,
step: "end",
},
],
grid: {
top: "5%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
};
var date = new Date();
var timeMax = date.getTime();
var splitTime = 0;
Option6.xAxis.max = timeMax;
if (this.value == "a") {
splitTime = 30;
} else if (this.value == "b") {
splitTime = 90;
} else if (this.value == "c") {
splitTime = 180;
} else if (this.value == "d") {
splitTime = 365;
}
date.setDate(date.getDate() - splitTime);
var timeMin = date.getTime();
Option6.xAxis.min = timeMin;
Option6.xAxis.interval = (24 * 60 * 60 * 1000 * splitTime) / 6;
var dif = this.historyPriceList.length - this.newHistoryPriceList.length;
if (dif >= 0) {
date.setDate(date.getDate() + 1);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
var changeTime = year + "-" + month + "-" + day;
var data = [changeTime, this.historyPriceList[dif].changePrice];
Option6.series[0].data.push(data);
}
for (var i = 0; i < this.newHistoryPriceList.length; i++) {
if (i < this.newHistoryPriceList.length - 1) {
if (
this.newHistoryPriceList[i].changeTime ==
this.newHistoryPriceList[i + 1].changeTime
) {
continue;
}
}
var data = [
this.newHistoryPriceList[i].changeTime,
this.newHistoryPriceList[i].changePrice,
];
Option6.series[0].data.push(data);
}
var myChart = echarts.init(document.getElementById("echartsBox"));
myChart.setOption(Option6);
if (this.value == "a") {
this.jubu(Option6);
}
},
computedPrice() {
this.priceView.heightPrice = this.priceView.lowPrice = this.nowPrice = this.newgoodsPrice;
if (this.historyPriceList.length != 0) {
for (var i = 0; i < this.historyPriceList.length; i++) {
if (
this.priceView.heightPrice < this.historyPriceList[i].changePrice
) {
this.priceView.heightPrice = this.historyPriceList[i].changePrice;
}
if (this.priceView.lowPrice > this.historyPriceList[i].changePrice) {
this.priceView.lowPrice = this.historyPriceList[i].changePrice;
}
}
}
this.priceView.heightPrice = filterMoney(this.priceView.heightPrice);
this.priceView.lowPrice = filterMoney(this.priceView.lowPrice);
this.priceView.nowPrice = filterMoney(this.nowPrice);
},
limitDate() {
this.newHistoryPriceList = [];
var time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
for (var i = 0; i < this.historyPriceList.length; i++) {
var Year = parseFloat(
this.historyPriceList[i].changeTime.substring(0, 4)
);
var Month = parseFloat(
this.historyPriceList[i].changeTime.substring(4, 6)
);
var Day = parseFloat(
this.historyPriceList[i].changeTime.substring(6, 8)
);
let data = new Object();
data.changeTime = Year + "-" + Month + "-" + Day;
data.changePrice = this.historyPriceList[i].changePrice;
if (this.value == "a") {
if (
(month == 1 && Month == 12 && year == Year + 1) ||
(year == Year && month == Month + 1)
) {
if (day <= Day) {
this.newHistoryPriceList.push(data);
}
} else if (month == Month && year == Year && day >= Day) {
this.newHistoryPriceList.push(data);
}
} else if (this.value == "b") {
if (
(year == Year + 1 && month + 9 < Month) ||
(year == Year && month < Month + 3)
) {
this.newHistoryPriceList.push(data);
} else if (
(year == Year + 1 && month + 9 == Month) ||
(year == Year && month == Month + 3)
) {
if (day <= Day) {
this.newHistoryPriceList.push(data);
}
}
} else if (this.value == "c") {
if (
(year == Year + 1 && month + 6 < Month) ||
(year == Year && month < Month + 6)
) {
this.newHistoryPriceList.push(data);
} else if (
(year == Year + 1 && month + 6 == Month) ||
(year == Year && month == Month + 6)
) {
if (day <= Day) {
this.newHistoryPriceList.push(data);
}
}
} else if (this.value == "d") {
if (year == Year) {
this.newHistoryPriceList.push(data);
} else if (year == Year + 1) {
if (month < Month) {
this.newHistoryPriceList.push(data);
} else if (month == Month) {
if (day <= Day) {
this.newHistoryPriceList.push(data);
}
}
}
}
}
let data = new Object();
data.changeTime = year + "-" + month + "-" + day;
data.changePrice = this.nowPrice;
this.newHistoryPriceList.push(data);
this.initGraph6();
},
onChange() {
this.limitDate();
},
jubu: function (data) {
this.$emit("listen", data, this.priceView);
},
},
};
</script>
<style lang="scss" scoped>
.header {
position: relative;
padding-left: 10px;
&::before {
content: " ";
width: 2px;
height: 12px;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 2px;
background: #8b9be1;
}
}
.TAC {
text-align: center;
}
.redFont {
color: red;
margin-right: 24px;
}
.MT24 {
margin-top: 24px;
}
.titleFont {
font-size: 16px;
font-weight: 400;
color: rgba(50, 50, 50, 1);
}
.titleFont span {
display: inline-block;
padding-left: 12px;
height: 20px;
line-height: 20px;
margin-left: 21px;
}
.backG-color {
height: 56px;
line-height: 56px;
background: rgba(250, 250, 250, 1);
}
</style>
浙公网安备 33010602011771号