You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.0 KiB
117 lines
3.0 KiB
<template>
|
|
<div ref="chart" class="chart-box"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import Highcharts from "highcharts/highstock";
|
|
export default {
|
|
name: "price-line",
|
|
props: ['line','increase'],
|
|
data() {
|
|
return {
|
|
chart: undefined
|
|
};
|
|
},
|
|
watch: {
|
|
line(n) {
|
|
if (n) {
|
|
// debugger;
|
|
this.chart.series[0].setData(this.dataFilter(n))
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
dataFilter(n) {
|
|
|
|
let min = Math.min(...n)
|
|
return n.map(item => item - min)
|
|
},
|
|
|
|
initMap() {
|
|
this.chart = Highcharts.chart(this.$refs.chart, {
|
|
chart: {
|
|
spacingRight: 0,
|
|
spacingLeft: 0,
|
|
animation: false,
|
|
backgroundColor: "transparent",
|
|
},
|
|
title: {
|
|
text: null
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
xAxis: {
|
|
visible: false
|
|
},
|
|
yAxis: {
|
|
visible: false,
|
|
startOnTick: false
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
series: [{
|
|
type: 'areaspline',
|
|
lineWidth: 1,
|
|
marker: {
|
|
enabled: false
|
|
},
|
|
data: this.dataFilter(this.line),
|
|
// color: "#00c162",
|
|
color: this.changeColors(),
|
|
fillColor: {
|
|
linearGradient: {
|
|
x1: 0,
|
|
x2: 0,
|
|
y1: 0,
|
|
y2: 1
|
|
},
|
|
stops:this.changeColors1()
|
|
// stops: [
|
|
// [0, "rgba(2,150,82,.5)"],
|
|
// [1, "rgba(2,150,82,.2)"]
|
|
// ]
|
|
}
|
|
}, ]
|
|
});
|
|
},
|
|
changeColors(){
|
|
let col
|
|
if(this.increase * 1 >= 0 || !this.increase){
|
|
col='#00c162'
|
|
}else{
|
|
col="#ff0500"
|
|
}
|
|
return col
|
|
},
|
|
changeColors1(){
|
|
let col
|
|
if(this.increase * 1 >= 0 || !this.increase){
|
|
col=[
|
|
[0, "rgba(2,150,82,.5)"],
|
|
[1, "rgba(2,150,82,.2)"]
|
|
]
|
|
}else{
|
|
col=[
|
|
[0, "rgba(255,5,0,.5)"],
|
|
[1, "rgba(255,5,0,.2)"]
|
|
]
|
|
}
|
|
return col
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMap();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-box {
|
|
height: 130px;
|
|
}
|
|
</style>
|
|
|