vue组建之——模拟K线数据
子组建：
<template>
<div class='chart_cross'>
<div ref="crossEchart" class="chart"></div>
</div>
</template>
<script>
// Echart图表
import Echartfrom 'echarts'
// VUEX
import {mapState} from 'vuex'
// 数组处理
import _ from 'lodash'
// Chart假数据
const legendData = ['当天', '>2min', '1min-2min', '10s-1min', '<10s'];
// Chart_Grid配置文件
const gridConfig = {
left: '4%',
right: '3%',
bottom: '20%'
};
// 图表缩放探针配置(X/Y轴)
const dataZoomConfig = [
{type: 'inside', start: 50, end: 100},
{show: true, type: 'slider', y: '90%', start: 50, end: 100}
]
// Chart 颜色配置
const upColor = '#ec0000';
const upBorderColor = '#8A0000';
const downColor = '#00da3c';
const downBorderColor = '#008F28';
//
const chartDataArray = [
['2018/12/1', 224,202,123,306],
['2018/12/2', 360,232,232,65],
['2018/12/3', 204,386,323,402],
['2018/12/4', 229,235,654,204],
['2018/12/5', 138,245,534,504],
['2018/12/6', 197,43,423,324],
['2018/12/7', 263,824,124,503],
['2018/12/8', 235,234,523,65],
['2018/12/9', 223,156,234,424],
['2018/12/10', 258,210,654,42],
['2018/12/11', 297,324,234,53],
['2018/12/12', 290,312,534,76],
['2018/12/13', 316,341,654,76],
['2018/12/14', 231,299,235,76],
['2018/12/15', 357,312,876,65],
['2018/12/16', 876,268,234,42],
['2018/12/17', 296,312,342,24],
['2018/12/18', 426,387,24,42],
['2018/12/19', 246,377,543,32],
['2018/12/20', 190,367,567,65],
['2018/12/21', 193,356,547,34],
['2018/12/22', 215,325,125,43],
['2018/12/23', 204,245,85,27],
['2018/12/24', 252,245,234,24],
['2018/12/25', 235,65,237,54],
['2018/12/26', 537,266,273,54],
['2018/12/27', 634,245,256,24],
['2018/12/28', 215,422,423,25],
['2018/12/29', 254,234,234,63],
['2018/12/30', 297,457,4,35],
['2018/12/31', 230,236,54,453]
]
// 数据切割(每天)
const splitData = (rawData) =>{
let categoryData = [];
let values = [];
_.forEach(rawData, item=>{
categoryData.push(item.splice(0, 1)[0]);
values.push(item)
})
return {
categoryData: categoryData,
values: values
};
};
const chartData = splitData(chartDataArray);
// 数据切割（自定义条件）
const calculateMA = (dayCount) =>{
let result = [];
for (let i = 0; i < chartData.values.length; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
let sum = 0;
// 计算平均值
for (let j = 0; j < dayCount; j++) {
sum += chartData.values[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
export default {
// 通话次数趋势K线图
title: '',
name: 'login',
computed: {
...mapState({
// chartData: state => state.vux.chartData
})
},
props: {},
// 组建刷新
inject: ['reload'],
// 挂在组建
components: {},
data() {
return {
chrossData: []
}
},
// 初始化记载
created() {
// 先处理图表数据
let vue = this;
},
// DOM加载完毕执行操作
mounted() {
let vue = this;
vue.initChart();
},
// 事件处理
methods: {
// 初始化Chart
initChart() {
let vue = this;
vue.chart= Echart.init(vue.$refs.crossEchart);
vue.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: legendData
},
grid: gridConfig,
xAxis: {
type: 'category',
data: chartData.categoryData,
scale: true,
boundaryGap: false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
dataZoom: dataZoomConfig,
series: [{
name: '当天',
type: 'candlestick',
data: chartData.values,
itemStyle: {
normal: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
}
}
}, {
name: '>2min',
type: 'line',
data: calculateMA(5),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}, {
name: '1min-2min',
type: 'line',
data: calculateMA(10),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}, {
name: '10s-1min',
type: 'line',
data: calculateMA(15),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}, {
name: '<10s',
type: 'line',
data: calculateMA(20),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}]
})
},
// 图表数据填充
setChartOptions() {
let vue = this;
}
},
// 离开路由的操作
destroyed() {
}
}
</script>
<style scoped lang='less'>
.chart_cross {
width:100%;
height:250px;
}
.chart{width:100%;height:250px}
</style>
父组建： <chartCross></chartCross>
