Skip to content

M
Muse
Commit 1092afe5 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

印象数据看板

parent e6ec4fa8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 219 deletions
src/App.vue
View file @ 1092afe5
......@@ -39,6 +39,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css';
@import '//at.alicdn.com/t/font_635492_i78o4snnnqp.css';
@import './assets/global/global.css';
body,html{
padding: 0px;
......
src/components/viitto/dataLook.vue
View file @ 1092afe5
This diff is collapsed.
src/components/viitto/lineChart2.vue
View file @ 1092afe5
This diff is collapsed.
src/components/viitto/lineChartK.vue 0 → 100644
View file @ 1092afe5
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.PINGFANG{
font-family: "PINGFANG REGULAR";
}
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts" >
</div>
</template>
<script>
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
result.push(data[i].value[4]);
}
return result;
}
export default {
props:[
'zoom',
'rightShow',
'lineChartKData'
],
data(){
return {
myChart: null,
dataList: [],
dates: []
}
},watch:{
},created(){
},mounted() {
let data = this.lineChartKData.map(function (item) {
return [+item.StartPrice, +item.MaxPrice, +item.EndPrice, +item.MinPrice, +item.ClickCount];
});
var dates = this.lineChartKData.map(function (item) {
return item.CreateDate;
});
let dataList = []
for(let i = 0; i < data.length; i++) {
let obj = {
value: data[i],
// itemStyle: {
// normal: {
// color: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#D53C34',
// color0: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#43E9F3',
// borderColor: i > data.length - 4 ? '#6A6F81' : '#D53C34',
// borderColor0: i > data.length - 4 ? '#6A6F81' : '#43E9F3'
// }
// }
}
dataList.push(obj)
}
this.dataList = dataList
this.dates = dates
this.myChart = this.$echarts.init(this.$refs.myecharts);
this.init()
},methods:{
resize(){
this.myChart.resize()
},
init() {
// , '月均线', '季度均线', '黄金线'
var dataAxis = [];
let _this = this;
let option = {
backgroundColor: '#21202D',
legend: {
data: ['成交单价', '产品点击'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
},
left: 100,
top: 10,
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var obj = {}
if (params[0].value[0] !== undefined) {// 防止放上去提示undefined
obj = {
sName: params[0].seriesName,
name: params[0].name,
start: params[0].value[1],
close: params[0].value[2],
low: params[0].value[3],
height: params[0].value[4],
click: params[0].value[5],
}
} else {
obj = {
sName: params[1].seriesName,
name: params[1].name,
start: params[1].value[1],
close: params[1].value[2],
low: params[1].value[3],
height: params[1].value[4],
click: params[1].value[5],
}
}
var res = obj.sName + ' ' + obj.name
res += '<br/> 开始值: ' + obj.start
res += '<br/> 最高值: ' + obj.height
res += '<br/> 结束值: ' + obj.close
res += '<br/> 最低值: ' + obj.low
res += '<br/> 点击: ' + obj.click
return res
},
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false }
},
grid: {
bottom: 80,
left: 70,
right: 20,
},
dataZoom: [{
textStyle: {
color: '#8392A5'
},
start: 0,
end: 10,
handleIcon: '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',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside',
}],
animation: false,
series: [
{
type: 'candlestick',
name: '成交单价',
data: _this.dataList,
},
{
name: '产品点击',
type: 'line',
data: calculateMA(5, _this.dataList),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
color: "#F5AF19",
}
}
},
// {
// name: '月均线',
// type: 'line',
// data: calculateMA(10, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '季度均线',
// type: 'line',
// data: calculateMA(20, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '黄金线',
// type: 'line',
// data: calculateMA(30, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// }
]
}
_this.myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment