<template>
<view style="height: 630rpx;width: 710rpx;">
<div id="container" style="height: 100%;width: 100%;"></div>
</view> </template>
<script>
// import * as echarts from 'echarts/core';
// import {
// TooltipComponent,
// GridComponent,
// LegendComponent,
// DataZoomComponent
// } from 'echarts/components';
// import { CandlestickChart, LineChart } from 'echarts/charts';
// import { UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
// echarts.use([
// TooltipComponent,
// GridComponent,
// LegendComponent,
// DataZoomComponent,
// CandlestickChart,
// LineChart,
// CanvasRenderer,
// UniversalTransition
// ]);
export default {
data() {
return {
}
},
props: {
data: {
type: Array,
//默认值
default: []
},
},
created() {},
mounted() {
// if (window.echarts) {
// } else {
// var scriptElement = document.createElement('script');
// document.body.appendChild(scriptElement);
// scriptElement.src = "/static/echarts.min.js"
// scriptElement.onload = scriptElement.onreadystatechange = () => {
// setTimeout(()=>{
// this.init()
// },1000)
// };
// }
this.init()
},
watch: {
data: function() {
this.init()
},
deep: true
},
methods: {
init() {
var chartDom = document.getElementById('container');
const myChart = echarts.init(chartDom);
var option;
let rawData = []
this.data.forEach(item => {
let x = []
x.push(item.timestamp)
x.push(item.start)
x.push(item.end)
x.push(item.max)
x.push(item.min)
rawData.push(x)
})
// let rawData = [
// ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
// ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
// ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
// ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
// ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
// ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
// ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
// ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
// ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
// ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
// ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
// ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
// ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
// ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
// ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
// ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
// ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
// ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
// ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
// ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
// ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
// ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
// ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
// ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
// ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
// ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
// ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
// ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
// ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
// ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
// ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
// ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
// ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
// ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
// ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
// ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
// ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
// ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
// ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
// ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
// ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
// ]
rawData = rawData.reverse();
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('--');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += +data[i - j][1];
}
result.push((sum / dayCount).toFixed(3));
}
return result;
}
const dates = rawData.map(function(item) {
return item[0];
});
const data = rawData.map(function(item) {
return [+item[1], +item[2], +item[3], +item[4]];
});
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
},
formatter: function(params, ticket, callback) {
var result = "时间：" + params[0].name + "<br/>";
params.forEach(function(item) {
if (item.seriesName == "Day") {
result += item.marker + " " + "开盘 : " + item.data[1] + "</br>";
result += item.marker + " " + "收盘 : " + item.data[2] + "</br>";
result += item.marker + " " + "最高 : " + item.data[3] + "</br>";
result += item.marker + " " + "最低 : " + item.data[4] + "</br>";
} else {
result += item.marker + " " + item.seriesName + " : " + item.value
.toString().substring(0, 7) + "</br>";
}
});
return result;
},
},
xAxis: {
type: 'category',
data: dates,
axisLine: {
lineStyle: {
color: '#8392A5'
}
},
},
yAxis: {
scale: true,
axisLine: {
lineStyle: {
color: '#8392A5'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#999'
}
}
},
grid: {
bottom: 80,
top: '10%',
left: '14%',
right: '12%',
},
dataZoom: [{
handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
textStyle: true,
height: 15,
start: 50,
end: 100
},
{
type: 'inside',
}
],
series: [{
type: 'candlestick',
name: 'Day',
data: data,
itemStyle: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
}
]
};
option && myChart.setOption(option);
}
}
} </script>
<style>
</style>
0 个评论
要回复文章请先登录或注册