hightcharts-vue 蜡烛图 股票绘图 candlestick
main.js文件:import HighchartsVue from "highcharts-vue"import Highcharts from "highcharts"import stockInit from "highcharts/modules/stock"import mapInit from 'highcharts/mod
·
main.js文件:
import HighchartsVue from "highcharts-vue"
import Highcharts from "highcharts"
import stockInit from "highcharts/modules/stock"
import mapInit from 'highcharts/modules/map'
stockInit(Highcharts)
mapInit(Highcharts)
Vue.use(HighchartsVue)
Kchart组件中:
<template>
<div id="kChart">
<highcharts class="stock" :constructor-type="'stockChart'"
:options="stockOptions"></highcharts>
</div>
</template>
<script>
import Highcharts from "highcharts";
export default {
name: "kChart",
props: {
kChartData: Array //父组件传过来的值(因为每分钟要请求,所以采用watch监听)
},
data() {
return {
stockOptions: {
global: {
useUTC: false
},
rangeSelector: {
selected: 2
},
series: [{
type: "candlestick", //数据展示蜡烛图
data: "",
}],
chart: {
backgroundColor: "#17223E", //整个绘图区域背景
},
tooltip: {
split: true
},
colors: ["#616DA0"],
rangeSelector: {
enabled: false,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}],
inputEnabled: false,
selected: 2
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: "<small>{point.key}</small><table>",
pointFormat: '<tr><td style="color: {series.color}" colspan="2">当前秒 </td></tr></br>' +
'<tr><td>开盘:</td><td style="text-align: right">{point.open}</td></tr></br>' +
'<tr><td>最高:</td><td style="text-align: right">{point.high}</td></tr></br>' +
'<tr><td>最低:</td><td style="text-align: right">{point.low}</td></tr></br>' +
'<tr><td>收盘:</td><td style="text-align: right">{point.close}</td></tr>',
footerFormat: "</table>",
valueDecimals: 2
},
plotOptions: { //蜡烛图颜色
candlestick: {
color: "#33AA11",
upColor: "#DD2200",
lineColor: "#33AA11",
upLineColor: "#DD2200"
}
},
xAxis: {
type: 'datetime',
tickInterval: 36e5 / 60, // 1分钟 //刻度线步伐
minRange: 36e5 / 60,
labels: {
format: '{value: %M:%S}',
align: 'center',
rotation: -30
},
lineColor: "#21335B",
minorTickColor: "#21335B",
tickColor: "#21335B",
labels: {
style: {
color: "#5272B0"
},
}
},
yAxis: [{
gridLineWidth: "0px",
tickWidth: "0px",
labels: {
enabled: false
}
}]
}
};
},
methods: {
getData() {}
},
mounted() {
this.getData();
},
watch: {
kChartData(newValue, oldValue) {
this.stockOptions.series[0].data = newValue;
let date = newValue.map((e, i) => {
return e[0];
});
this.date = date;
let ohlc = [];
let dataLength = newValue.length;
for (let i = 0; i < dataLength; i += 1) {
ohlc.push([
newValue[i][0], // 时间戳
newValue[i][1], // 开盘价
newValue[i][2], // 最高价
newValue[i][3], // 最低价
newValue[i][4] // 收盘价
]);
}
}
}
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)